How to host a STATIC WEBSITE on AWS with NAMECHEAP, ROUTE 53, CLOUDFRONT, S3, SSL

hello guys this is code with vlad and in this tutorial we are going to learn how to deploy your website on amazon i'm talking about static websites so the website that does not require a server something like react or a static web page anything basically that is just html and javascript it can work so amazon aws is an amazing solution to deploy your infrastructure unfortunately it can be quite hard for somebody who has never used aws and even for those people who have used aws it's still kind of hard to get things right but hopefully you have me hopefully you have code with vlad and that is going to teach you everything he knows about that subject so i had to deploy quite a lot of websites and every time every time i was deploying them there was this small little thing that i forgot how to do and then i need to google for for hours to finally find that it's a silly solution so before we start one thing that you would need to do and i highly advise it is to not use the dns of your provider so you are at your home at your place and you are using an internet provider right so i live in england for me is hyperoptic so hyperoptic has its own dns which caches all the websites you request and it it caches them like for a day so believe it or not i once lost four hours trying to understand why is my website not working until i just loaded it on my phone with 4g and then it was working then i understood that the problem is not the aws or my servers the problem is something in the house and it was the dns that my internet provider uses to save some traffic to save some money so i'm using max so i don't know how to do it in windows you can google how to change your dns but you should pick the google dns uh so for that for instance i go in network i go advanced and then i have dns and by definition you'll have some dns default dns or something that is used by your internet provider you should delete that and change to google dns 888 or 8844 that will allow you to have stupid bugs where you update the website and your website is not updated on your computer and you don't understand why it's like illogical you lose so much time please do that um it will help you with a lot of stuff already so that's the first advice the second advice is okay let's let's do it as if we really start from nothing so you want to buy a domain name or you have one already so this tutorial can help you how to deploy on amazon so i will i will simulate as if i was buying it so i will go to to namechamp and i'll buy a domain a cheap domain um let's call it um just just useless domain let's see if we can get something for one dollar okay i have one domain for one dollar just a useless domain xyz let's pick that add two card view item check out and i don't need to auto renew that i just need to get it so confirm order and i think my card is already linked to to namecheam so it should be should be working okay very well pay now order is processing damn that's slow slow slow slow we've got no time to lose because we need to deploy that website i don't know what's happening with the internet today guys but it's a bit slow and it's not the problem as namecheap namechief is quite fast let's actually shame a new name chip no i'm kidding they're good guys they're proposing nice domains for quite cheap hence their name okay i just had a small book where my cart was expired so i had to enter a new one and let's go and purchase that domain for one year i don't need a renewal i don't need anything from that i just need the domain because the domain will be managed by aws so i pay now and hopefully this time it will work yeah babe we just paid one dollar okay just a useless domain oh i just bought just a useless domain and i think the other one was something like just a simple domain because of this bug with the car time i think i bought two domains but anyway it's two dollars whatever so we have just a useless domain xyz we don't need to touch anything here for now we will we just need to go to advanced dns okay we go to advanced thinness and yeah that way we see it better we go to advanced dns and now we go back to amazon so the first thing is that you need to create a certificate so we go here certificate certificate manager and very important for the certificate manager that you do it from north virginia if you do any other region you will not be able to use it that's the way it is just click here and use north virginia then you have request certificate yeah requester certificate and then we'll use the domain name so we just bought just a user's domain name just useless domain xyz we just enter here so this will use the naked domain so if if you go to http dot just useless domain xyz you'll get there but it will not work if you do www dot just a useless domain xyz so for that you need to um you need to allow it here in the configuration in the certificate so add another domain and because you know you can use www but you can use app dot just to use list domain you can use something else as is called a sub domain so if you want to use whatever subdomain you want you just paste the domain and and put the wildcard so a star dot and that way you will have the certificate for all the subdomains you press next and dns validation don't need to do anything here confirm and confirm yeah so now it will give us something that we need to put in namecheap so namecheap will give access to amazon it will give amazon the right to use our domain so here's a bit important a lot of people get that wrong so you don't copy the whole stuff you just copy the part that is before the dot so you copy that okay then you go to advanced dns you create a new record and then you do cname record and you paste that you paste what you have copied you come back and you copy the whole thing copy the whole thing and then you do it here and you can press one minute and you confirm okay it is confirmed we have a cname record and now we just need to wait till amazon discovers that cname record on our domain so that will be a proof that you own that domain and that amazon can use it so it will take some time we can just do continue it will take some time and once it's done we'll go through the next part very well after some time our certificate got approved so now we can go into route 53 route 53 to configure our domain name so the first thing we are going to do is to create go into hosted zones host zones and create a new hosted zone so it will be basically your your domain so let's copy it here like that domain name and description now public hosted zone yup and create a hosted zone okay so the next thing to do is you see those dns servers we just need to paste them into the the name chip so we go into the main and the process will be the same with any domain name provider so domain broker it's very easy to do it with namecheap but if you have any other broker it will be easy as well okay here we go and here in name servers we actually check custom dns and we need to copy and paste those fields one by one okay so what happens now is that the domain name just a useless domain xyz is redirected to to amazon and now we can actually manage it from amazon it will take some time to actually propagate the domain to the amazon name service so in the meantime we can go and create our website so assuming you already have a website you already have some html file i have some here so it's just a website and assuming you have that and you want to deploy it and this is basically why you came for here you have a website you want to put it on amazon aws the way to do it is that first you go to s3 so s3 is a service to host files s3 then you need to create a bucket and usually the convention would be that you create a bucket with your name with your website name so for instance here my bucket is will be that name so my name so here you need to decide where will your website live i choose to make it sleep on www.justa uselessdomain.xyz so i can copy that create a new bucket yep and i will put it in north virginia because frankly it does not matter where the bucket is because we're going to use a cdn cloud front to read from that that bucket and the cdn is kind of propagated around the world so it doesn't matter plus it saves some some money because north virginia is cheaper okay let's go we don't we need to block the access we don't need to allow the access so we can keep it blocked if you unblock the access you can access the files directly from the s3 but since we are using cloudfront we don't need to do that so we can block the access and then on the cloud front we'll allow cloudfront to actually access the the files on that bucket but it would be done only through the cdn cloud front not directly through the links directly to s3 so go ahead next create a bucket okay so we have just a useless domain xyz and let's drag and drop our file here so our our website and here we go yep and for now you don't need to do anything with s3 anymore so we're going to go to cdn so cloudfront cloudfront and we're going to create a new distribution so it will point to our s3 bucket we have just created just a useless domain xyz right it will have to restrict the access of the bucket so we don't want other people to access to the files through the bucket we want people to access to the files through the cdn through the link of the cloud front so yes and we'll just create a new entity that's fine whatever grant read permission bucket yes update the bucket policy so it will update the bucket so only the cloud front will read if you don't update it you'll need to do it yourself with the s3 domain specific language but it's a bit annoying to do so we'll let cloudfront do it for us redirect http to https because we want our site only on https we can leave the caching as it is we can compress the objects automatically cloudfront allows to use gzip so we don't have to have a server doing that it can automatically do that so that's fancy your website will be smaller in a way and here we are going to use on the us canada in europe and here we need to put the domain name that we are using for us it's this domain name right and i'm not putting www and we'll see why just a bit later so we use a custom certificate the one we have created with the certificate manager so you press here custom and you can choose it here just another just a useless domain xyz right and i think that's all the default root object is the first file that should be read automatically from the bucket and it was index.html so index.html don't put it slash here don't put it slash it's not a route it's really the file so leave it as is and i think we're done we're good here we can create a distribution okay we need to wait a bit we need to wait a bit since it will be deployed but normally if we click on this link we should be able to access to to the website through that link so we can try it here already let's try it okay it's not yet working so we'll have to wait a bit till it is deployed and once it is deployed we should be at least have something at least have a page hopefully we won't have any errors but if we have some errors we'll need to see why it's happening but normally we shouldn't have any so let's wait a bit and we'll see how it goes so in the meantime while it is deploying we can check something else and that's a very common problem when working with aws so i'll illustrate the problems so let's say um we have the website so for instance the checklist.io when i type the checklist.io and i check the website it's automatically on www dot right and if i try to get rid of that then it will still go on www dot well it seems natural but you actually need to do a lot of work for that because basically this domain and the domain without the www are two different domains and the aws is treating those as two different domains so when you will press www you will land up on another website and when you will press and when you will delete www you will end up on another website i mean it's the same website but for google it will be considered as two different website so you'll need a mechanism to redirect and this is what we're going to check and now hopefully it is deployed soon so let's check now if it's deployable if it's readable okay it seems to work okay so we see here that it's working obviously you see that it's the same website it's the same source code but it's for demo purposes so here we have this domain name but we don't want to access our website through that domain name we want to access our website through this domain name so first we need to go now we have the cdn in place the website is on the cdn so it's propagated through the worlds very fast it's cached and everything we need to go into route 53 and point our domain to that cdn so let's go into host's zones let's go to our zone just a useless domain xyz very well and here we'll create a record that will point to that cdn and let's do it now so create a record simple routing then define simple record so this is the naked domain we just add wlw so if we go to www dot just use this domain xyz we should end on we should end a record yes and we should use a alias to cloudfront distribution north searching is fine and we don't have any yet so very very interesting let me actually check i think we need to wait till the cdn finishes work so cloud front we need to check till it finishes its work seasons till it's deployed okay it's deployed uh let's see what i got wrong so here we go did i write the domain name properly just a useless domain xyz i think it's uh yeah it's the right one and oh yeah of course we didn't we didn't say it was www so the default website will be www so sorry for that www.justusdomain.xyz the certificate is this one yeah and we'll just need to edit it so you see it's very it's a bit annoying you can make mistakes very easily so we go to route 53 and we go to hosted zones we create a record define a simple record same thing www choose a choose a name point cloudfront and then you have that click here define simple record create records okay very well now we should have the records in place so if everything is propagated as it should be when going on www just a useless domain xyz we should land on our website and it's working very well however let's fix that problem with www people when they type your website on internet they won't type www right they people type in on facebook they don't type www.facebook so if you uh will type your domain like that i think there it will work because it will be cached but let's try if you type that like that okay it's working but if you type sometimes if you don't type like that it here it works because the uh the email the domain name has been cached but if you use it on a new browser it won't cache it so if you will type something like that it will not work you see it does not know this this website right but it does know www dot just not domain so you might think that we can actually fix that in route 53 right let's just create another domain that takes the naked domain as an entry and that sends our service our signal to the same cloud front well for that to begin with we need to modify cloudfront and to add the second domain so let's just do the test i'm here showing something that you should not do but let's just do it so we can see how it works and so let's say that the dns will also accept the naked domain right okay we'll just save it we go back to route 53 go into hosted zones go here just a useless domain and let's create another record which will take the naked domain and link to the same cloud front right here we go define simple record and it will be next domain it will be an alias to the cloud from distribution well i don't think you will be able to do it but let's try okay so it works so let's let's try that let's try that i'm going to show another way to do it as well but let's try that create records okay that seems to work now normally if we go to let's actually open a new incognito window so we forget all the all the cash let's uh let's actually maybe move it here and there here so let's let's go there here we go that works so what happens if we go on the naked domain that also works but the problem is that it's the naked domain so i want that when you type just uselessdomain.xyz it always always always go on one website on one domain www just a useless domain.xyz and not just a useless domain xyz or sometimes www it creates two different websites and it's not very good for seo and it's a bit confusing because even for consumers is it with w is it without if you type www it will stay on www and if you don't type it it would just stay on that domain name so you have basically two ways of accessing your website which is not very good so let's fix that by the way you can also have the same results by uc versus okay next domain we can edit that and we can also point it to another record in the hosted zone so instead of pointing to the dns you can actually point to www just another domain and that will have the same same result except that it won't be pointing directly to the dns but it will be pointing to the other domain name that is pointing to the dnas so in those two situations you will end up with kind of two domain names one with a subdomain www the one we want to be our main domain and the one with the naked domain without the www so let's fix that okay let's uh to fix that we need to go to s3 and that's a bit uh clumsy way of fixing that but that's how it works like this is the only way of my knowledge so yeah we need to so for that we need to uh find just another just a useless domain xyz it's actually a good example because here i've set up a bit differently i i didn't do it in a good way so this what is supposed to redirect us to www.xyz right so let's do something else let's um let's actually i hope it's not too confusing but what i'm looking to do is when users go on that bucket i want this bucket to redirect the users on the www domain xyz bucket and the the way and the reason why i named the bucket www is just a convention just so we know which is the right website and which is the redirect thing just for me so virginia yup and that's it next block all access create bucket okay cool so what i'm going to do is that i'm going to move my website to the www.justusdomain.xyz so it's all coherent right so we're not the the the main thing you want to have is coherency logic in your in your in everything you do so if a file is named a certain way you need to name it a certain way if a file is named another way you need to name it another way so okay let's then go to cloudfront we're not done yet with the s3 but let's already go to cloudfront because it will take some time and redirect this this baby so this should be our main website so the main website is www just to use the domain so we don't need the other one and this will actually point to so that's it and this distribution should actually point to the other bucket that we have just created so um www just to use this domain and not not this one just a useless domain just wwe w just useless domain so this distribution points to the kind of right to the right bucket right so origin path we don't need that actually wait no yeah we don't need that restrict bucket access yeah and use another entity i think we had that yep we just keep that and yes update bucket policy so that way cloudfront will update the the bucket so only in the cloudfront can access it so yes edit and i think we're done here so now we can come back so we'll let it refreshing and cleaning the cache and updating the configuration in the meantime we can go to s3 and we can change some stuff first of all this will be our main website so our website is on www just user domain xyz our redirect thing will be on that so if people go there they should be redirected to here so the first thing to do is to delete all the files that we have here delete it will be an empty bucket with just a redirect functionality and then we go to properties and static website hosting and we're going to say redirect request to and just copy the name because i don't want to make a mistake so just copy it and www so redirect to that domain protocol https all right and that's it save okay and now we need to copy that file with oh sorry and now we need to copy that url copy that url that's quite important because we need to create another cloud from distribution because if we access to that file directly it will work like if we click here it will redirect us to the www website but this is a http and we need to use https if we want to access that url from the domain so we need to use that link instead so right here and not and not kind of the the id of the bucket so there's two ways you can reference a s3 bucket either by its id or buy a kind of dynamically generated link that the bucket can generate if it needs to host a website so this is what we need to use right so um now we go now we can come back to cloudfront right and we need to okay so we have the repository working so just a useless domain xyz that is pointing to the real website the www.justusdomain.xyz we need to create another distribution that will point to our redirect bucket so here don't use the id of the bucket don't use that but use the link we have copied this one so this link um actually that's weird i i think i copied what what the heck i copied it for some reason it didn't copy so let me copy it again oh la la so just a useless domain and its properties copy link can i can i just copy it like let me check it okay it's working so um we come back and we paste it here okay now we have the http that's fine so let me check we need to redirect all right we don't need caching it's very important we don't need caching so caching disabled we just want to pass through everything that comes we don't need to cache there's nothing to cache and just a redirect bucket right so no need to compress anything the c name this c name will be for the naked domain so just type here naked domain it will have a custom ssl the one we have we just use this domain xyz and the rest no default root object the rest is fine okay so let's uh where is that here we go so this is the one we have just created with the oops naked domain cname and remember the ending eth like ethereum so we go to route 53 right and we go to host zones and then just a useless domain xyz and here we already have that that record that points to the true domain the www and we have the naked one so we'll just edit the naked one that okay so clear that so we want it to be an alias to a cloud from distribution pointing to the e t h to the add one that we have just created and it's naked domain so that means if you go on that website you will end up on our domain save it and i think that's it i think that's it folks let's just try it just to use this domain yeah i mean i mean it's working it's working well we can even clean the cache oops got my new keyboard i need to get used to it empty cache and hard reload yeah i mean that is working i'll check it on my phone right now so using a 4g network and just a useless domain dot xyz okay on my phone it's working either you go to www or either you go to the naked domain it should always redirect you to the www version so you always have one website whatever happens and that's the point of this tutorial i want to show you how to deploy a website on aws as you see it's not that easy there's a lot of small things to do but now you know i hope you like this tutorial and see you in the next one

Channel: Code With Vlad

Views: 13,779

Keywords: aws website, aws deploy, static website aws, aws host website, aws cloudfront, aws s3, aws route53, aws certificate manager, aws namecheap, namecheap s3, namecheap cloudfront, name cheap, tutorial, cloud, devops

Id: 9WPlC5RKfjs

Length: 33min 26sec (2006 seconds)

Published: Sat Sep 19 2020