This has been the most efficient and concise tutorial on setting up Gatsby this way. I was able to pretty much follow along and set everything up in "real time". There have been changes to the layout of the cloudfront and S3 interfaces in the past 9 months - which are superficial except for the link for the s3 bucket is not viewable in the bucket creation page, but is viewable in the dashboard after selecting the bucket. Thank you for making this series!
So good. I hope you keep making videos. I was worried about deploying to AWS, but this video made it simple. But also, I agree with the comment above, please zoom in a little more.
Thanks for the great tutorial! It helped me a lot! As a viewer, I felt it would be easier to follow if you slow down just a little bit, and get a better audio setup.
When I try to upload the files into my bucket it doesnt upload folders only the files within my folders but I have like a hundred folders and can just click through each? Solution?
It's been a while since I used the REST option, but I seem to remember having issues with 404 pages returning the correct response when using that method. To prevent the bucket from being accessed directly and being indexed you can pass along a referral value from CloudFront and then modify your bucket policy to check for this value. I describe the process in this video starting at the 6:00 mark. ruclips.net/video/U0ZbJi-OKg4/видео.html
Hey I'm facing the issue with the urls. routes working fine but after refreshing the page cloudfront return the some sort of XML page e.g "app.com" and I go to on contact "app.com/contact" it's working ok but when I refresh the page it's not working
since static sites don't need servers, isn't it easier to hose it on github/netlify? Are there any reason to use AWS? Also, don't you need to pay for hosting if you do it on AWS?
Yes. I agree that it is probably easier and in most cases cheaper on something like Netlify. The main reason someone might choose AWS over netlify is for more control. Although Netlify has a ton of nice features that in my opinion will suffice for the vast majority of us, you do delegate security to them and are constrained to those features they implement. I know there are some organizations (especially larger organizations) that are reluctant to hand over control to a third party provider such as Netlify.
I've used lambda edge functions in the past to add headers. Here's one article that talks about how to do that: aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/
Thanks for this awesome video, very helpful... I have one question, I don't have experience with aws, so my question is: How much bandwidth you can get for free per month when using s3 and cloudfront? and how does aws charge you? is it per bucket/bandwith/GB/etc... ?
AWS provides a pricing calculator at calculator.aws/ that I would recommend using to estimate your scenario. The pricing is a little different per service. For the S3 bucket, they charge based on the size stored in the bucket, number of requests to the bucket (PUT, GET, LIST). From past experience, even for a large site, this is trivial since the size of the files in the bucket will probably be small and the number of requests will be limited since Cloudfront serves up most of the requests. Unless you have an extremely large site, this could be as cheap as $5 or less per month for a medium size site (probably much less). If you are hosting your DNS with AWS, they charge $.50 per hosted zone and then a small fee based on the number of queries. This will also be trivial for small to medium sites. Cloudfront pricing is based on amount of data that is transferred out and so this will vary based on the amount of traffic your site has. You'll have to use their old calculator to calculate the cloudfront cost. The do offer a free tier for the first 12 months for Cloudfront.
Hey great video, i'm having an issue where any route results in an access denied error. I tried setting the error pages to redirect back to index.html as was suggested by some tutorials, but no luck then an route like mysite.com/new-page redirects back to the home page. Any ideas?
So it is odd that the home page works. I would verify a few things: 1) Make sure you are using the s3 website endpoint. The website endpoint will look something like this: DOC-EXAMPLE-BUCKET.s3-website-us-east-1.amazonaws.com. 2) Make sure the s3 bucket is set to allow public access to all objects. One other follow up question. Are you going through cloudfront or directly to s3 bucket?
Hello Phil, I have followed this amazing tutorial to upload a few gatsby sites on AWS. Recently, I got a message from AWS something about AWS migrating some of their services. Does this affect how you have deployed in the tutorial? The first paragraph from AWS is below: "This is a reminder that Amazon Simple Storage Service (S3) and Amazon CloudFront are both migrating their services’ certificates from DigiCert to Amazon Trust Services starting March 23, 2021. If you do not send HTTPS traffic directly to your S3 bucket, or only use custom domains like www.example.com with your CloudFront distribution, then there is no impact and you can disregard this message. If you do send HTTPS traffic directly to your S3 bucket, or use CloudFront domains covered by *.cloudfront.net, please continue reading and review the FAQ below on which certificates are migrating."
It looks like it will only affect sites if you use the s3 website URL or cloudfront.net URL to access your site. If you have tied a custom domain to cloudfront then according to the message your site should not be impacted and will not affect how I've deployed the sites in the tutorial.
Thanks Phil. This has helped me today.
Glad to hear it!
This has been the most efficient and concise tutorial on setting up Gatsby this way. I was able to pretty much follow along and set everything up in "real time".
There have been changes to the layout of the cloudfront and S3 interfaces in the past 9 months - which are superficial except for the link for the s3 bucket is not viewable in the bucket creation page, but is viewable in the dashboard after selecting the bucket.
Thank you for making this series!
Thanks. I'll add it to my list to produce an updated video to reflect the new layout changes.
Nice one! I'm just getting started. It showed me the way 😉
Thank you!
Thank you, amazing video! Lot's of value!
So good. I hope you keep making videos. I was worried about deploying to AWS, but this video made it simple. But also, I agree with the comment above, please zoom in a little more.
Glad it helped!
you made my learning process simple, thank you
Thanks the video was really helpful. Would be even better if the tutorial showed how to deploy to the s3 bucket using gatsby-plugin-s3.
Great video!
Thanks!
Thanks for the great tutorial! It helped me a lot!
As a viewer, I felt it would be easier to follow if you slow down just a little bit, and get a better audio setup.
I'm glad it helped. Thanks for the feedback.
It will be great if you make a video to add Authentication using Cognito and hosting on Amplify for Gatsby.
When I try to upload the files into my bucket it doesnt upload folders only the files within my folders but I have like a hundred folders and can just click through each? Solution?
this worked, thankyou !
You're welcome. Thanks for watching
This works but leaves the bucket open to indexing. It is my understanding that it is better to use the REST endpoint. Please advise. Thank you!
It's been a while since I used the REST option, but I seem to remember having issues with 404 pages returning the correct response when using that method. To prevent the bucket from being accessed directly and being indexed you can pass along a referral value from CloudFront and then modify your bucket policy to check for this value. I describe the process in this video starting at the 6:00 mark.
ruclips.net/video/U0ZbJi-OKg4/видео.html
I've been getting "403 permission denied". Solved it with
Principal: "*"
in
Policy Editor.
Hey I'm facing the issue with the urls.
routes working fine but after refreshing the page cloudfront return the some sort of XML page
e.g "app.com" and I go to on contact "app.com/contact" it's working ok but when I refresh the page it's not working
Is there an error message on the XML page?
good example !! thanks
Thanks for watching!
how do i get it touch with you . i understood the bucket creation but the commands you wrote on visual studio need more clarity
Will this allow SSR and DSG too?
since static sites don't need servers, isn't it easier to hose it on github/netlify? Are there any reason to use AWS? Also, don't you need to pay for hosting if you do it on AWS?
Yes. I agree that it is probably easier and in most cases cheaper on something like Netlify. The main reason someone might choose AWS over netlify is for more control. Although Netlify has a ton of nice features that in my opinion will suffice for the vast majority of us, you do delegate security to them and are constrained to those features they implement. I know there are some organizations (especially larger organizations) that are reluctant to hand over control to a third party provider such as Netlify.
@@GuidingDigital Ah, perfect. Thank you for the explanation!
How do you set CSP headers in AWS for Gatsby site?
I've used lambda edge functions in the past to add headers. Here's one article that talks about how to do that:
aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/
thanks, very interesting! just a suggestion... could you zoom in your windows a little bit more? would be nice to see better :)
Noted!
Thanks for this awesome video, very helpful...
I have one question, I don't have experience with aws, so my question is: How much bandwidth you can get for free per month when using s3 and cloudfront? and how does aws charge you? is it per bucket/bandwith/GB/etc... ?
AWS provides a pricing calculator at calculator.aws/ that I would recommend using to estimate your scenario. The pricing is a little different per service. For the S3 bucket, they charge based on the size stored in the bucket, number of requests to the bucket (PUT, GET, LIST). From past experience, even for a large site, this is trivial since the size of the files in the bucket will probably be small and the number of requests will be limited since Cloudfront serves up most of the requests. Unless you have an extremely large site, this could be as cheap as $5 or less per month for a medium size site (probably much less). If you are hosting your DNS with AWS, they charge $.50 per hosted zone and then a small fee based on the number of queries. This will also be trivial for small to medium sites. Cloudfront pricing is based on amount of data that is transferred out and so this will vary based on the amount of traffic your site has. You'll have to use their old calculator to calculate the cloudfront cost. The do offer a free tier for the first 12 months for Cloudfront.
Hey great video, i'm having an issue where any route results in an access denied error. I tried setting the error pages to redirect back to index.html as was suggested by some tutorials, but no luck then an route like mysite.com/new-page redirects back to the home page. Any ideas?
What are the details of the error page? Is it a cloudfront error page?
@@GuidingDigital No, its an s3 access error page. But it will load the home page route, just nothing else.
So it is odd that the home page works. I would verify a few things: 1) Make sure you are using the s3 website endpoint. The website endpoint will look something like this: DOC-EXAMPLE-BUCKET.s3-website-us-east-1.amazonaws.com. 2) Make sure the s3 bucket is set to allow public access to all objects.
One other follow up question. Are you going through cloudfront or directly to s3 bucket?
Hello Phil, I have followed this amazing tutorial to upload a few gatsby sites on AWS. Recently, I got a message from AWS something about AWS migrating some of their services. Does this affect how you have deployed in the tutorial? The first paragraph from AWS is below:
"This is a reminder that Amazon Simple Storage Service (S3) and Amazon CloudFront are both migrating their services’ certificates from DigiCert to Amazon Trust Services starting March 23, 2021. If you do not send HTTPS traffic directly to your S3 bucket, or only use custom domains like www.example.com with your CloudFront distribution, then there is no impact and you can disregard this message. If you do send HTTPS traffic directly to your S3 bucket, or use CloudFront domains covered by *.cloudfront.net, please continue reading and review the FAQ below on which certificates are migrating."
It looks like it will only affect sites if you use the s3 website URL or cloudfront.net URL to access your site. If you have tied a custom domain to cloudfront then according to the message your site should not be impacted and will not affect how I've deployed the sites in the tutorial.