Host a Website on AWS with a Custom Domain and HTTPS | S3, Route 53, CloudFront, Certificate Manager

all right what's up everyone welcome to my first ever video on aws tutorial and today i'll be talking about how to host the website on aws with a custom domain and how to configure it with a ssl certificate so that the request to the website is going to be in https but before we get started i want to walk you through the architecture diagram so that you know what exactly that we are building and know how the flow works so this is the infrastructure that you will be able to create on your own after the video and the way it works is that when the user visits the website for example geneminster.com the first thing it's going to hit is the route 53 which is a domain name system service in aw in aws for you to manage manage your domains uh route all the traffics and things in that nature and then it's going to get to the cloudfront which is a content delivery network service that delivers data or content to users with a very low latency and at the same time a ssl certificate is going to come in to make sure that the request is in https and what that really means is that when you visit a website for example google.com this part is going to be in https and what it really means functionally is that it encrypts the user data before it makes a request to the server to prevent hacking and if you don't have that in your website i'll show you an example like this it's going to show you that this page is not secure so you should not expose your personal information over there because it's not safe and finally cloudfront is going to make the request to a s3 bucket where you store the web page content and then cloudfront is going to serve it back to the user so that the user can see the content on your web page one last thing i want to point out about cloudfront is that it has a very amazing caching feature where it catches your content on something called edge location which can be used later on for example when user number one visit a page on your website the first time cloudfront is going to fetch the content from the s3 bucket and serve it back to the user and now let's say two hours later user number two visits the same page on your website but this time around is not gonna get the content from the s3 bucket instead it's gonna get it from the edge location the cache and serve it back to the user and this way it's going to be a lot faster and it's cheaper as well and in this video i'm going to show you how to create everything on this architecture diagram step by step for your website hosting and without further ado let's get to it all right so right now i am on the home page of the aws console and we're going to break down the entire process into four steps and step one is going to be buying a domain for your website from aws and we're going to do that in round 53 so what i need to do is i just type in raw 53 and navigate to it and then i'm going to click on register domains as you can see right here i already have a domain um i bought it earlier i bought it before but i'm going to show you the process of how to get one so i hit register domain and then type in the domain name that you want it has to be unique so what i'm going to do is just type in gym meister 2020 and then you can check availability and great it's available um and depending on whether you want it to be dotcom.net or other things the price can be different and that is the price per year um so let's say if you want it to be in dot com just add to card and then hit continue and right here you can fill up all the information and then hit continue and right here you can review all the information you just enter if and if everything looks good you can just check here and complete order i'm not gonna do it right here because i already have one i don't want to buy another one and after you did everything and you pay for it if you remember right i think it takes about an hour or two for everything to be provisioned and once everything is done aws would automatically create hosted zone for you for that domain um but for whatever reason you deleted it after you get created just like what i have not right now and right now i'm going to show you how to create it from scratch so what i'm going to do is create a hosted zone for me my this is my domain name you can add a description to it but you don't have to add a tag what i do is just create it it's pretty quick it should take a couple of seconds what you will do is it will create two rackets for you one is ns record and then the other one is soa records one one very important note right here is if you deleted your records before and right now you recreated it you have to make sure that the ns value right here matches with what you have in the register domain so what i'm going to do is i'm just going to copy this and paste that in and paste that into my notepad for later use and now i'm going to click on the register domain click on here as you can see right now they're not the same so what i would do is i would click edit and copy them one by one you don't need to copy the dot at the end that's all right hit update it's gonna take like a couple of minutes for it to finish um and when it's done you're gonna get an email saying that they already finished the update and you will see these changes all right i'm going to pause the video and come back after i got the email all right so it's been few minutes and i've got an email telling me that i have successfully updated my name servers um so right now if i refresh the page uh this should update with what i had entered before and right now they match so that is all for the rough 53 part step one and right now let's get back to the architecture diagram and see where we add so remember this is where we try to get to and we have done step one so we have done everything for route 53 we have got the domain name and we configured the server to name servers to work with the website hosting and right now let's move on to step two and what we're going to do in step 2 is that we're going to create a s3 bucket and upload a index file into it for website hosting so what i would do is click on service just type in s3 open that into a new tab so right now i don't have any buckets in here what i would do is click create a bucket you can name it whatever you want but what i would do is i just name it let's say 2020 it has to be unique globally and right here you can uncheck it right here for website hosting i'm gonna do it later on just to show you how to how to do it after you created the bucket and i will just enable versioning and unenable server side encryption and then create bucket and now it's done and right now what we're going to do is i will create an index html for our website hosting so right now i am on vs code with a empty folder what i would do is create a file called index dot html and in here i'm just gonna do something really simple i just have a h1 tag that will say hello welcome to my website and have a paragraph that says this is my website for testing and save it right now if i go back to the aws console click on the bucket we just created i can hit upload we're going to upload a file that we just created add file is this one and hit upload right now we have a file in the bucket and what we're going to do next is we're going to enable bucket for website hosting because right now it's private it's not open to the public and it doesn't have the capability to host the static website and we're going to enable all of that so go back to buckets click on my bucket save permission edit i'm going to uncheck this mark so that it will not block the public access to the bucket let's confirm bucket policy so i what i'm gonna do is i'll just go to amazon's website to get the bucket policy i'll just google bucket policy for website hosting i'll include this link in the description below so you have it so scroll down to here and copy this entire thing and hit edit on bucket policy paste and you need to update this field right here to be whatever your bucket name is for me it's gene meister 2020 one thing to note here is the version number right here you may be tempted to change this but please do not change it because this is how aws keeps track of the version number so leave it as is hit save changes and then the next thing we need to do is inside property scroll down under the static website hosting hit edit enable and then just type in index.html if you have an error page you can specify the error page file but i'll just leave it as html index html right here as well and then hit save and right now we should have a a endpoint for our website if i click on here scroll all the way down and click on it and hey our website is live but as you can notice right here this is not https request so it's not secure but we're going to fix it later but before we move on to step number three let's go back to the architecture diagram and see where we add so we just bought the domain name from raw53 and right now we created our bucket and configured that for website hosting and include it in indexed html to it for our testing website and right now step number three is to enable the https request and we're going to do that in the and we're going to do that in the aws certified certificate manager and i hit service type in certificate manager open that into a new tab get started request a public certificate request a certificate domain name for me is geneminster.com and then you can enter yours hit next um i'll just pick a dns validation that's simpler hit next tag i'll just say name geneminster.com review and then confirm the request so right now it's pending validation what i would do is i would open this up you can see this button right here so what i would do is hit that to validate this create and you can see it's successful and if you go back to the if you go back to the route53 console you should be able to see that as one of the records that it creates so before we only have two uh one is the ns record and the other one is soa and then right now we have a cnn that's pointing to the um certificates so if i go back to this certificate manager and hit continue it's all done but before we get to step number four to wrap up everything let's get back to the architecture diagram to see where we add so we have obtained a domain name from rav53 we also created a s3 bucket to host our website content we also just created a ssl certificate for https requests and right now we're going to create the cloudfront distribution to connect everything and now we're going to go to the cloudfront page open it in a new tab hit create distribution so you have two types of cloudfront distributions we're going to pick webpagetype origin domain name if you click on it it's going to give you an option to choose the s3 bucket but this is not what we want because we don't want cloudfront access the s3 bucket directly we want it to access the endpoint so we're gonna we're gonna go back to s3 we're gonna copy everything after the two slashes and then paste it here and the only two more things that we need to change in here and everything else can be left as default the first thing is right here we're going to check to direct all the http requests to https and then the second thing is to alternate cname we're going to type in geneminster.com and then for the ssl certificate we will select the one that we just created and then everything else can be left as default and then create distribution this can take up to a few minutes so i'm gonna pause the video and come back in like five minutes or so alright so it's been a few minutes and if i right now copy this domain name and paste it into a new tab i should see our website and there you go but this is not exactly what we want we want to be able to type in just geneminster.com and it will show me this but it's not working right now because if we go back to the architecture diagram what we just did was we created the cloudfront distribution and we configured that with a ssl certificate and we connect that with our s3 bucket endpoint but we did not connect that with our domain name in route 53 and this is what we're going to do now so i go back to route 53. create records i just pick a simple routing next define a record the only thing you need to do here is just choose an endpoint i just type in we want to connect that with the cloudfront distribution and if i click here i should be able to select the one that we just created and leave everything as default and then click define create records it's pretty quick it should only take a few seconds and right now we have an a record that points our domain name into the cloudfront distribution endpoint and right now if i go back here and refresh the page we should we should be able to our web content and there you go and that is it now you have learned how to host your website on aws with a custom domain and with the https request i hope you have learned something and if you like this video i hope you can give it a thumbs up and if you have any questions comment down below and i'll try to answer them thank you very much see you in the next video you

Channel: Felix Yu

Views: 8,255

Keywords: aws, website hosting, custom domain, HTTPS, S3, Route 53, CloudFront, Certificate Manager

Id: kvlSep7m7Uk

Length: 21min 17sec (1277 seconds)

Published: Fri Nov 27 2020