0

im trying to host my angular website on amazon S3.

When i access the endpoint of my website hosting S3 the index.html files is dowloaded instead of being served, cant figure out why

This seems to appear only when i upload all of my angular project, when i just upload the index.html files everything works fine

here is the metadata of my index.html:

curl -I http://mybucket.s3-website-us-west-2.amazonaws.com/                                                                 
HTTP/1.1 200 OK
x-amz-id-2:
x-amz-request-id:
Date: Fri, 13 Nov 2015 11:32:50 GMT
Last-Modified: Fri, 13 Nov 2015 11:32:03 GMT
ETag: ""
Content-Type: binary/octet-stream
Content-Length: 4754
Server: AmazonS3

my bucket : 

http://alpha.akt.io.s3-website-us-west-2.amazonaws.com/

and my bucket policy:

{
"Version": "2012-10-17",
"Id": "Policy1447414200659",
"Statement": [
    {
        "Sid": "Stmt1447414198383",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::alpha.akt.io/*"
    }
]
}

Edit 1:

Looks like the content type is the probleme, i switched it to text/html and it work

But he doesn't want to load the javascript and css, i checked the content type of this files, put application/javascript and text/css to it seems to not work

bboumend
  • 490
  • 3
  • 13
  • Can you provide us with a link so we can check it out? Also check if your paths are correct and all files are marked as public. – Savjee Nov 13 '15 at 14:10
  • I eddited the post with the information, all files should be public with my bucket policy, all path seems correct to – bboumend Nov 13 '15 at 14:33
  • Just in case, i have tried to put all files in public, doesn't solve the probleme – bboumend Nov 13 '15 at 15:48
  • It looks like when i try to access a files like https://s3-us-west-2.amazonaws.com/alpha.akt.io/angular/static/css/base.css, he giving me only the name of the files – bboumend Nov 13 '15 at 16:02

2 Answers2

0

I use c3md as part of my autodeploy process and here how command looks like

/usr/local/bin/s3cmd --access_key=[amazon key] --secret_key=[amazon secret] --acl-grant=read_acp:Everyone --no-mime-magic sync -r -P public/pull-requests/* s3://[your bucket name]/

uploaded file type problem is solved using --no-mime-magic

also you might find it useful using this strategy to make html5 routing work, it also allows you to have multiple angular apps in subfolders of the same bucket and use different subdomains at will. S3 Static Website Hosting Route All Paths to Index.html

Community
  • 1
  • 1
Andrew Arnautov
  • 345
  • 3
  • 5
0

In your S3 bucket, enable public read/write (you still need secret keys to deploy to S3)

Next, get an Access Key, and a Security Key by following the steps here.

then try this using your new Access Key, and Security Key:

$ aws configure ( may need to $ pip install awscli)

Next, make a production build and deploy it to AWS:

$ ng build --prod

$ aws s3 cp ./dist/REPO_NAME s3://BUCKET_NAME --recursive --acl public-read

This is assuming that you are using the bucket to host your website (using index.html for index document).

Mar
  • 13
  • 6