Deploy Static Website to AWS S3 with HTTPS using CloudFront

welcome guys in this video we are going to deploy a static website to amazon s3 and then we will attach a ssl certificate to make that website secure let's see how it's done i do have a simple website created over here it's just one single page website uh with the page is called index.html let me show you how it looks um it's about a puppy called zeni and this image is actually from a folder here and it's stored over here so let's go ahead and upload this website to a s3 bucket let's go to amazon management console you need to log into your aws account and go to console here and then go to s3 once we are in s3 we are going to create a new bucket to host this website so let's click on create bucket here now we know that bucket name has to be unique across aws but when we are hosting a website it also has to match the actual domain name so i'm going to host this website on test.dernina.com uh dhoniyan.com is a domain that i own so we need to give the bucket the same name whatever um you know domain you're going to use for your website you need to give it the exact same name so if it's like yourwebsite.com then you need to name it like www.your but since i'm using the sub domain called test i'm going to use that name and i'm going to leave region as default that's asia pacific for me we want this website to be publicly accessible because it's a public website so i'm going to uncheck this box and acknowledge it here and then leave everything else to default let's go ahead and create the bucket now that bucket is created let's go inside the bucket and upload our website so first i am going to upload just the index file and then the folder that contains the image okay now that the website contents are uploaded next thing we want to do is go to the properties of the bucket and there is a section called static website hosting here so we want to go to edit option here and enable it now when we enable it we need to specify the home page or index document so it's going to be the page that is going to load when someone visits your website so if you have multiple html documents or html pages in in your website you can choose whichever one one you want to host or whichever one you want to open for me just once i'm going to specify that so it's index dot html error document is basically a sort of 404 page like if someone visits a url that does not exist aws is going to show 404 page instead of a nasty error message um it's really helpful if you are hosting a business website or you should have one and then let's click on save changes here now the next thing that we want to do is take care of the permissions so let's go into the permissions we already have enabled public access but we need to attach a bucket policy so let me go ahead and click on edit here i do have already copied the policy from aws documentation i'll leave the link in the description so you guys can go through that document in case if there are any changes to the policy in the future the document should be updated and we need to change the bucket name here so let me put in my bucket name and let's save it now we should be able to access our website using the aws generated dns name so in the static website hosting section there is a url here so this url should work now for our website so let me open it and we can access our website that's that's good but the problem is the website shows it's not secure so even if we go ahead and point our domain to this url the users are not going to see it secure they're gonna be able to access it only on port 80 and not on 443 so the next part what we are going to do is attach a ssl certificate to this website and then point the domain to it in order to attach ssl certificate first we need to generate a certificate and then use aws cloud front to create a distribution let's go ahead and create ssl certificate first for that we need to go to our aws console and search for certificate manager so let's go into certificate manager now remember before creating a certificate you need to change your region to north virginia east one uh the reason because when you create a cloud front distribution you can only choose ssl certificates from this particular region if if your certificate is in any other region you will not be able to choose it and then we are going to create a you know certificate using i mean clicking on get started here so let's do that let me crea click on request a certificate you need to enter your domain name here mine is just test.the ninadh.com a note here if you are hosting it on a root domain then you might want to add another domain name as well so it will be your root domain or your domain name.com plus www.yourdomainname.com so the certificate would work for both urls for us i mean for this video i'm just using a sub domain so i'm going to use only one and then click on next i'm going to choose dns validation here and let's go to next the naming um is basically just you know for you to understand if you have too many certificates you should name so you you would know which certificate is for what website and let's click on review and confirm okay once we are on this step there is a configuration here that we need to copy to our uh you know domain name dns settings so this is a record that aws needs us to add as a dns record and then only the validation will succeed here my domain is hosted on google domains you may have a different provider so you need to log into their portal i'm already logged in here i'm going to go to manage custom records so i can add a dns record here and then just create a new record let me paste that here so we don't need this part because it's automatically added at the end by google itself this is going to be a cname record and let me copy the value of it from here okay we don't need the dot at the end so let me save this okay now that the record is saved let's go back to certificate manager and click on continue all right so it's going to take few minutes for aws to verify the or you know validate the domain that we own it um because the dns changes takes few minutes to propagate so we are going to keep you know refreshing this until it's done ah actually it's done so it shows issued now and we should be able to use it now the next step is we need to create a cloudfront distribution so let's go to cloudfront and let's click on create a cloudfront distribution now for some reason um if i choose the options that are listed here um i mean i get into a lot of trouble and the site does not i cannot access the website very well so i'm actually going to use the url that we got from s3 and then use that as origin domain and then the next thing that we need to specify is redirect http to https so what will happen is if somebody tries to open the http version of the website they will automatically get redirected to https version and you you don't need to worry about anyone accessing website on http version so there are few more things that we need to specify here um one of them is the alternate domain name so we need to add the domain name that we are going to use so it's test.the ninadh.com and let me add it actually just added that and then we need to choose our ssl certificate so let me choose it here and we need to specify the default root object you know that's basically again the same html file that you want to load when someone visits the website so for for this uh you know website it it's index dot html so i'm going to specify that and i think this should be it let me just verify i'm not missing anything okay i think this is it so let's go ahead and create distribution now when you create a distribution it takes few minutes because aws needs to deploy this now all of your website files across all age locations i mean all these locations that they have so the status over here it's going to show deploying until the files are copied there but we can actually use this url and see if the website is accessible it might take few minutes so but let's go ahead and give it a try so let me copy this url and open it here and it's still not accessible so it might take a few minutes okay i'm going to try one more time i've waited for a few minutes let's see and bingo we can access our website using the cloudfront uh you know cloud front url that we are getting so now the only thing that's remaining is to point our domain to this url so let's go back to our domain portal um and over here we need to again go to manage custom records and add a dns record here so it's going to be for sub domain called test the record type is going to be cname and of course the url from cloud front so let me remove https from it and then click on save now again uh this record is going to take few minutes to propagate but let's go ahead and give it a try see if it's accessible already and it is um we are able to access our website using the actual domain name it's secure and it's it's working perfect so i hope you guys um learned something new today uh how to you know on how to deploy the website uh if you like my video please go ahead and subscribe to the channel like the video if you have any questions feel free to comment and i'll try my best to answer them

Channel: Shrikrishna Kulkarni

Views: 37,399

Keywords:

Id: o2HTkVxzivA

Length: 13min 46sec (826 seconds)

Published: Thu Sep 02 2021