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/*"
}
]
}
Related
I have a CloudFront distribution setup that points to an S3 bucket whose purpose is to host a website. Whenever I go to a nested page: /path1/path2, the page renders fine. If I refresh the page, I get presented with:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>89F25EB47DDA64D5</RequestId>
<HostId>Z2xAduhEswbdBqTB/cgCggm/jVG24dPZjy1GScs9ak0w95rF4I0SnDnJrUKHHQC</HostId>
</Error>
The website is hosted on a private S3 bucket that can only be accessed via an OAI, that has the following permissions:
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "PolicyForCloudFrontPrivateContent",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1XXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::frontend-bucket-XXXXXXXXXXXX/*"
},
{
"Sid": "Enforce SSL",
"Effect": "Deny",
"Principal": "*",
"Action": "s3:*",
"Resource": [
"arn:aws:s3:::frontend-bucket-XXXXXXXXXXXX",
"arn:aws:s3:::frontend-bucket-XXXXXXXXXXXX/*"
],
"Condition": {
"Bool": {
"aws:SecureTransport": "false"
}
}
}
]
}
I've read a tonne of StackOverflow questions about people experiencing the same issue. Here's what I've tried so far (nothing worked):
Changed bucket name from <website bucket>.s3.us-west-2.amazonaws.com to <website bucket>.s3-website-us-west-2.amazonaws.com
Added custom responses for 404 & 403 error to return a 200 response, with a response page path of /index.html and 0 TTL. Instead of returning an AccessDenied XML formatted page, it returns blank pages.
I've added an invalidation to the /* paths
Again, whenever I hit the URL of nested pages path the first time it works fine. If I'm just hitting the base URL with no nested paths, I don't run into this issue at all. When I refresh that same page, that's when things break. What am I doing wrong?
This is not an issue with cloudfront or s3 as long as you have made the objects in the s3 bucket public and cloudfront is pointing right. This is a very common case when people try to host react based websites on the s3 bucket. This can be solved by multiple methods one of them are :-
While configuring your s3 bucket to be served as static website, just point the error document to index.html
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.
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.
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