Host a Website on AWS with a Custom Domain and HTTPS | S3, Route 53, CloudFront, Certificate Manager
VloĆŸit
- Äas pĆidĂĄn 27. 07. 2024
- This video provides a step by step instruction on how to set up website hosting on AWS including buying a domain from route 53, creating an aws certificate manager to enable in transit encryption (https), configuring an S3 bucket for static website hosting and set up a cloudfront to connect everything.
Support the channel plz đ: www.buymeacoffee.com/felixyu
Files to include for Angular and React (scroll down to the bottom): jinmeister.com/aws/individual...
S3 bucket policy for website hosting: docs.aws.amazon.com/AmazonS3/...
Thank you so much for your detail instruction.
For anyone who stuck at 18:27 as me (the option "Custom SSL" is disabled), the reason is that you did not "Request a certificate" at the right region.
In the Certificate Management zone (minute 14:54), please look at the top right corner and select region "US East (N. Virginia) us-east-1" before creating a request of certificate. Then everything works fine.
Hope this help! ^ ^
I've watched so many video on this and struggled to make sense of any of them .. even though the screens in this are older - you absolutely nailed it. Following along I was able to set it up without a single issue. THANK YOU SO MUCH!!
Yooooooo, that quick sidenote on copying the NS record values just saved my whole site! I couldn't figure out for the life of me why I couldn't get the SSL certificate I was requesting for days!. THANK YOU!!
For those with some issues:
I spent a lot of time wondering why the new UI was not allowing me https at first when creating my distribution. ( second selection in Origin on the top )
Just ignore it and go to next step about alternate.
My next mistake was that the tab I was using in my browser was not in the right zone for the ACM certificate.
Use the link provided to ACM in the form to be sure that you are viewing the right ACM page for your zone. ( Request certificate link ).
I cannot believe this YT tutorial does a better job thank Amazon itself. It is like they dont want it to be easy.
THANKS A LOT!
Amazing, thank you! I had some issues with the zones, but once I knew which zone I had to be in for the Cloudfront, I went back and created a certificate in that zone. After that everything worked perfectly.
I've been using this for 2 years as reference, thanks Felix!
great resource.
Thank you!! Glad that u found it helpful..comments like this always made my day :)
The best explanation I've ever seen about this topic. Perfectly clear. Excellent job. Thank you.
Can't express how grateful I am for this resource Felix, thank you very much.
Glad that u found it helpful!!
Thank you so much! I followed another youtube video to do this but he never included the last step which was to create a new record in route53. Subscribed!
I've watched dozens of these self-made videos and by far yours ranks the best in my opinion. You went through each step methodically explaining each step and showing the Vizio graph which by the way was a very smart way of explaining it. Again in my personal opinion, your video here ranks one of the best that I've seen kudos to you congratulations and I did subscribe to your station.... thank you so much!
Glad you enjoyed it! :)
Great video, very clear - the architecture diagram refresh after each step really helped understand the overall flow - thanks!!
Looking for more content from you. Great explanation.
This is an excellent guide! I have been running into walls for the past week trying to get this to work with my google domain. I've touched all these resources but just couldn't get the connection between R53 and the S3 bucket to work through cloudfront with ssl. I followed your guide only using the NS records in google and at the end was pleased to see that lock in the address bar. Thank you so much!
Glad that u found it helpful đ
I wish all video tutorials were like this, very clear and simple, ++ Thank you so much, the video was really helpful!
Super powerful! I am struck by the clarity - For the first time ever I commented on a CZcams video. I never do.
thank you Godwin!! this is the first video I uploaded on YT. I am glad that it earned ur first comment đ it means a lot!!
Every step is sooo clear. Thanks!
Well done walk-through. Enjoying all your videos on your channel. Subscribed
glad that u found them helpful!! đ
I was stuck on this for a minute until I saw you copy and paste the S3 path instead of just selecting the whole bucket. You just made my day!
Glad that it helped :)
where is that. mine not working. doesnt connect to index. although I have checked permissions many times. How can you select path ?
Thanks bro, you the man! So easy, well explained. Right to the point
Glad that u found it helpful!!
Your instructions are very clear.
Thank you so much for your content. I have tried to do this for almost a year and didn't know I have to make sure the NS matches. I cant thank you enough.
glad that it helped!!
Great video!! Keep up the great work
thanks Felix, your walkthru made it very simple
thanks mate!! glad that u found it helpful!!
Thank you for your great explanation.
Clean and straight to the point
Thanks mate!!
Thank you for the great video! It is really easy to follow and you showed everything so well!
Glad that u found it helpful đ
Easy to follow and works well. Thanks!
Glad that u found it helpful đ
You are the man! Awesome tutorial! This is just what I needed. Thanks a lot!
Glad that itâs helpful đ
@@FelixYu One thing I did notice, if you want to assign an SSL cert to a cloudfront distribution you MUST create the cert in the us-east-1 (N. Virginia) region of ACM or else cloudfront will not recognize the ssl cert. If you pause the video at 18:31 it says just that.
Thanks, guy. A great video as I like: simple and clear
Thank you!! :)
Great video and great channel all in all. Keep it up !
Thanks man!!!!
very nice. step by step video. perfect !
Thank You! Very well explanation. Great job
Glad that you found it helpful đ
You r my god of AWS!! This is very useful!!!
Thank you!! Glad that u found it helpful đ
Fantastic guide! Thank you!
Glad that u found it helpful :)
excellent content, very clear.đ
Thank you - this was very helpful, I didnt know the hosted domain didn't match.
Glad that u found it helpful!!
good job bro, helps a lot
Very Clear Explanation. Thank you very much sir :)
glad that it is helpful đ
Great review of the basic !
Thank you!!
amazing video that covers everything
Glad you liked it
Thanks for this tutorial. it helped.
glad that u found it helpful!!
Thank you so much for this video it helped me alot.
glad u found it helpful!!
Excellent presentation..
Glad that itâs helpful
Thank you very much sir. This helped a lot.
Glad that u found it helpful!!
Thank you for the video. It is really helpful đ
Just to share that I made mine work without making my bucket public or enabling static website hosting. I instead pointed CloudFront to the whole bucket and also let CloudFront creates a policy for the bucket to allow access from CF only, which seems a little securer IMO.
thank you for pointing it out. it may be helpful for other viewers đ
Wonderful man.. Thanks
Glad that it helped đ
Thank you!
awesome! thanks.
thanks a lot :D awesome video
Glad you liked it! :)
Thank you so much.
Worked perfect
glad that it is working đ
great video
glad that it helped
Thank you so much!
Glad that it help đ
Thanks a lot very useful
Glad that it helped đ
thankyou sir, you solved my problem
glad that it helped :)
damn thank you Felix
Glad u found it helpful mate!!
excellent
awesome bro
Thank you :)
good job man
Thanks man!!
@@FelixYu I have an owned domain name, Rest everything is free in aws?
I love this
Thank you!! Glad that u found it helpful!!
@@FelixYu you are welcome
Thank you you are life safer
Glad that u found it helpful!!
thanks đ
Glad that u found it helpful
vair nayce i like
Will this work If I want to use this for my Roku channel? I would need to make this a Json feed for Roku.
I know it's been a long time but I'm curious if cloudfront can be ok for frontends that call APIs, let's say get user details based on id, in a secure manner. Or is it best to host them on an ec2
I followed all the steps but my website is still showing up as Not Secure. And to top it off, when I go to the CloudFront distribution domain it gives me a 504 error. Edit: Started over with a new domain, worked like a charm.
Thanks a lot. After host on aws is it possible to to start designing my web site on Wordpress? Sorry, I am new to this. I will appreciate your reply.
Liked and subscribed, thanks! #AWSRULES
Glad that you found it helpful :)
while uploading the contents into the s3 bucket , I am getting errors for the chunk.js files
Why did you prevent the cloudfront from accessing contents directly from the s3 bucket
Will it work if we use email validation instead of DNS validation? I am facing issues routing to domain
how do i change the file from index.html to my own website?
Your video helped me,good job.
I am just wondering if I create another version of the website , will it synchronously update the website?
after u update the files in ur s3 bucket, it normally takes a day for it to synchronize becuz cloudfront caches ur content for 24 hours but u can invalidate the cache in cloudfront so it will only take a few mins.
in cloudfront, click on the distribution, invalidations -> create invalidation -> /* -> invalidate
on a side note: i also have a video on how to automatically update ur s3 files from github. check it out if u are interested: czcams.com/video/AMSdM2dj_eI/video.html
bucket name and domain name should be same right?
Thanks for the video. Here CloudFront is needed? As our code is in S3 bucket, can't we directly get the code from S3? Thought to know....
You can. But cloudfront makes sure there is less latency bu caching it over edge locations. So user in US will receive your site same speed as a user in NZ. Basically it caches your website and makes content delivery faster
Thanks for the tutorial, I followed it through and have a hello world index.html working.
I found that if I replace the index.html with something new then Iâm still seeing the hello world on my webpage. Please can you advise where Iâm going wrong thanks
Cloudfront caches ur content for up to 24 hrs. U can go to cloudfront and invalidate it so it will render the most update index.html
Hello, I have a question and I hope you can help me....
the Bucket S3 is completely open and not secure no HTTPS... is there a way to make the bucket secure and still have this architecture? , I do not feel comfortable having this bucket completely open
the bucket is not completely open....its only open for read. no one can modify things on it
I followed the video however i recevied and error that the XML file does not appear to have any style information associated with it. how do I fix that
Same
I know it is late to answer but this is the part about bucket policy.
make sure you copy paste the JSON and listen to his soft voice
Hi Felix, hope you're well. Just wondering if you know how to mask the long S3 URL that an index.html object generates inside an S3 bucket. I'm trying to mask the URL to read like "mydomain/bucketname". Your help would be much appreciated.
u meant masking the s3 url like this one something-something.s3-website-us-east-1.amazonaws.com to mydomain/bucketname.com WITHOUT using route53??
@@FelixYu Yes you are correct, although this is not for website hosting purposes. For context, I have my wordpress website hosted with Hostinger and is linked to my domain that is registered with google domains. Basically, I use S3 bucket to host the content that I deliver to my clients. Similar to what you said, I'm trying to mask that long S3 URL to look like a subdomain "mydomain.com/bucketname" so that way it looks professional and related to my website. I don't have my domain registered with AWS or route53 so I'm not sure if I need route53.
@@jorellecastillo9026 hmmm i have never done this personally but i just looked at aws's doc and seems like u can pointa CNAME to ur bucket. check this out
docs.aws.amazon.com/AmazonS3/latest/userguide/VirtualHosting.html
Excellent video, but how'd you route the WWW prefix? Thanks!
i have done this once but i dont remember the exact details....i remember i needa create a CNAME www.yourwebsite.com in route53 and then create a separate cloudfront and then point that cloudfront to a new s3 bucket. the trick is in this s3 bucket under Static website hosting, u select Redirect requests for an object and then put yourwebsite.com as the host. this way, u www website will redirected to the yourwebsite.com
@@FelixYu yes I think so. I think it involves 2 buckets, with 1 redirected etc. Thanks!
I want to put cloudfront for webhosting on another provider or in local dc? Any option
i personally have never done that and am not familiar with it....sorry, cant be more helpful :(
So far thank you Felix for this informative video. But I have still the problem, that after I have connected the S3 bucket with Cloudfront (including the SSL Certificate) I can not see my static website when I enter the Cloudfront domainname in the browser. I have followed exactly each step of your instructions until minute 19:05 of your video, but then I stuck. Your help is much appreciated.
Without looking at the problem, the following are the 2 possible causes i can think of on top of my head:
1. try to go to ur s3 bucket -> properties -> under "Static website hosting", copy the bucket website endpoint and paste it in ur browser. if you dont see ur website content, that means ur bucket configuration is not correct.
2. when you create ur cloudfront distribution, did u put the right Origin Domain Name? (17:37 of the video). it should be the bucket website endpoint WITHOUT the
@@FelixYu Thanks for your quick response, Felix.
1. If I copy my bucket website endpoint in the browser I get a "404 Not Found" error message. I can only enter my website when I copy the object url of the index.html file in the browser. I guess that this is my problem. In my bucket I have a folder and inside this folder there are the website containers and the index file. I have tried to bring the website content directly to the bucket without having an extra folder and now it works :-)
@@nicostenger1093 yea the index file needs to be on the root level of the bucket....glad that it is working now!!!!
Can i host angular and Spring boot app with aws
Yes you can
I want to host my website only in single location ,can I avoid using cloud front and if I avoid cloud front can I convert http to https request with certificate manager
not with s3 website
we can do using static website also right? can we attach https certificate to s3?
Yea this is for static website hosting
I followed this and my certificate never validates.
What is cost for everything exept domain?
Hi Felix - I am stuck as it prompts to pending validation - I did wait for a long time. What could be the problem? I am desperate to upload my curriculum development.Thanks
in what step is this referring to (e.g., at what time of the video is this)??
Thanks for the reply. I figured out but now working fine... Especially with the new forms AWS..
@@dhunym glad to hear it is working now!! đ
I cant access to my site on mobile devices any idea why this happend?
try to access the s3 endpoint directly and see if u can access it. if yes, then it is the cloudfront problem. if no, it the s3 config problem..and then go from there
Hello, how much costs that certificate from certificate manager?
Public SSL/TLS certificates provisioned through AWS certificate manager, which is what I used in the video, are free.
Can I do same for JSP web application..
I am not very familiar with jsp but seems like it requires a server running. In that case, I donât think u can just host it with s3 alone. U will needa use an EC2 instance
@@FelixYu ok I try myself if it's wrk I will inform to you...
@@FelixYu yes he may either go with EC2 and setup tomcat on that, deploy application OR may use elasticbeanstalk for deploying java application(PAAS service)... By the way Nice videos Felix .. I am watching your all videos
I had a question , will the process be same for creating a subdomain
a subdomain like mySubdomain.myDomain.com?? yea it would be the same process. u just point it to a diff couldfront -> diff s3 bucket
@@FelixYu alright, makes sense
@@devprakash5320 How did you create the subdomain?
very good voice. I tried hard but still 404 error and my custom domain not working. your are my hope. Pls help me
you need to update bucket policy and cors policy.
I want to achieve this but I think the domain provider is holding me back
mega
so where can i pay you for you to do it. instead of me taking time to learn and do it. i rather pay and you do it and i get things done faster that way.
i have a video website that i have a host but it buffers. vps hosting they said i need dedicated servers but i heard AWS is better
please respond if you do work for clients and charge them.
Hello Brother. I need your help if you have time for me please
The hosting is free correct?
Not entirely
Route53 will charge u $0.50 a month and the cost for hosting on an s3 bucket depends on the traffic of ur site (I think it is $0.0004 per 1000 requests)
it works
Great video only issue when i use www. in front of the domain it doesnt work.
you need to recreate s3/cloudfront and point to this new cloudfront. s3 could just redirect to your another s3