React App on AWS S3 with Static Hosting + Cloudfront | Practical AWS Projects #1

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 425

  • @BeABetterDev
    @BeABetterDev  3 ปีที่แล้ว +10

    Check out the next Practical Project here: th-cam.com/video/NM4Vd7fpZWk/w-d-xo.html

    • @NZTechArc
      @NZTechArc ปีที่แล้ว +1

      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?

  • @arwamais
    @arwamais 3 ปีที่แล้ว +35

    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!

    • @ark333
      @ark333 2 ปีที่แล้ว +1

      Both things happened to me exactly as you say. Thanks so much. Author should pin this comment.

  • @mykolaskucinskas9473
    @mykolaskucinskas9473 2 ปีที่แล้ว +3

    Probably the best tutorial on TH-cam about hosting static websites on Amazon S3 and CloudFront.

  • @msdundars
    @msdundars 10 หลายเดือนก่อน +2

    After 2 years still the best and the most accurate content on the topic!

  • @bytesCraft
    @bytesCraft 2 ปีที่แล้ว +3

    SOA - Start of Authority. Thanks for all you do, bro.

  • @arnekaufmann2825
    @arnekaufmann2825 3 ปีที่แล้ว +25

    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

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว +2

      Thanks so much Arne and I'm glad I was able to help!

  • @divyareddy419
    @divyareddy419 ปีที่แล้ว +3

    Im restarting my career after a long break, thanks to your tutorials, these are helping me greatly, thanks you so much

  • @aranlufthansa45
    @aranlufthansa45 ปีที่แล้ว +12

    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

  • @michaellim1315
    @michaellim1315 3 ปีที่แล้ว +59

    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!

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว +1

      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

  • @andreirusulica
    @andreirusulica 7 หลายเดือนก่อน +2

    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.

  • @Street.Credit
    @Street.Credit 2 ปีที่แล้ว +2

    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!

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      Thank you and glad it helped you to set up your website!

  • @Greenthum6
    @Greenthum6 2 ปีที่แล้ว +1

    This was the third tutorial I watched about S3 static hosting and the best of all! Now my system is up and running

  • @rammstein272
    @rammstein272 3 ปีที่แล้ว

    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"

  • @lykiamusic
    @lykiamusic 2 ปีที่แล้ว +1

    one of the most useful tutorials I've ever watched

  • @peterharrington4777
    @peterharrington4777 10 หลายเดือนก่อน

    Amazing tutorial. I'm here 2 years later and everything works. Thank you

  • @AnonyMole
    @AnonyMole 3 ปีที่แล้ว +1

    Couldn't be more clear and useful. Got up and running in minutes with your help.

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      So glad this was helpful!

  • @sissys6284
    @sissys6284 3 ปีที่แล้ว +14

    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!

  • @nikhilsharma1742
    @nikhilsharma1742 3 ปีที่แล้ว +11

    Hello Sir, I am a Developer from India and I find your videos extremely awesome and your content is also great. Please also help us for other practical projects on AWS also. And Thankyou So much for delivering this content.

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว +3

      Hi Nikhil, thanks very much for your kind words. My next video is coming out on Monday and its a Docker Flask App + Aurora Serverless. It's my second in the 'Practical Projects'. Cheers.

  • @samclark4496
    @samclark4496 3 ปีที่แล้ว +9

    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!

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว +1

      Thanks for pointing this out Sam!

    • @samclark4496
      @samclark4496 2 ปีที่แล้ว

      @@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?

  • @hungdoan9148
    @hungdoan9148 9 หลายเดือนก่อน

    One of the best tutorials I've watched

  • @mithunda50
    @mithunda50 3 ปีที่แล้ว +1

    First time hitting the like button for an AWS video. Thanks

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks debnath! Glad you enjoyed.

  • @otifelix
    @otifelix ปีที่แล้ว +1

    Thank you so much this video saved me over $100 because i struggled with this for a long time

  • @mhollis1231
    @mhollis1231 3 ปีที่แล้ว +38

    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...

    • @genovo
      @genovo ปีที่แล้ว

      Yeah it's OK if you are in California or Ohio since you're using cloudfront

  • @godfreymai6257
    @godfreymai6257 5 วันที่ผ่านมา

    Good work needs recognition. Thanks mate!

  • @ngonimaphosa2176
    @ngonimaphosa2176 ปีที่แล้ว

    bro i love you. i followed this tutorial and it works perfectly , i was struggling alot before

  • @morgeegee277
    @morgeegee277 2 ปีที่แล้ว +1

    I followed every step and everything worked well. Thank you for this concise and very weel explained tutorial :)

  • @genefreak
    @genefreak 11 หลายเดือนก่อน

    Awesome video mate. Precise and to the point. All AWS videos should be like this!

  • @shavis4811
    @shavis4811 11 หลายเดือนก่อน

    Crisp clear tutorial. Very helpful and step by step instructions helped me to follow along, thanks much for great tutorial put together.

  • @WhiteWolfBlues
    @WhiteWolfBlues 7 หลายเดือนก่อน

    This is the best tutorial on the topic I found, thank you very much! It worked wonderfully for my portfolio

  • @SKR1912
    @SKR1912 ปีที่แล้ว

    PURE GOLD content...that too FREE!!!

  • @vivekgupta309
    @vivekgupta309 ปีที่แล้ว +1

    very good AWS video series !!! learning a lot from you !!! and very easy to understand English !!!

  • @vil3n80
    @vil3n80 ปีที่แล้ว

    thank you so much, you helped me convert my simple 1 bucket static site into two urls and give it a certificate.

  • @luiscortes6563
    @luiscortes6563 2 ปีที่แล้ว +1

    Thank you so much!! This is my first time deploying a react js app and was completely lost.

  • @pypelyncar
    @pypelyncar 3 หลายเดือนก่อน

    relevant, neat, efficient ! this video helped me out so much, I have to come here and say THANK YOU !! you are the man !

  • @nehabansal370
    @nehabansal370 6 หลายเดือนก่อน

    Was trying to build this end to end solution. This solution really helped. Thanks!!

  • @ayushijohari746
    @ayushijohari746 2 ปีที่แล้ว +2

    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!

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว +1

      Thanks so much fort he kind words Ayushi!

  • @justrelax3012
    @justrelax3012 2 ปีที่แล้ว +1

    This man is a hero

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      Not all heroes wear capes. :P

  • @matrixtoogood5601
    @matrixtoogood5601 3 ปีที่แล้ว +2

    Was looking forward to this ever since the last video!

  • @knightproduction215
    @knightproduction215 3 หลายเดือนก่อน

    It was a long long journey man.
    but it's done now.
    I had a major problem that the NS was not the same form godaddy to aws.
    Thanks a lot.

  • @jorool1988
    @jorool1988 ปีที่แล้ว +3

    Great video.
    BTW, you don't need two distributions for www and naked domain. You can add multiple domains to the same distribution. 😉

    • @vmerino04
      @vmerino04 6 หลายเดือนก่อน

      This is true. I don't think you need two buckets either

  • @midtownmadness4585
    @midtownmadness4585 ปีที่แล้ว +5

    I think there's no need to enable public access for the S3 buckets. Just add an access policy that allows the Cloudfront ARNs to do `getObject` on the respective buckets and you're all set. No need to expose the bucket publicly.

  • @gavinmack202
    @gavinmack202 3 ปีที่แล้ว +1

    Great video, Just one thing to note. You must create your Certificates in the North Virginia zone.

  • @HimanshuVerma-zn7cb
    @HimanshuVerma-zn7cb 2 ปีที่แล้ว +1

    Very precise, Informative and Eloquently explained. Excellent Stuff . Thanks a bunch

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      You're very welcome Himanshu!

  • @caiyu538
    @caiyu538 ปีที่แล้ว +1

    Great lectures. Great teacher.

  • @DjDevastor
    @DjDevastor ปีที่แล้ว

    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 /**/*

  • @Malcolm777-i
    @Malcolm777-i 2 ปีที่แล้ว

    So smooth. A spectacular way of teaching.

  • @SuryaExperiance220
    @SuryaExperiance220 3 ปีที่แล้ว

    Beo explained well, and cleared all my doubts to deploy React js in Clod front

  • @password301992
    @password301992 2 ปีที่แล้ว +1

    Very nice job, no one can explain better than this, loved it

  • @furqonmauladani1544
    @furqonmauladani1544 2 ปีที่แล้ว

    Thank you for your help with this video. I hope you always have a nice days.

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      Glad I can help and same to you!

  • @AzeeDK
    @AzeeDK ปีที่แล้ว

    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.

  • @shyammohabir8283
    @shyammohabir8283 3 ปีที่แล้ว +1

    Dude this is an excellent tutorial - Well done!

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks Shyam! Glad you enjoyed :)

  • @sheynjila2457
    @sheynjila2457 2 ปีที่แล้ว +1

    Best video and best content ever. Thank you so much.

  • @aritra1414
    @aritra1414 2 ปีที่แล้ว +1

    Awesome! This one was actually one of my interview questions! And I found such a nice solution to that! Great work man!

  • @fazalmehmood6802
    @fazalmehmood6802 2 ปีที่แล้ว +1

    Loved this tutorial. Straight to the point and great explanation.

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      You're very welcome Fazal!

  • @thereds32
    @thereds32 2 ปีที่แล้ว

    Just here to say THANK YOU VERY MUCH 😄

  • @amitvlog-viralnews
    @amitvlog-viralnews 3 ปีที่แล้ว +1

    superb bro great teacher of aws

  • @aayushgore4245
    @aayushgore4245 2 ปีที่แล้ว

    this guy has a video for everything! :0

  • @jaggar28
    @jaggar28 2 ปีที่แล้ว +1

    Love you brother for such a detailed tutorial :) Keep making them please.

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว +1

      Thank you so much Moinul!

  • @gtstride
    @gtstride 3 ปีที่แล้ว

    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.

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks so much Godstime, glad you enjoyed!

  • @jamanj2186
    @jamanj2186 3 ปีที่แล้ว +1

    Ur a life saver. Perfect video. Please make some more project videos which are helpful in getting a job. Thanks heaps.. cheers

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว +1

      Coming soon Jaman!

    • @jamanj2186
      @jamanj2186 3 ปีที่แล้ว

      @@BeABetterDev bro just wondering, does Issuing Certificate in cloud-front costs anything? Thanks

  • @ryanwendel6115
    @ryanwendel6115 3 ปีที่แล้ว +4

    What are the cost implications of creating two distributions? Is there no way to force a redirect from within CloudFront?
    Great video, btw.

  • @CoderDad
    @CoderDad 3 หลายเดือนก่อน

    Gotcha! - As of August 2024 - The certificate has to be created in Virginia East 1 to be picked up in the Distribution. If you create it in another zone it won't appear in the dropdown.
    Thank you, got my first aws page up and running.

  • @alexgochenour8740
    @alexgochenour8740 ปีที่แล้ว

    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.

  • @johankarlsson9720
    @johankarlsson9720 2 ปีที่แล้ว +2

    Great tutorial! Thanks!

  • @VaurionX
    @VaurionX 4 หลายเดือนก่อน

    Very helpful video, thank you very much for showing how to do all of this.

  • @antonioguiotto3487
    @antonioguiotto3487 3 ปีที่แล้ว +2

    Hi, very practical and clear tutorial, like all the others that you make.
    Thanks for sharing.
    I 'd like perhaps someone can just clarify what is the purpose of the www in the domain, and the double buckets, distributions and domain records.. I mean I kinda understand the reason but not really.
    Keep it up!

    • @sorover111
      @sorover111 ปีที่แล้ว

      Im trying to figure this out too.. I think it is something that is specific to having Route53 be your DNS .. But yeah it would make sense at least to me to just have 1 bucket, and CNAME the www. subdomain to the root domain.. idk

  • @gdyung2
    @gdyung2 ปีที่แล้ว

    Best tutorial ever! Thank you so much for your video :)

  • @GeoffreyEngelbrecht
    @GeoffreyEngelbrecht 3 ปีที่แล้ว +9

    Great tutorial! Transferred my website yesterday following your instructions and everything worked smoothly. One comment/question: Rather than setting up a second S3 bucket (and subsequent Cloudfront distribution for my website without the www and redirecting it to the other I just left the A record in Route 53 for my URL without www which points to the www entry. This is how my website was setup previously when I was hosting it elsewhere and I found this also works with this setup (ie if you enter my URL without www in the web browser DNS redirects this to my URL with www). I wonder if the costs are less doing it this way than having two S3 buckets and Cloudfront distributions? At the very least it halved the process of setting up the website.

    • @ordaniel7699
      @ordaniel7699 2 ปีที่แล้ว

      I totally agree. I hope he answers.

    • @furqonmauladani1544
      @furqonmauladani1544 2 ปีที่แล้ว

      I believe that it would lessen the cost. Because you don't use second S3 bucket and second Cloudfront, you don't paid for GET request to CloudFront and S3. You only paid first S3 bucket, first Cloudfront, and Route 53 request cost.
      But this is a simple and great tutorial that I found. I learn more with this video.

    • @karlang2637
      @karlang2637 2 ปีที่แล้ว

      When you say "I just left the A record in Route 53 for my URL without www which points to the www entry", is this done at 17:37 mark where instead of choosing "Alias to S3" for "Value/Route traffic to" field, you picked "Alias to another record hosted in this zone"? Basically, when creating A record for example.com, instead of pointing to S3, you point to www.example.com, which already points to S3. Is my understanding correct?

    • @GeoffreyEngelbrecht
      @GeoffreyEngelbrecht 2 ปีที่แล้ว

      @@karlang2637 Yes that’s right

  • @giriphd
    @giriphd 3 ปีที่แล้ว +1

    Dude, very well explained. Super

  • @_HariHaranR
    @_HariHaranR ปีที่แล้ว

    Thanks boss, that was helpful! Now I got my own MEAN Stack App hosted with my own domain Name 😊

  • @mudassiraqeel8604
    @mudassiraqeel8604 ปีที่แล้ว +1

    why do you need to create a separate s3 bucket when you are routing both www and plain domain to the same bucket anyway ? what are the disadvantages of creating CNAME record in route53 to route subdomains to main domain

  • @sandeepverma7712
    @sandeepverma7712 2 ปีที่แล้ว

    Great content. Thank you for this practical tutorial. This will be immensely helpful to lot of geeks

  • @18Horses
    @18Horses 2 ปีที่แล้ว +1

    One of the best tutorials I found on youtube! You explain everything very well and it helps that you have the same voice as MoistCr1tical hehe :D

    • @BeABetterDev
      @BeABetterDev  2 ปีที่แล้ว

      Thank you so much for the kind words

  • @Tsxtasy1
    @Tsxtasy1 8 หลายเดือนก่อน

    Chapters would be awesome here. I already have S3 + Route 53, all I need is the CloudFront part

  • @sumitdange2507
    @sumitdange2507 ปีที่แล้ว +1

    loved it! very simplified it is! ❤🙌

  • @SyedRiyadhulKarim
    @SyedRiyadhulKarim 10 หลายเดือนก่อน

    Great effort, it valued back to me on time and learning..

  • @parasharbhatt7099
    @parasharbhatt7099 3 ปีที่แล้ว +1

    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)

  • @pattonparham1169
    @pattonparham1169 3 ปีที่แล้ว

    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!

  • @a5tr00
    @a5tr00 2 ปีที่แล้ว +1

    Very informative video!
    Instead of manually uploading website content, can we do it via github?

  • @DuyTran-ss4lu
    @DuyTran-ss4lu 3 ปีที่แล้ว +1

    You're the best. Thanks for the video

  • @ShahzadRasul-uo7gu
    @ShahzadRasul-uo7gu ปีที่แล้ว

    Amazing video! Really enjoyed this one!

  • @jltplease
    @jltplease 3 ปีที่แล้ว

    Man, I can't wait to follow along on this project with my MAC
    3 Minutes Later...

  • @stephenfoster8543
    @stephenfoster8543 ปีที่แล้ว +1

    Dude, excellent video. Thank you so much.

  • @piegpa
    @piegpa 3 ปีที่แล้ว +2

    This is really good and useful, cheers!

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks Pawel! Glad it was helpful.

  • @edwinogbu-v7r
    @edwinogbu-v7r ปีที่แล้ว

    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,

  • @elleryfamilia8291
    @elleryfamilia8291 3 ปีที่แล้ว +1

    Excellent tutorial. Thank you!

  • @nirajshakya7075
    @nirajshakya7075 3 ปีที่แล้ว +1

    Very detailed video. awesome tutorial video.

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      You're very welcome niraj!

  • @OrionRox
    @OrionRox ปีที่แล้ว

    Thank you! This is golden!
    I've never done any deployment before, I made a simple website and hosted it on Amplify, really easy to use but somehow it would not load the mp3 file, after 2 days of trying I gave up and switched to Firebase, which also easy to use but I couldn't get my custom domain name to work. Finally back to AWS S3 + Cloudfront, followed your steps and my website went online just now!
    I only created one bucket and just added both www and none-www version of my domain to the cloud front, and required SSLs for both domains, this also works. I guess perhaps AWS made some changes in the last 2 years?
    Also, could you please do another video about CI/CD for S3 + Cloudfront and setting up the stage distribution for developing testing?

  • @hongz1787
    @hongz1787 2 ปีที่แล้ว

    Awesome content! Everything is clear and just works!!!

  • @101appsCoZa
    @101appsCoZa 3 ปีที่แล้ว +1

    fantastic tutorial. thanks. just thought i'd mention that the certificate must be created in US-east-1 (n.virginia)

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks so much for the kind words!

  • @deanhaycox
    @deanhaycox 3 ปีที่แล้ว +2

    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

    • @BeABetterDev
      @BeABetterDev  3 ปีที่แล้ว

      Thanks Dean! I'm quite excited to put that together myself. I should have it out in the coming months. Cheers

  • @TheEchinox
    @TheEchinox ปีที่แล้ว

    Simply beautiful!!!

  • @andrez76
    @andrez76 3 ปีที่แล้ว

    My dude, this is great content! Thank you.

  • @NZTechArc
    @NZTechArc ปีที่แล้ว

    Great Videos. One of the problem I am having is selecting the correct regions at each step and your camera hides yours so it is hard to know what is the right thing to do. Just a thought.

  • @bobdpa
    @bobdpa 3 ปีที่แล้ว

    Excellent video! I'm surprised it's necessary to create the redirect bucket. I would've never figured that out on my own. Thanks!

  • @marcovelazquez5689
    @marcovelazquez5689 2 ปีที่แล้ว +1

    Excellent content/tutorial

  • @jszclaptone4042
    @jszclaptone4042 2 ปีที่แล้ว

    You're amazing men! so simple

  • @thisisstupid956
    @thisisstupid956 3 ปีที่แล้ว +1

    This video saved my day!

  • @krishnaraj2263
    @krishnaraj2263 2 ปีที่แล้ว

    Thank you, buddy, you video was super helpful to me to fix an issue related to this. Much much appreciated.

  • @kpsk1627
    @kpsk1627 3 ปีที่แล้ว

    Excellent stuff!
    If you could post more of these practical videos, that will be wonderful. Thank you.