Deploy React App to CloudFront with HTTPS Custom Domain
ฝัง
- เผยแพร่เมื่อ 19 ก.ค. 2024
- Learn how to deploy a react app, or any static website, to a Cloud Front distribution custom domain name and SSL Certificate.
Chapters:
0:00 Intro
0:59 Building the react app
1:35 Create an S3 bucket
2:37 Create CloudFront Distribution
4:16 Custom Domain Name
5:19 SSL Certificate
7:08 DNS Record in Route 53
8:26 Custom Error Page for React
10:46 Updating the Website
12:05 CloudFront Invalidate Files
13:06 AWS CLI
aws s3 sync directory-path "s3://your-bucket-name/"
aws cloudfront create-invalidation --distribution-id your-distribution-id --paths '/*'
🔗Route 53 Domain Name
• AWS Route 53 Domain Name
🔗 AWS CLI
• Setting Up The AWS CLI
🔗S3 Static Website AWS CLI
sammeechward.com/aws-cli-s3-s...
🔗Moar Links
My Website: www.sammeechward.com
Instagram: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward - วิทยาศาสตร์และเทคโนโลยี
![[LIVE] : ONE ลุมพินี 71 วันนี้!! คู่เอก "ทรงชัยน้อย vs รักษ์"](http://i.ytimg.com/vi/_AGPnq2p6Js/mqdefault.jpg)
Thank you for this video. For anyone following along, as of 3/24/23 they've replaced "Origin Access Identity" with "Origin access control settings (recommended)". The steps are roughly the same, but you have to copy the bucket policy, then go into your s3 bucket and paste it in yourself, because of course aws can't just leave things the way they are for longer than a few months
do i really need an ssl certificate? because its taking too long to be issued. plus i want the url to be custom
@@brunoaustin9756 If you don't have an SSL certificate, when people go to your website it will notify them that it's not secure. So it's nice to have it. It shouldn't take longer than 3 days to get issued.
Thanks Sam, this video was a great help. Love how you explain all of the steps
Awesome tutorial, very hands-on. Thanks a lot! No open questions
Helped out a ton, and learned a lot. Thanks my dude.
Thankyou so much for this video it really helps me to deploy my company project on AWS…thank you once again
Great tutorial, very helpful!
U have the best real world tutorials,thank you very much :)
Thank you 🤗
Really thanks to what you did! it really helps!
Very well explainer, Thank you!
@6:40 I had to change the "Default root object" to index.html instead of /index.html else you may get an "Access denied" error. Awesome explanation of course!
I still get the "Access denied" error after removing the "/". By the way, the previous domains work well the `/index.html`.
Thank you very much! I spent literraly the whole day figuring it out why I'm still getting 403 ...
Great great video, thanks a lot, subscribed!
Gracias, video helped me fixed two issues i was having. One with Route 53, couldn't find my CloudFront resource after i created my simple policy record, which was a by product of the second issue, i failed to assign CloudFront my SSL certificate within the distribution settings. After doing those two things everything else was smooth.
awesome video, thank you
so thanks of u bro it's very helpful
Excelente video
this was awesome!
🤗
Good work mate. I saw configure it through legacy OAI option is there any other way to implement cloudfront for you buckets ?
i got it working thank you. only thing i dont have working is that www doesnt direct to the cloudfront distribution
Yeah. I'm having the same problem too. Did you get this working, Corkpop?
at 11:49 the reaction for quote with se* noticable 😂😂
Not sure if this matters, should you use a lower S3 storage class (e.g. Standard-IA, One Zone-IA) for the build files? Assuming that (1) you're relying on free teir and (2) it's for a personal site, you might not update them that frequently ?
I guess it really depends on each use case. If you know how your data will be accessed and you have specific needs, then a different storage class would be good. So if your personal site was rarely accessed by anyone Standard-IA might be good. But i've never tested these out thoroughly so I can't make any good recommendations.
I tried this process but I am getting a 405 error. I built a full-stack app with mongoDb as the backend
For the problem of stressful update, is it not more efficient to use Amplify instead of S3 bucket? Then continuous deployment is possible using Github as connection to Amplify
does the domain name has to be from route53 or any domain name from any provider would be fine ?
also what would be the cost of all that excluded the s3
it doesn't work when I refresh the page any suggestions?
Any ideas how add www redirect? Thanks
what happens if the server is restarted, how can i do it? my website is not showing up after restarted
How do you invalidate browser cache?
I am getting served this error when i try to access my domain: This XML file does not appear to have any style information associated with it. The document tree is shown below.
AccessDenied
Access Denied
PH0W267ETFMT2Y4H
ckUFCC1qH8/wYNJR5HmrKV7bCkHLjkMto7ov7mVnhufdIdKFLMI1aETc0d09S9scmlVwRKsquC0=
same, have you found any fix?
@@krish420 yes, I had to change the permissions to the s3 bucket. For some reason if i only allowed cloudfront the access to my bucket, it gave this error. when I allowed open to all access to the s3 bucket, the error went away.
@@sitefleek I also have some env elements do you know how to implement them?
Dumb question, why two Route53 records?
All for me
Look at that nice community badge thing
Getting 403 access denied, anything im missing ???
go to cloudfront settings, add custom error messages, add error 403 , redirect it to /index.html with status code 200 ok. This should fix your issue.
Update the bucket policy provided by CloudFront after creating the distribution
@@thanosavg9273 even after this i still have the forbiden... any ideas ??
@@quentinepitech th-cam.com/video/-ZiirF7ap5U/w-d-xo.html
@@bwanamaina worst advice ever.
today , aws cloudfront has other options to create distribution... It's useless
thanks so much