React App on AWS S3 with Static Hosting + Cloudfront | Practical AWS Projects #1
ฝัง
- เผยแพร่เมื่อ 7 มี.ค. 2021
- Learning by doing is the best way to make things stick. In this video, I walk you through how to deploy a Hello World React app to AWS using S3, CloudFront, ACM, Route53, and more! Using this approach, you can build a simple react based application that can scale to hundreds of thousands of users. This is a walkthrough video with thorough explanations of each step.
Looking to get hands on experience building on AWS with a REAL project? Check out my course - The AWS Learning Accelerator! courses.beabetterdev.com/cour...
How to set up a domain on AWS - • How to register and se...
S3 bucket policy - gist.github.com/beabetterdevv...
📚 MY RECOMMENDED READING LIST FOR SOFTWARE DEVELOPERS📚
Clean Code - amzn.to/37T7xdP
Clean Architecture - amzn.to/3sCEGCe
Head First Design Patterns - amzn.to/37WXAMy
Domain Driver Design - amzn.to/3aWSW2W
Code Complete - amzn.to/3ksQDrB
The Pragmatic Programmer - amzn.to/3uH4kaQ
Algorithms - amzn.to/3syvyP5
Working Effectively with Legacy Code - amzn.to/3kvMza7
Refactoring - amzn.to/3r6FQ8U
🎙 MY RECORDING EQUIPMENT 🎙
Shure SM58 Microphone - amzn.to/3r5Hrf9
Behringer UM2 Audio Interface - amzn.to/2MuEllM
XLR Cable - amzn.to/3uGyZFx
Acoustic Sound Absorbing Foam Panels - amzn.to/3ktIrY6
Desk Microphone Mount - amzn.to/3qXMVIO
Logitech C920s Webcam - amzn.to/303zGu9
Fujilm XS10 Camera - amzn.to/3uGa30E
Fujifilm XF 35mm F2 Lens - amzn.to/3rentPe
Neewer 2 Piece Studio Lights - amzn.to/3uyoa8p
💻 MY DESKTOP EQUIPMENT 💻
Dell 34 inch Ultrawide Monitor - amzn.to/2NJwph6
Autonomous ErgoChair 2 - bit.ly/2YzomEm
Autonomous SmartDesk 2 Standing Desk - bit.ly/2YzomEm
MX Master 3 Productivity Mouse - amzn.to/3aYwKVZ
Das Keyboard Prime 13 MX Brown Mechanical- amzn.to/3uH6VBF
Veikk A15 Drawing Tablet - amzn.to/3uBRWsN
🌎 Find me here:
Twitter - / beabetterdevv
Instagram - / beabetterdevv
Patreon - Donations help fund additional content - / beabetterdev
#AWS
#S3
![ตรงที่เดิม - ฝน พรสุดา [ต้นฉบับ :เบส ขวางหวัน]](http://i.ytimg.com/vi/c5YnbGEztI8/mqdefault.jpg)
Check out the next Practical Project here: th-cam.com/video/NM4Vd7fpZWk/w-d-xo.html
You have the best Tutorial, but I do not understand why you would have 2 A records and 2 distributions, into 2 different buckets, why not just 1 A record and 1 www CNAME record in route 53 to the 1 distribution and from the distribution to the bucket??? Could you please comment on this?
Awesome video mate. Precise and to the point. All AWS videos should be like this!
Awesome! This one was actually one of my interview questions! And I found such a nice solution to that! Great work man!
So smooth. A spectacular way of teaching.
Crisp clear tutorial. Very helpful and step by step instructions helped me to follow along, thanks much for great tutorial put together.
one of the most useful tutorials I've ever watched
Thank you so much, I was feeling lost, glad that this video came at the right time. Very well explained, now i can continue my project work again.
Trying hard to break into a new tech career out of college and tutorials like this help tremendously. It’s tutorials like this created by people like you that make me truly feel like I am standing on the shoulders of giants like you. Thx
One of the best tutorials I've watched
Thanks, man. Going through a demanding course and I am a pretty new to the field. I was stressing. I feel way better now.
Thank you so much, I just used your tutorial to submit a project half an hour ago!
Two things to take into consideration:
1- To invalidate a distribution use /* only, I used /* /** and it took me hours getting stuck with a dummy index.html till I tried /*
2- Amazon CloudFront distributions requests the AWS certificate to be in the US East (N. Virginia) Region to create a distribution, otherwise you can see no certificate!
Since these two issues took a long time to fix, I thought I would share them to help!
Both things happened to me exactly as you say. Thanks so much. Author should pin this comment.
Amazing tutorial. I'm here 2 years later and everything works. Thank you
This is the best tutorial on the topic I found, thank you very much! It worked wonderfully for my portfolio
I followed every step and everything worked well. Thank you for this concise and very weel explained tutorial :)
After 2 years still the best and the most accurate content on the topic!
bro i love you. i followed this tutorial and it works perfectly , i was struggling alot before
Attention: You MUST make the certificates in Us-East-1, it is the only region Cloudfront can pull from. I made mine in Us-East-2 and it was telling me to use my EC2 (?) instance and gather a PEM file and private key... which I didn't even have.... went ahead and just made them in Us-East-1 saved me the hassle...
Yeah it's OK if you are in California or Ohio since you're using cloudfront
This was a super helpful video! My front end is definitely up and running because of it. One thing I am still struggling with, however, is getting my frontend (which this video helped me deploy successfully) connected with my elastic beanstalk server deployed separately. I can't seem to find much out there on how to get them to communicate. But I see alot of people mention that this is possible with an s3 + cloudfront + route53 react frontend and eb deployed node/express server. Thank you!
Great content. Thank you for this practical tutorial. This will be immensely helpful to lot of geeks
Probably the best tutorial on TH-cam about hosting static websites on Amazon S3 and CloudFront.
Beo explained well, and cleared all my doubts to deploy React js in Clod front
Awesome content! Everything is clear and just works!!!
Amazing tutorial bro! Thank you.
Best tutorial ever! Thank you so much for your video :)
This is extremely awesome great content, lifesaver. Thanks for this.
I actually had searched and searched for ways to host my react app on AWS for a long time now. Thanks really for this.
Thanks so much Godstime, glad you enjoyed!
Loved this tutorial. Straight to the point and great explanation.
You're very welcome Fazal!
Couldn't be more clear and useful. Got up and running in minutes with your help.
So glad this was helpful!
I am so grateful for this tutorial! You explained everything so perfectly, at the same time keeping it super simple for beginners to understand. Job done well!
Thanks so much fort he kind words Ayushi!
Great effort, it valued back to me on time and learning..
Was looking forward to this ever since the last video!
Hope you enjoyed!
My dude, this is great content! Thank you.
very good AWS video series !!! learning a lot from you !!! and very easy to understand English !!!
Thanks vivek!
PURE GOLD content...that too FREE!!!
This is the only video on TH-cam you need see to answer to the question "How to properly deploy a static web site on AWS"
Very precise, Informative and Eloquently explained. Excellent Stuff . Thanks a bunch
You're very welcome Himanshu!
Simply beautiful!!!
nice work mate, appreciate the content! just a single note to add to it: I think it may be cleaner to have 2 A routes, one for www and one for the non www that point to the same cloudfront distribution. There is no need for 2 buckets and 2 cloudfront distributions.
Damn, you single handedly contributed so much to my hosting that was actually able to pull up my website for a big project 30 min before the deadline, glad i found this vid, keep producing more content like this
Thanks so much Arne and I'm glad I was able to help!
Dude, excellent video. Thank you so much.
You're welcome!
Amazing video! Really enjoyed this one!
Great lectures. Great teacher.
Thank you for your help with this video. I hope you always have a nice days.
Glad I can help and same to you!
Thanks for the amazing tutorial
Dude, this is a spectacular tutorial. Everything was explained so well and concisely. I'm not ever one to post a comment but I thought I needed to let you know what a great job you did. Got my site up and running thanks to you!
Thanks for such a kind comment Michael. I really appreciate the support and glad the video was able to help you to set up your project!
Cheers,
Daniel
THANK YOU BRO IT WAS A BIG HELP
thank you so much, you helped me convert my simple 1 bucket static site into two urls and give it a certificate.
Excellent stuff!
If you could post more of these practical videos, that will be wonderful. Thank you.
More coming soon!
Great video. Thanks for making it
You're amazing men! so simple
SOA - Start of Authority. Thanks for all you do, bro.
Thank you
loved it! very simplified it is! ❤🙌
Glad it was helpful!
First time hitting the like button for an AWS video. Thanks
Thanks debnath! Glad you enjoyed.
Very nice job, no one can explain better than this, loved it
Thanks Sagar!
Dude this is an excellent tutorial - Well done!
Thanks Shyam! Glad you enjoyed :)
Love you brother for such a detailed tutorial :) Keep making them please.
Thank you so much Moinul!
This was the third tutorial I watched about S3 static hosting and the best of all! Now my system is up and running
Glad to hear!
Im restarting my career after a long break, thanks to your tutorials, these are helping me greatly, thanks you so much
Happy to help!
Thanks boss, that was helpful! Now I got my own MEAN Stack App hosted with my own domain Name 😊
Excellent tutorial. Thank you!
You're very welcome!
This is exactly what I was looking for. I need more projects so I can learn the console. Certification won't get me a j.o.b. without experience. Thank you so much. This is brilliant!
You're very welcome!
great video, well explained, I enjoyed it
Thank you, buddy, you video was super helpful to me to fix an issue related to this. Much much appreciated.
You're very welcome!
excellent tutorial !!!. Thank you !!!
Glad you liked it!
Wonderful video, thank you very much. It might be good to also do one on undoing the CloudFront aspect; I got sick of the long propagation times whenever I needed a hotfix for my site and eventually just nixed CloudFront entirely.
Just here to say THANK YOU VERY MUCH 😄
Awesome ! Great video!
superb bro great teacher of aws
excellent great man , thank you it was very clear explanation step by step..!
You're welcome!
Thank you for this video. Worked for me !
You're very welcome Rohini!
Str8 up best guide to getting everything working properly! We we able to get a new Street Credit website up and running after technical difficulties watching other tutorials. Appreciate you my guy!
Thank you and glad it helped you to set up your website!
Best video and best content ever. Thank you so much.
You're very welcome!
Awesome as always!
Love the channel, just watched the videos on the upcoming projects so looking forward to the stock market project, want to switch out the stock market call to something else
Thanks Dean! I'm quite excited to put that together myself. I should have it out in the coming months. Cheers
Dude, very well explained. Super
Thank you Girish!
Thank you so much this video saved me over $100 because i struggled with this for a long time
Glad this helped!
Fantastic Video, thanks!
thank you so much!
great content
Glad you enjoyed!
Great video.
BTW, you don't need two distributions for www and naked domain. You can add multiple domains to the same distribution. 😉
Thanks for the cloud front invalidation part. I rebuild my site dozensof times yesterday, deleted and created a few new distributions, reassigneing the DNS, even was thinking my static website code had issues....
Now everythink works and next time I have to wait longer or purge the cache through invalidations... I hope i dont forget /**/*
This is really good and useful, cheers!
Thanks Pawel! Glad it was helpful.
Great content! Thanks!!!
Excellent content/tutorial
Thanks so much Marco
You're the best. Thanks for the video
Thanks Duy!
Thank you so much!! This is my first time deploying a react js app and was completely lost.
You're very welcome!
Thank you. You are amazing!
You're very welcome!
Very detailed video. awesome tutorial video.
You're very welcome niraj!
this guy has a video for everything! :0
amazing, thank you for this!
You're very welcome Mike!
awesome tutorial. very nicely explained.
Thank you!
Amazing work!
Thank you! Cheers!
Ur a life saver. Perfect video. Please make some more project videos which are helpful in getting a job. Thanks heaps.. cheers
Coming soon Jaman!
@@BeABetterDev bro just wondering, does Issuing Certificate in cloud-front costs anything? Thanks
Great tutorial! Thanks!
Glad it was helpful!
Very good tutorial easy to follow and explains process nicely! One thing to note is if your bucket is in a different region as the video, you still have to make sure your certificate is in the region of east Virginia or else the certificate won’t pop up on cloud front. Other than that great tutorial thanks!
Thanks for pointing this out Sam!
@@BeABetterDev Hey just out of curiosity, what if I no longer want to deploy my website? Would I delete the hosted zone on Route 53, or is there an easier way to temporary disable hosting?
Thank you for your fantastic TH-cam tutorials! Your teaching style has been incredibly helpful in my learning journey. Grateful for your expertise!
I also have a question: How to connect React.js build in S3 bucket to my Java Spring Boot application? How to make them communicate?
Best regards,
Great video, Just one thing to note. You must create your Certificates in the North Virginia zone.
Great tutorial!
Thanks Andrew!
top tier tutorial. so helpful.
You're very welcome!
Very helpful video
Very useful - Thanks !
You're welcome!
Thank You. One of the best tutorial - Very well explained. Please will you let me know about the cost factors of Route 53 besides yearly fee for DOMAIN NAME registration? ( In case of multiple websites)