Hands-on: Setup an Amazon CloudFront distribution with SSL, custom domain, and S3

so here i am in my aws cloud console and i'm just going to type s3 here click on the link and here we're going to create a bucket now remember bucket names must be globally unique and they only contain lowercase characters and numbers and i think dashes so let's try right looks like this name is unique enough so let's just click next uh leave everything here by default next and here you will want to untick this block all public access because we will want to host a static website on our bucket and to do that we need to allow public access into the bucket so take this acknowledgement here and then next and then you would just create the bucket by clicking this button here now my bucket is already created so i'm not gonna do that but you should go ahead and click create bucket right here all right so our bucket is created let's go and take a look what's inside it and surprise surprise there's nothing all right a couple of things we need to do before we start uploading the files so first off let's check our permissions as you can see i already have this this public over here so if you don't have it you need to go click permissions and then check that the block all public access is set to off if it's set to on then you need to click edit and untick the block all public access assuming that you have this public we can go on and we can check the bucket policy now uh you can copy this bucket policy from from right here or as i like to do it you can use the aws policy generator i just type aws policy generator in google and it's the second link and here you have a simple generator that will create the same policy that i have shown you before so what you need to do here is click s3 bucket policy effect will be allow the principle will be asterisk because we want to allow everyone actions will be get object here and amazon resource name you can find it out if you go back to the ms3 management console so right up here this is the one you take this and you copy it you put it into the into the generator and you click add statement and that's it now you can do generate policy all right there's one more little tweak that you actually need to do here to get it working on the line where it says resource and your arn you need to go to the very end and there type just slash and asterisk without it it won't work because with the slash and asterisk you're basically telling the policy to allow access to all the files in the bucket without it it wouldn't work all right so if i take it now and go back to my bucket and just paste it in there and hit save it should be working there we go this bucket now has public access all right next thing we need to do is we go to properties and we need to allow the bucket to host static website so we click static website hosting and as you can see i already have it set up but you should click use this bucket to host a website and in the index document you can type whatever you want but it's typical to have it as index.html if you have some error document you can put it in there but i'm going to type in index.html as well because i don't have a special error document for now and just hit save all right that's it so now we can finally go and upload our files into the bucket so i want you to go to overview and upload and add files and actually i'm gonna do it in two steps because as you can see i have this index.html but i also have an images folder and there i have the gif i was talking about before so first i upload the index all right upload then i create folder folder will be named images i don't really care now about any encryption save and when i go into the folder i can upload my gif all right and upload okay at this point i think i should can show you what we're actually uploading there uh so this is what the web page will look look like in the end that's actually my dog and he's being super cute right here and when we take a look at the code it's really just a very simple web page let me show it to you right here just uh yeah no no rocket science there if you want you can copy this or you can take any sample web page from the internet and do it with that it really doesn't matter it's all up to all right so now that we have our files uploaded we can test it and see if it actually works so if we click the index html and we have this object url and if we copy it i'm actually gonna start a new window for this just to make sure that it accessible from the outside i'm gonna copy in the link and there we are sure enough we've come to my doggy playing all right so everything seems to be working that's uh that's it for the s3 setup and next we're gonna take a look at route 53. let's take a quick look at our diagram we've set up the s3 bucket with all the policies and everything next step would seem to be cloud front but first we want to set up the route 53 and then we're gonna go ahead and set up cloudfront so let's go over to services and type in route 53 yeah call click the first one and from here we are going to create something called a hosted zone so basically what route 53 does it redirects traffic from somewhere to somewhere else wherever you want so let's create host tone my domain name okay so for this demo i have actually set up a domain for free on freenom.com and my domain is called storm storm it.demos.cf like cloudfront cool isn't it so i'm just going to take this and copy it over you can you can use any service you want i used freenom just because it's very easy and comfortable to use but if you google around for free domains i'm sure you will find something that will suit you alright so copy this in it will be a public hosted zone and that's pretty much it and here we just hit create and that's it so we need to do one more thing here and that is when we click on this one and click edit so here we can see four values and we actually need to go to our domain and input these values to kind of link the route 53 with the domain so if i go to my freenom and i click manage domain and management tools and what you are looking for is name servers if you're not using freenom i'm sure you can navigate your way to find the name servers and over here you should go to the root 53 and copy each value careful without the dot at the end yeah just just all everything up to the dot but not the dot and copy all the values into the name server columns here these are actually wrong so i'm just gonna go and quickly copy over the right ones all right there we are everything copied so just click change name servers and there we go that's it for this step so we have configured our s3 bucket we have configured our route 53 or at least what we could so far and now we're gonna take a look at the certificate manager so i'm just gonna go over to services type in certificate manager yeah click the link and here we are so what's uh aws certificate manager so basically it's a service that lets you easily provision manage and deploy ssl certificates you for those of you who don't know what ssl certificates are those are basically used for security to encrypt and secure traffic on the way between your client and the server so let's just click provision certificate i will request the public certificate so request the domain name is the domain name we are using in this demo so it's stormy demos.cf i'm just gonna go and click next you can choose whichever validation you want i like dns validation because i think it's quicker i'll click next i'm not going to use any tags and that's it confirm and request and it's pending validation this takes a little bit of time so i'm gonna cut the video here and come back once it's provisioned actually for the validation process to go through you need to click this little arrow here and here it says validation not complete that's fine so we're gonna click this little arrow and then we're gonna create a record in route 53 and then hit create and that's it now it says it can take up to 30 minutes so let's just uh give it a little while and i'll be right back all right there we go status change to issue it actually took like 20 something minutes for me to get this certificate issued anyways the moment we've all been waiting for the build up this was all for let's go to cloudfront all right so not many options here just click create distribution we will want to be using the web distribution and now just a few things we need to fill in here so there's like a gotcha here if you click here it will offer you an amazon s3 bucket and it would seem that this would be the thing you want but it actually isn't if you if you select this it won't be working so what you need to do is you need to go back to your s3 and here you need to select your bucket go to properties static website hosting and what you need to take is this part of the url up to the http colon slash slash all right so just this part and you're gonna go back to the cloud front uh you're gonna paste it in here all right that's great then we're gonna select redirect http to https and finally we're gonna have to fill in this alternate domain name so this is the domain name uh which we are using throughout this whole demo for me it's stormid dash demos dot cf so i'm just gonna fill this in here and the final piece of the puzzle is we're gonna use the customs ssl certificate which we provisioned in the last step so there we are there we are just select this and that's it we're gonna click create distribution and as you can see the status is now in progress mind that this can take up to i don't know i think 30 minutes so just give it a give it some time and i'll cut off the video here and come back when it's all spun up all right it's actually this took a little bit less than i expected it was only like 10 minutes and so there we are our cloudfront distribution is deployed and enabled to test it we just take this url and try and take a look at it and sure enough there's my dog tearing at that pillow brilliant so now the very very last thing we need to do is to enable the access to through this site right through this domain this isn't working now so what we need to do is we need to go to route 53 and we need to basically tell route 53 to direct uh requests to from starmate democf to our cloudfront distribution so we are going to create a record it's gonna be a simple routing record and we're going to define a simple record we're going to leave this blank our endpoint is going to be alias to cloud from distribution and distribution is going to be this one we can verify that docs ww etc docs wwe that that's the one all right uh one thing to note since we are using the ssl manager and the ssl certificate you can't actually select any other region than north virginia that's just the way it is so don't be disturbed by that that's just yeah you can't select anything else so it's fine all right and that's it define simple record and create records and this is gonna take up to five minutes i'd say we can try it now but i'm not sure i don't think it's gonna work now no it's not working yet so i'm gonna pause the video come back in five minutes and we're gonna try again and see if it works right folks it's been about three to five minutes so let's try it again and there we are there look at that beautiful puppy going at it yep that's it so let's finally go over what we did today so first we put a static website and the gif in an s3 bucket then we spun up a route 53 a record set and with a custom domain the custom domain isn't actually in this diagram but yeah it's part of the architecture then we provisioned an ssl certificate via aws certificate manager and finally we spun up a cloudfront distribution just for us and basically that's it yeah now when i go to a new window yep lightning fast i hope you enjoyed this video if you did find it helpful leave a like or a comment below and i hope to see you next time

Channel: StormIT

Views: 2,067

Keywords: aws, Amazon CloudFront, Simple Storage Service, CDN, S3, Content Distribution, Cloudflare, Akamai, Keycdn, Creating distribution, amazon cloudfront, amazon web services, cloudfront, enable aws cloudfront for custom domain with https, custom domain, custom domain name, amazon cloudfront tutorial, ssl and custom domains, cloudfront distribution aws, aws cloudfront distribution, cloudfront distribution for s3 bucket, content distribution, amazon s3, AWS Certificate Manager, StormIT

Id: FtNfhwyPMAs

Length: 17min 24sec (1044 seconds)

Published: Mon Oct 12 2020