Description
I'm currently attempting to put my Vue.js project up on AWS using static web hosting on S3.
Steps
√ I've first run npm run build inside my project which generated ./dist, ./dist/index.html, ./dist/static/*
√ I've uploaded all ./dist/* files to my bucket
√ I've created an S3 bucket with a public policy:
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::BUCKET_NAME_HERE/*"
}
]
}
√ I've added Static Website Hosting property and set the Index-document to index.html
X When visiting https://s3.amazonaws.com/BUCKET_NAME_HERE/index.html my app is running
Errors:
When checking the console, the only errors I have are the following:
GET https://s3.amazonaws.com/static/css/app.139eb30c5abb8a0cf50add8e31aed259.css net::ERR_ABORTED 403 (Forbidden)
GET https://s3.amazonaws.com/static/favicon.ico 403 (Forbidden)
Any leads as to what I may have missed or am doing wrong?
Thanks in advance
Your web page is attempting to load assets from the wrong location. You are seeing 403 (Forbidden) and that's because your page is accidentally specifying an S3 bucket name of 'static' which either does not exist or you do not have access to it. This URL is incorrect:
https://s3.amazonaws.com/static/css/app.xxx.css
If you intend to use path-style URLs for static assets then URLs should be of the form:
https://s3.amazonaws.com/mybucket/static/css/app.xxx.css
Alternatively, you can use virtual-hosted–style URLs, of the form:
https://mybucket.s3.amazonaws.com/static/css/app.xxx.css
Note the inclusion of 'mybucket' in both URLs.
Related
Nuxt 2.13 now gives you the option of turning your universal application into a full static site.
I upgraded nuxt to 2.13.3, set the target: static in the nuxt.config.js and then I run nuxt build && nuxt export
Now I have static file's in the /dist folder. When I use MAMP to view the /dist folder everything works fine, I can navigate to subpages and refresh the page.
The problem is when I upload to S3 + Cloudfront
The S3 bucket is set to static web hosting. The Index document and Error document are set to index.html - When I navigate to to to the bucket content I am able to load the page and navigate to subpages. However when I refresh a subpage then the user is shown the index page.
On the s3 bucket I have tried enabling all public access - this did not work.
Here is my bucket policy
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::cdn-frontend/*"
}
]
}
On cloudfront the Default Root Object is set to index.html
what is the file name for your fallback or error page ? In nuxt config, you can give below option to generate a file with different name than index.html,
generate: {
fallback: '404.html',
}
This during the generate operation will create a 404.html file and you can use the same in your static website hosting as an error page.
I am trying to deploy my website to aws with cloudfront and route53. The site is deployed and running on https://higgle.io
However the assets are not loading, for the images are throwing 403. How do I fix it?
I am using serverless serverless-next.js. And I was following one of their blog post to set it up.
So far I added which has serverless.yml on the route level.
higgle:
component: serverless-next.js
and my next.config.js looks like
module.exports = {
target: 'serverless',
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
return config
}
}
While the folder structrs looks like
-root
-.next
-pages
-_document.js
-index.js
-public
-static
-favicon.ico
-next.config.js
-package.json
-serverless.yml
Any idea how to fix this?
Thanks
S3 is returning a 403 because your items are private.
Change your S3 items to public. Check that they are accessible via your S3 static hosting address.
Step 1 will fix any static resources. If you are running a single page application, you will also need to return your index page when a 404 is returned by S3. In CloudFront, go to error pages, create a custom error response, choose 404 response, choose the option to customize the response, make the response code 200 and the response page path your index page.
Your bucket policy should be:
{
"Version": "2012-10-17",
"Id": "Policy1517754859350",
"Statement": [
{
"Sid": "Stmt1517754856505",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
}
]
}
I am using CloudFront in combination with a S3-bucket.
When I access my CloudFront-domain (d4...cloudfront.net) directly, everything works fine and I can see my website + SSL-certificate.
But when I access my website-url, I get an 403 Forbidden-message (An Error Occurred While Attempting to Retrieve a Custom Error Document).
This is the error I get:
This is the response-header:
What I tried so far:
When I created the CloudFront-distribution, I selected "Origin Access Identity: Create a new Identity" and "Update Bucket Policy"
I added a Custom Error Page, which returns StatusCode 200 and /index.html as the respone page
My S3 bucket is not public, because I only want my CloudFront to access the S3-Bucket with this policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "2",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin
Access Identity ..."
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.../*"
}
]
}
You will want to setup Origin Access Identity. This allows you to keep your bucket private and only allow access thru CloudFront. This is very easy to setup. I have included two links to walk you thru the steps and to help you understand everything.
enter link description here
Serving Private Content through CloudFront
This StackOverflow Q/A will help you also. Review the answer by "Michael - sqlbot".
Relationship between Origin Access Identities and CloudFront Signed Urls
I created an S3 bucket, and set it up as a Static Website as instructed in http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html
Afterwards, the basic domain is returning a AccessDenied:
http://www.mydomain.com.s3-us-west-1.amazonaws.com/
However, my index page serves just fine:
http://www.mydomain.com.s3-us-west-1.amazonaws.com/index.html
So it isn't related to the permissions of the files in the bucket (those are public now)
I get the feeling that I am missing a piece that links http://www.mydomain.com.s3-us-west-1.amazonaws.com/ to http://www.mydomain.com.s3-us-west-1.amazonaws.com/index.html, yet the docs read as though the "Static Web Hosting" property should do it all as long as you specify the index.html and error.html.
My bucket policy is standard:
{
"Version": "2012-10-17",
"Id": "PublicBucketPolicy",
"Statement": [
{
"Sid": "Stmt1482880670019",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www.mydomain.com/*"
}
]
}
Note: I didn't do the route 53 setup, because I want to direct my websites DNS CNAME to www.mydomain.com.s3-us-west-1.amazonaws.com once I see it working.
Your endpoint is wrong: www.mydomain.com.s3-eu-west-1.amazonaws.com
It looks like you configured your bucket in eu-west-1, but you are referencing us-west-1.
However, you are not using the correct URL for S3 web site. The URL must have "s3-website-" in the name like this example:
www.mydomain.com.s3-website-eu-west-1.amazonaws.com
Start over with this document and double check each step:
Setting up a Static Website Using a Custom Domain
I've set up many static sites on AWS/S3 with other domain registrars; however, google domains is giving me some issues.
Steps I've taken:
On S3/AWS:
created bucket domainname.org
enabled static website hosting by adding index.html
uploaded index.html and related documents to bucket
create bucket www.domainname.org to redirect to bucket domainname.org
created bucket policy for domainname.org as follows:
{
"Version": "2012-10-17", "Statement": [ { "Sid": "AddPerm",
"Effect": "Allow", "Principal": "", "Action": [ "s3:GetObject" ],
"Resource": [ "arn:aws:s3:::domainname.org/" ] } ]
}
On google domains side
Created CNAME record with name www and data entry equal to the bucket's endpoint "bucketname.com.s3-website-us-west-2.amazonaws.com"
Set TTL to 60 so I can see changes.
I can see the site at that endpoint but it is not redirecting/mapping to the domainmae.org as expected. Usually, this set-up would be enough with other registrars
What am I missing? How do you properly set up static site hosting on S3/AWS while using google domains ?
Thank you for your help !
On the Google side, configure the CNAME record (www) to point to s3.amazonaws.com. (yes, the dot included) ... like this:
... and wait a few minutes.
Make sure your S3 bucket is named: www.yourdomain.com