AWS Tutorial - Website hosting with S3, Route 53 & Cloudfront using Namecheap domain

  Рет қаралды 11,329

Christopher Phillips

Christopher Phillips

Күн бұрын

NAMECHEAP UPDATE!!!
Namecheap no longer allows you to add host records if you're using a custom DNS. The workaround is pretty easy though. Don’t follow the video guide between ~2:49 - 4:15 which is the part where we add the host record to namecheap. Once you reach the end of the video, follow these steps:
1) Go to AWS Certificate Manager (ACM) within your AWS console
2) Click on the certificate in question
3) The next screen should have some Cards such as Certificate Status, Domains, Details, etc. Within the Domains card you'll see a button for "Create records in Route 53". Click that.
4) The next screen will ask you which domain you’d like to apply the records to. Choose which one you want and click “Create records”.
That’s it!
~~~~~~~
This is the ultimate and fully comprehensive 2022 guide to setting up your own static website with a domain purchased through Namecheap and hosting set up through Amazon Web Services using S3, Route 53 and Cloudfront.
I'll take you through every step which includes:
1) Authenticating your Namecheap domain with Amazon through Amazon's certificate manager.
2) Creating your Amazon Route 53 nameserver records and inserting them into your Namecheap domain account.
3) Creating your Amazon S3 buckets and setting them up for static website hosting and redirects.
4) Creating your Amazon Cloudfront distrubution which includes a crucial piece of information that many guides neglect to mention.
5) And redirecting your domain traffic to your Cloudfront distribution.

Пікірлер: 117
@user-ux2kt5vs4j
@user-ux2kt5vs4j 9 ай бұрын
Bro just casually slipped a 19 min Power Tutorial that sums up everything there majorly is about Hosting sites on AWS. big thanks
@drettlinking
@drettlinking Ай бұрын
It took me longer to deploy a website than it did for me to build it. It would have taken even longer if it weren't for your video. Thank you so much, I hope your pillow is cold on both sides, always ❤
@aeronesto
@aeronesto 8 ай бұрын
I was able to follow along without issues almost two years later! It's 12-01-23 Wow, this would've been a headache without this video! Thank you!
@TruthNLiez
@TruthNLiez Жыл бұрын
I can't even tell you how much you helped me out with this video!! Your work is greatly appreciated, man. Thank you!! 🙏🏾🙏🏾
@caringbilal
@caringbilal Жыл бұрын
WOW!! You really saved me days of searching this solution that you have shared in the origins tab, even namecheap support team couldn't help get it sorted :) Hats off to you!
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Really happy I helped sort it out for you 💪
@user-kd1gq7yw3d
@user-kd1gq7yw3d Жыл бұрын
Hey, huge thanks for this! Watching some other videos was a total nightmare. Your tutorial actually makes sense. After watching it, I noticed some changes and features on AWS pages, and even though there were still some issues, I managed to figure them out with a bit of extra research and troubleshooting. It's unbelievable how many tutorials are outdated in Aug 2023, but yours is up-to-date, and it's pure gold. Changes only OAI settings in CloudFront. Stay awesome!
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Thanks! Glad it was somewhat current. And good on you for doing a bit of research too 💪
@SGUsyncgamingusa
@SGUsyncgamingusa 6 ай бұрын
Still applicable in 2024! You're a life saver, it helped me learn some Basic AWS 🙏
@redplanet76
@redplanet76 Жыл бұрын
Thank you for this. Extremely helpful. I think you have to manually input your own permission policy now but the video was so helpful. Saved me HOURS and HOURS.
@tsuyae1768
@tsuyae1768 2 жыл бұрын
thanks so much! you were completely right about other tutorials being hung up at that part. you saved me weeks.
@Tech_3alsree3
@Tech_3alsree3 7 ай бұрын
never enjoyed a tutorial that much xD your comments are awesome :"D
@kazami6317
@kazami6317 Жыл бұрын
Thank you so much! An updated, straight to the point video saved me. Was stuck for an hour of watching and restarting with all the other crummy vids haha
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I'm glad I saved you some time!
@derekchua6188
@derekchua6188 Жыл бұрын
I was stuck on this for over a week! Thank you so much for this video!
@khoffyah
@khoffyah 9 ай бұрын
1 year after, this's still working perfectly. I struggled the day before finding this video trying to set up every thing with AWS and a domain name from Namecheap. Thanks
@ChristopherPhillipsDev
@ChristopherPhillipsDev 9 ай бұрын
Great to hear it’s still working 👍
@adegbamiyestephen2521
@adegbamiyestephen2521 Жыл бұрын
This is probably the best video for this topic, exactly what i needed ❤❤❤❤❤
@fuckbagmartin1384
@fuckbagmartin1384 Жыл бұрын
Dude, thank you so much for this. Watching some of these other videos has been pure hell on earth. Thank you for making a video that actually makes sense. There's been some slight variations and features added in the AWS pages since this video, but I was able to still figure it out with some minor extra troubleshooting/research. Cant believe how many I watched that just totally disregarded connecting via https among other things. This video is gold. Cheers!
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Thanks so much for this amazing comment 💪. Glad I was able to shine some light on it
@kumailn7662
@kumailn7662 11 ай бұрын
True
@kumailn7662
@kumailn7662 11 ай бұрын
@@ChristopherPhillipsDev do we have to have the bucket name same as of domain?
@srijeetbiswas
@srijeetbiswas 9 ай бұрын
Thanks Christopher, saved my day ! was very easy to follow and helped to get going ! Cheers !
@meow-jd6qb
@meow-jd6qb 2 ай бұрын
super grateful for your help brotha❤
@selvakumarforyou
@selvakumarforyou Жыл бұрын
wove, you are amazing brother. i have been stuck here for almost a month. thanks alot.
@quentinm3124
@quentinm3124 Жыл бұрын
I never comment on videos usually. But thank you so much for this, that's the only valid tutorial i've seen, and i've seen a lot !
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
It's comments like these that keep us creators going! Thank you so much. I'm glad it helped you!
@TDIVDev
@TDIVDev Жыл бұрын
You solve all my dudes. Really thank you bro. Nice explication and step to step. 👏
@labrat-0171
@labrat-0171 Жыл бұрын
I was lost before watching this vid, thanks a bunch mate. Algorithm!!! do your thang
@DrKaoliN
@DrKaoliN Ай бұрын
Thank you, this saved me a lot of time.
@kumailn7662
@kumailn7662 11 ай бұрын
one of the awesome crystal clear, and complete video... @cristopher you rock!!
@khaledmousa380
@khaledmousa380 Жыл бұрын
Excellent Video, Thank you Christopher!!
@johnuloks2693
@johnuloks2693 2 жыл бұрын
Indeed the video is the best you can find. Thank you very much
@ChristopherPhillipsDev
@ChristopherPhillipsDev 2 жыл бұрын
You're very welcome. I'm glad it helped
@jonmultimedia
@jonmultimedia Жыл бұрын
Awesome, exactly what I needed :D Thank you.
@rakeshchauhan-op8qw
@rakeshchauhan-op8qw Жыл бұрын
This is quality. I liked your jokes and it was very accurate
@codersraj8223
@codersraj8223 Жыл бұрын
Thanks friend, I successfully launch my first AWS based website. thousands of thanks
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
That's excellent! Congrats :)
@catapultopus7362
@catapultopus7362 2 жыл бұрын
After so many tries. i finally hosted my 1st website. Thanks Christopher. If you ever happen to come to Mumbai, India. I'll host you for free. All meals and bed to sleep in.. :-).. Cheers to you
@ChristopherPhillipsDev
@ChristopherPhillipsDev 2 жыл бұрын
This makes me really happy to hear! I'm glad I was able to help you. Congrats on your site launch!
@victorhugo3477
@victorhugo3477 Жыл бұрын
thank you so much amazing tutorial !! already like and i subscribe.
@MohiuddinAbdulKader
@MohiuddinAbdulKader Жыл бұрын
Very informative tutorial.
@colossuselka-zc7hb
@colossuselka-zc7hb 10 ай бұрын
great great video! thank you!
@ezekielmauricio5209
@ezekielmauricio5209 2 жыл бұрын
This is absoolute gold! 🚀
@joeblue9129
@joeblue9129 2 жыл бұрын
Welcome back sensei 😁
@ChristopherPhillipsDev
@ChristopherPhillipsDev 2 жыл бұрын
haha thanks Joe. Maybe not in the context you were hoping but this was more of a reminder guide for me in the future. And if I can help others avoid a headache, I should make my notes public :)
@ZoQed
@ZoQed 2 жыл бұрын
@@ChristopherPhillipsDev Very interesting and thank you for sharing your notes with us !!!! It doesn't matter if it's about c programming , keep going Christopher and see you later in another video ;) !
@dipeshparma8605
@dipeshparma8605 5 ай бұрын
Really helpful
@guillaume5623
@guillaume5623 Жыл бұрын
Priceless vidéo ! Thank you 👍
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
You're very welcome!
@betelhemgebresilasse7419
@betelhemgebresilasse7419 Жыл бұрын
Thank You !!!
@g14wx17
@g14wx17 Жыл бұрын
You save me a lot of time!!!, thanks a loooott!!!!!
@brsseb
@brsseb Жыл бұрын
Thank you so much!!!!
@mansoorkhanyousefi7709
@mansoorkhanyousefi7709 2 жыл бұрын
oh man thank you very very very much you save my Time
@dineshindn4404
@dineshindn4404 10 ай бұрын
Excellent
@user-ov3rw3dn7u
@user-ov3rw3dn7u 8 ай бұрын
Hi , can you please explain same thing ,if we have to only implement cloudfront in pre-working website DNS on Godaddy already managed hosted in AWS using . Allready using L.B before connecting to EC2 instance for our application.
@reiearthvlogs4906
@reiearthvlogs4906 2 жыл бұрын
Thank You for this Tutorials..
@ChristopherPhillipsDev
@ChristopherPhillipsDev 2 жыл бұрын
You're very welcome!
@hdrism3841
@hdrism3841 Жыл бұрын
amazing thank you , save my live
@MrJhonSerna
@MrJhonSerna Жыл бұрын
You helped me a lot, thanks man... Have a question, if i want to do some change just save the files in the bucket and its all?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
If you're just talking about the website content you want to serve, yep!
@abelkibebe577
@abelkibebe577 Жыл бұрын
I LOVEEEE UUUUU
@luisvirrueta7702
@luisvirrueta7702 2 жыл бұрын
Thank u so much
@GiovanniGReid
@GiovanniGReid Жыл бұрын
your very funny, I like your content
@clarf
@clarf Жыл бұрын
Great stuff. I had previously set up AWS hosting for a few static sites but more recently when attempting to do it again I got stuck so this helps a LOT! One thing I noticed is that there is no reference to 'Bucket Policy' - is that redundant? I guess I'll find out soon enough as I'll be using your method shortly with a new domain 🙂
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Be sure to check out the description. I've added some info there that pertains to namecheap
@MitsubishiHondaAcord
@MitsubishiHondaAcord Жыл бұрын
just wondering in what situation you would use s3 storage to host instead of amplify?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I don't have experience with amplify so I couldn't offer and feedback
@fishtang1
@fishtang1 Ай бұрын
hi @christopher Phillips I can't create origin. I copied from s3 end point. the error says "The parameter origin ID must be unique." Would you happen to know why I have this error? thanks.
@ChristopherPhillipsDev
@ChristopherPhillipsDev 27 күн бұрын
I haven't looked at this in awhile (meaning aws material). I don't recall what the origin ID pertains to but the error message suggests it's not a unique identifier (meaning you already have something named exactly as you're trying to create).
@JackHooker
@JackHooker Жыл бұрын
Great tutorial! Thank you for sharing. I was wondering if you also know how to set up a custom email address with a service like Zoho using this AWS setup.
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Hi Jack! Glad you liked it. As for your question, I'm sorry, I do not.
@JackHooker
@JackHooker Жыл бұрын
@@ChristopherPhillipsDev No worries. I think I may have figured it out in theory. I’ll follow up with the answer if I manage to set it up in practice : )
@JackHooker
@JackHooker Жыл бұрын
Hi, I figured it out in practice. I was originally attempting to use Namecheap as the registrar, Zoho for the email, and AWS S3 for the hosting with a CloudFront distribution. I failed to figure out how to set this up. However, once I transferred my domain name over to AWS, Route 53, and set up hosting in an S3 bucket with a Cloudfront distribution over HTTPS, I was able to easily set up email for my domain name using AWS Workmail. The tutorials I followed are here: kzfaq.info/get/bejne/o9Kja9eazq-XpZc.html kzfaq.info/get/bejne/nZmed7RhktDcg4k.html
@worldofnissanka9222
@worldofnissanka9222 10 ай бұрын
I didn't find any KZfaq video for my issue. if you understand my issue please make an video...I have a dynamic website and My domain DNS set to Cloudflare and I hosted my site using a cyber panel webserver. my VPS IP is set to Cloudflare for the domain.. also I have set an AWS S3 bucket for WordPress media upload but the photo URL comes with the AWS bucket default URL.. how can I change the URL to my domain without the AWS bucket default URL?"
@ChristopherPhillipsDev
@ChristopherPhillipsDev 10 ай бұрын
I’m sorry, I don’t know 😔
@kumoitojp
@kumoitojp Жыл бұрын
Wow. Great tutorial! You’re close to 1000 subs! Congrats! I’ll sub too and follow your content. Good luck and thank you so much!
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Thanks! Yep, closing in 😁
@Layput
@Layput Жыл бұрын
how to redirect the website to route to www even if you typed the naked domain?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
It's been awhile since I've watched the video but I believe there was something there detailing how to redirect. It has to do with setting up 2 buckets.
@MyPodie
@MyPodie 10 ай бұрын
Hi Chris, thanks so much for this tutorial! You saved me tons of hours with this. Just curious, I have made some changes to the nextjs/react codes, rebuilt, and updated my S3 bucket. However the linked custom domain that I set up previously seems to not respond to the changes I made in the codes. Do I have to delete and redo everything just to update my website? Much appreciated once again!
@ChristopherPhillipsDev
@ChristopherPhillipsDev 10 ай бұрын
So you made changes to your code and uploaded the changes to the bucket and are not seeing the results? If that's the case, it might just be propagation timing. Since i'm responding to your comment you made 16 hours ago, has anything happened since? I wouldn't be able to offer much additional help but I hope you sorted it out!
@MyPodie
@MyPodie 10 ай бұрын
@@ChristopherPhillipsDev so apparently it still doesn't change for me on my end but people in different areas do see the change. So I guess it's the cache thing that's messing this up? Thanks for getting back to me!
@ChristopherPhillipsDev
@ChristopherPhillipsDev 10 ай бұрын
@@MyPodie I’m not sure and I couldn’t offer effective advice since it could be anything and not just caching. I wouldn’t think that would take this long. Maybe try incognito mode or a different device?
@MyPodie
@MyPodie 10 ай бұрын
@@ChristopherPhillipsDev I've figured it out! Just head over to the *Invalidation* tap of the desired distribution, and create an invalidation by adding '/*' inside the *Object Paths* to force Cloudfront to stay up to date with everything inside the S3 bucket. Appreciate the help Chris and please do keep up the good works. The tutorial was super helpful! 🙏
@ChristopherPhillipsDev
@ChristopherPhillipsDev 9 ай бұрын
@@MyPodie nice! Congrats! Glad you were able to solve it.
@haroldw4940
@haroldw4940 Жыл бұрын
Stuck on (4) Creating your Amazon Cloudfront distrubution which includes a crucial piece of information that many guides neglect to mention. Each time I paste in the path I get this message in the "Name" panel. "Name is in use. Name must be unique" Not sure what happening or why it's not allowing me to create the origin
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
The error message is providing the answer. Whatever your pasting in is already in use. I suspect there's some very minor detail in the tutorial you're potentially missing. Unfortunately I don't have any direct answers. Maybe try restarting the tutorial and taking it slow to make sure every step is followed?
@haroldw4940
@haroldw4940 Жыл бұрын
@@ChristopherPhillipsDev Thanks... Video is super clear and a time saver. Much appreciated. 😊 I will retrace my steps from the beginning. AWS did update their menu, some of the selections in your video has slightly change but not by much. They is no OAI option any longer. Your right, I definitely missed a minor step somewhere.
@haroldw4940
@haroldw4940 Жыл бұрын
I found the OAI option. It was located in the legacy radio button. This was the part I missed
@jomavillanueva4549
@jomavillanueva4549 2 ай бұрын
For anyone having trouble displaying the website, I still had to add NS Records in NameCheap (Advanced DNS) of the domain, you can remember that in kzfaq.info/get/bejne/eNOlotSgxLC9ZJs.html you have 4 NS Records, create 4 of those in the Host Records of NameCheap, Type: "NS Record", Host: "www", values: get from your Route 53 record (you can include the .), ttl: automatic After that, you should have no problem
@sebastiaanvv
@sebastiaanvv Жыл бұрын
this was a good video. But WHY is it, that with every AWS tutorial that I follow something is off. Why do I have two different CNAMES instead of you who has two identical names. And at the end stuff is not working for me. No website is showing. Anyway. I still gave the thumb up cause its clearly good stuff.
@user-li9es1eq1c
@user-li9es1eq1c 2 жыл бұрын
I was stuck in namecheap for 2 weeks, since I don't know the value of DNS configuration is the CNAME's name in SSL certificate, that make DNS validation pending for 2 weeks. I read many docs and watch several youtube. Sad to see your video until now.
@ChristopherPhillipsDev
@ChristopherPhillipsDev 2 жыл бұрын
I'm sorry it was difficult for you to get where you wanted, but glad I was able to help!
@NathanBrownisawesome
@NathanBrownisawesome Жыл бұрын
Mannnn,I found this like a year later after I figured this all out myself from a ton of stack overflow & stuff 🤣, great video tho
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
At least you got it! And the satisfaction of accomplishing it yourself is even better
@kingsleysaba4204
@kingsleysaba4204 Жыл бұрын
thanks alot But it seems namecheap no longer allows nameservers when premiun DNS is active What can I do?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I'm sorry, I don't know
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Hi! I added an update to the description text on how to solve this if you're still interested in using this for yourself.
@agustinariel8942
@agustinariel8942 2 ай бұрын
👏👏👏👏
@ashokbuttowski
@ashokbuttowski Жыл бұрын
Followed exact same steps BUT when i hit the URL from cloudfront distribution > getting this error [solved] This XML file does not appear to have any style information associated with it. The document tree is shown below. InvalidToken The provided token is malformed or otherwise invalid.
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
Unless they changed something, I think you're missing something. Others haven't had an issue. I'm not sure what token the error message is referring to. In my experience, the token is login related. I'm sorry I'm unable to provide more feedback
@ashokbuttowski
@ashokbuttowski Жыл бұрын
@@ChristopherPhillipsDev Oh fine, They have added things like modifying bucket policy manually, apart from that i dont see much changes and thanks for the quick response!!! [EDIT]: Also, I have my buckets in different region, does that matter???
@Layput
@Layput Жыл бұрын
I deleted the contents of the bucket but the website still displays the contents. How do I fix this?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I waited until responding. How does it look now? If changes haven't been updated by now, could be something else wrong that I don't know of. But propagation should've happened by now
@Layput
@Layput Жыл бұрын
@@ChristopherPhillipsDev Yes. After almost 24 hours, the old files in the bucket are still the ones showing although I have already deleted them. I tried to disable the deployment in cloudfront to see if I can restore the page. After seeing the error page and then after enabling deployment, the old deleted website files in S3 bucket are still the ones showing. Does cloudfront or Route 53 cache these files somewhere else and cloudfront is deploying it from those cache and not directly fetching from S3 bucket? I really hope you could investigate as I can't access Amazon helpdesk due to lower tier subscription. Also, I tinkered with staging and now it is messed up and I can't delete the staging distribution. What should I do?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
@@Layput I'm sorry but I can't investigate since it's not my account/issue. I've used chatGPT to investigate issues outside of Amazon and it's quite a good tool for helping at least point me in the right direction. Maybe give that a shot?
@jemjem8902
@jemjem8902 Жыл бұрын
Will this be the same for ec2? I'm so stuck with it.
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I'm sorry, I don't know 😔
@jemjem8902
@jemjem8902 Жыл бұрын
@@ChristopherPhillipsDev It's okay, I'm so frustrated and just switched to s3. I think s3 is good enough for my portfolio requirements. Thanks!
@DevDev-lo1sb
@DevDev-lo1sb 4 ай бұрын
For replacing files just can we change the files in s3
@ChristopherPhillipsDev
@ChristopherPhillipsDev 4 ай бұрын
Yep, just make sure you’re not deleting a dependency. Meaning if one file requires another, that it’s in the bucket
@DevDev-lo1sb
@DevDev-lo1sb 4 ай бұрын
How can I contact you?
@ChristopherPhillipsDev
@ChristopherPhillipsDev 4 ай бұрын
@@DevDev-lo1sb there’s an email in the about section of my channel
@rakeshchauhan-op8qw
@rakeshchauhan-op8qw Жыл бұрын
Know how to redirect non-www to www using this?
@ChristopherPhillipsDev
@ChristopherPhillipsDev Жыл бұрын
I'm sorry. It's been awhile since I've played around with this. Maybe someone else can assist?
@rakeshchauhan-op8qw
@rakeshchauhan-op8qw Жыл бұрын
@@ChristopherPhillipsDev no worries. Thanks for the reply though
Amazon S3 - Static Website Hosting with Custom Domain and TLS
16:28
Bryan Krausen
Рет қаралды 24 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 126 МЛН
ЧУТЬ НЕ УТОНУЛ #shorts
00:27
Паша Осадчий
Рет қаралды 10 МЛН
Son ❤️ #shorts by Leisi Show
00:41
Leisi Show
Рет қаралды 9 МЛН
Enable HTTPS and a custom domain on you S3 bucket using CloudFront
15:25
inter | ex02
7:42
Christopher Phillips
Рет қаралды 7 М.
Stop, Intel’s Already Dead! - AMD Ryzen 9600X & 9700X Review
13:47
Linus Tech Tips
Рет қаралды 1,3 МЛН
JPEG is Dying - And that's a bad thing
8:09
2kliksphilip
Рет қаралды 259 М.
Upload Images Directly to S3 from Front End
18:28
Sam Meech-Ward
Рет қаралды 120 М.
Build with Me: Launch a website on Amazon S3 | AWS Project
8:04
Tech With Lucy
Рет қаралды 114 М.
New AI ROBOT with 3 Brains SHOCKED Experts!
9:16
AI Revolution
Рет қаралды 20 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 126 МЛН