AWS Tutorial - Website hosting with S3, Route 53 & Cloudfront using Namecheap domain
ฝัง
- เผยแพร่เมื่อ 3 มิ.ย. 2024
- 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.
Bro just casually slipped a 19 min Power Tutorial that sums up everything there majorly is about Hosting sites on AWS.
big thanks
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!
I can't even tell you how much you helped me out with this video!! Your work is greatly appreciated, man. Thank you!! 🙏🏾🙏🏾
thanks so much! you were completely right about other tutorials being hung up at that part. you saved me weeks.
Still applicable in 2024! You're a life saver, it helped me learn some Basic AWS 🙏
This is probably the best video for this topic, exactly what i needed ❤❤❤❤❤
I was stuck on this for over a week! Thank you so much for this video!
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.
never enjoyed a tutorial that much xD your comments are awesome :"D
Excellent Video, Thank you Christopher!!
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!
Really happy I helped sort it out for you 💪
Thanks Christopher, saved my day ! was very easy to follow and helped to get going ! Cheers !
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!
Thanks! Glad it was somewhat current. And good on you for doing a bit of research too 💪
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
I'm glad I saved you some time!
super grateful for your help brotha❤
Awesome, exactly what I needed :D Thank you.
wove, you are amazing brother. i have been stuck here for almost a month. thanks alot.
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
Great to hear it’s still working 👍
one of the awesome crystal clear, and complete video... @cristopher you rock!!
You solve all my dudes. Really thank you bro. Nice explication and step to step. 👏
Indeed the video is the best you can find. Thank you very much
You're very welcome. I'm glad it helped
I was lost before watching this vid, thanks a bunch mate. Algorithm!!! do your thang
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 !
It's comments like these that keep us creators going! Thank you so much. I'm glad it helped you!
Very informative tutorial.
thank you so much amazing tutorial !! already like and i subscribe.
This is quality. I liked your jokes and it was very accurate
Thanks friend, I successfully launch my first AWS based website. thousands of thanks
That's excellent! Congrats :)
This is absoolute gold! 🚀
Priceless vidéo ! Thank you 👍
You're very welcome!
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!
Thanks so much for this amazing comment 💪. Glad I was able to shine some light on it
True
@@ChristopherPhillipsDev do we have to have the bucket name same as of domain?
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?
If you're just talking about the website content you want to serve, yep!
great great video! thank you!
Thank you so much!!!!
You save me a lot of time!!!, thanks a loooott!!!!!
Welcome back sensei 😁
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 :)
@@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 ;) !
Really helpful
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
This makes me really happy to hear! I'm glad I was able to help you. Congrats on your site launch!
Thank You !!!
oh man thank you very very very much you save my Time
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.
Thank You for this Tutorials..
You're very welcome!
Excellent
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 🙂
Be sure to check out the description. I've added some info there that pertains to namecheap
Thank u so much
amazing thank you , save my live
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.
Hi Jack! Glad you liked it. As for your question, I'm sorry, I do not.
@@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 : )
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:
th-cam.com/video/mls8tiiI3uc/w-d-xo.html
th-cam.com/video/g3nDQ0-jxSU/w-d-xo.html
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!
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!
@@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!
@@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?
@@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! 🙏
@@MyPodie nice! Congrats! Glad you were able to solve it.
just wondering in what situation you would use s3 storage to host instead of amplify?
I don't have experience with amplify so I couldn't offer and feedback
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 th-cam.com/video/Bmuoqo_JY4g/w-d-xo.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
I LOVEEEE UUUUU
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.
I'm sorry it was difficult for you to get where you wanted, but glad I was able to help!
your very funny, I like your content
I didn't find any TH-cam 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?"
I’m sorry, I don’t know 😔
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
At least you got it! And the satisfaction of accomplishing it yourself is even better
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
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?
@@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.
I found the OAI option. It was located in the legacy radio button. This was the part I missed
how to redirect the website to route to www even if you typed the naked domain?
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.
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.
thanks alot
But it seems namecheap no longer allows nameservers when premiun DNS is active
What can I do?
I'm sorry, I don't know
Hi! I added an update to the description text on how to solve this if you're still interested in using this for yourself.
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.
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
@@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???
👏👏👏👏
For replacing files just can we change the files in s3
Yep, just make sure you’re not deleting a dependency. Meaning if one file requires another, that it’s in the bucket
How can I contact you?
@@DevDev-lo1sb there’s an email in the about section of my channel
Will this be the same for ec2? I'm so stuck with it.
I'm sorry, I don't know 😔
@@ChristopherPhillipsDev It's okay, I'm so frustrated and just switched to s3. I think s3 is good enough for my portfolio requirements. Thanks!
I deleted the contents of the bucket but the website still displays the contents. How do I fix this?
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
@@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?
@@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?
Know how to redirect non-www to www using this?
I'm sorry. It's been awhile since I've played around with this. Maybe someone else can assist?
@@ChristopherPhillipsDev no worries. Thanks for the reply though
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!
Thanks! Yep, closing in 😁