Static website hosting on Amazon S3 (with CloudFront) without enabling public access.

in this video i'll show you how to host a static website on s3 without enabling public access we'll use four aws services route 53 for dns s3 for storage cloudfront as our content delivery network and certificate manager for an ssl slash tls certificate for secure https communication here we are in the route53 dashboard but before we get started if you know anyone that wants to take online spanish lessons i highly recommend toragos language academy i'll be using a real domain that i purchased with route53 you don't have to purchase it with route53 if you purchase your domain with namecheap or anywhere else that's fine too but you will have to set up a hosted zone there's not a whole lot to it you would create a hosted zone and put your domain name in here i'll link some aws documentation and you can find tutorials on how to do this you can also transfer domains to aws if you want to do that i'm going to cancel since i purchased my domain with route53 i automatically have some records that are created we'll need to create at least two more records to make this work and the first one is going to be created for us by the certificate manager if you're ever looking i have all these services pulled up here certificate manager s3 cloudfront those are the ones we're going to be using but if you're ever looking for a service you can find all the services in here but the easiest way if you know what you're looking for is to just type it in here in the search bar and click on the one that you're going to be working on that's if you know the name of it request a certificate leave this public request put your domain name here before i go any further i want to make sure that i point this out for this certificate to work with cloudfront and s3 you have to be in us east one this us east northern virginia if you don't pick this region certificate is not going to work and if you accidentally don't change it if it doesn't default to that it's not a big deal you can just delete the certificate and create a new one but it needs to be in us east one i'm going to put my domain name in here and i'm going to add one more this is optional but if you know you're going to have sub domains you might as well do this now or if you think you might it doesn't hurt to do it even if you're not going to have sub domains it doesn't hurt to have this wild card in here to cover all your sub domains click next and just to be clear a sub domain you could be www dot your domain api dot your domain etc we're going to click dns because dns is the easiest way to do this there's less hassle and it will automatically renew for you tags are optional if you have a lot of certificates it could be helpful to keep track of them i don't so i'm just going to leave this blank there's a domain there's a domain with the wildcard to cover all your sub domains confirm and request these are pending now as i mentioned earlier we have to create a new record in route 53 to make this work and there are two ways to do it you can copy right here and then go to route 53 create a record choose cname and paste that in there or you can click this button and let certificate manager do it for you do the same thing with the other and i'm going to go back to route 53 refresh and there's the record that we needed next we'll create an s3 bucket so we can store our files create bucket see this global no region selection so whatever i name this bucket nobody else using aws all over the world can be using this bucket name chances are nobody's using my domain name so i think this is a safe bet the region here is not important like it was for the certificate manager i'm going to leave the default we're going to be using cloudfront so all the content in the buckets is going to be cached so the region really shouldn't matter very much you can choose bucket settings we're not going to copy any bucket settings from another one so won't do anything there do not uncheck block all public access actually if you want to if you want to give public access that's up to you in fact there is aws documentation detailing how you can enable public access to host a static website some people do that a matter of fact a lot of people do that but if you want to block public access people don't need access to your buckets for you to host a website and i'll show you how to do that with cloudfront they'll have access to the contents of the bucket just indirectly and that will probably make more sense later if it doesn't right now we'll leave all these default options here create the bucket and there's my bucket so nobody was using that bucket name before i add the files to the bucket i do want to point out a few things if you look in properties all the way down here static website hosting is disabled and we're going to leave it that way because we're using cloudfront and for the permissions you can see block all public access is on so there's no public access to these buckets and there's no bucket policy we will need a bucket policy to allow cloudfront to access these buckets however there's an option in cloudfront to automatically create this policy go back to objects this is object storage you can create treat this like your root directory for all of your files so whenever you upload your files matter of fact let's look at my project now i've got a simple very simple project here where i created here's the html all i did was put one image in here there's the image and some minimal styles and it looks like this here's my website hosted locally it's just a picture go back to s3 let's upload some files add files and let's find my projects here here are the files that i want to add upload you can also drag and drop whatever is most convenient for you there they are there are the files and if i try to click and look at one of these files index.html doesn't work access denied there is no public access so even if you have a direct link to the bucket in the file you can't see it which is what we want now that we have our domain and hosted zone setup a certificate and an s3 bucket with our files we're ready for our cloudfront distribution so we'll go to cloudfront create a distribution let's find the s3 bucket for the domain we're going to choose we don't need anything in the origin path we'll choose yes for oai and if you don't have any oais origin access identities you can create one let's create one let's call it doesn't really matter what you call it create there it is it's that simple right here yes update the bucket policy so s3 if we go in to s3 and look at back into the bucket permissions right now we don't have a policy cloudfront though will create one for us since i'm saying yes update the bucket policy most of these options i'm just going to leave the default options checked redirect http to https we're going to leave that use all edge locations that's up to you you can limit it north america and europe if you want to just going to leave it as a default our certificate there it is it's the one we just created root object index.html let's make sure we haven't left anything out let's add alternate domain names i'm going to put domain name there i'll add one more i'm going to use www take one last look through all these make sure we got everything we have the s3 bucket chosen yes use oai because we want to restrict the only cloud front we're not allowing public access there's our oei yes update the policy redirect to https use all edge locations there are the domain names we've got the ssl certificate we're all set let's create the distribution deploying now this can take up to 30 minutes to propagate usually it takes a lot less however it can take a while so i'm going to pause the video and i'll let you know how long it takes that ended up only taking three minutes i've seen it be shorter but usually longer let's copy our cloudfront distribution now and see if it's working so there it is we have a secure website there's our cloudfront url remember this is the local copy so it's the same website however my custom domain doesn't work yet that's because we need to create another record in route 53. these are the original records created when the host zone was created the cname is validating our certificate and now we need to create a new record an alias record so leave it a here click alias and we're going to choose an endpoint point to a cloudfront distribution and there is our cloudfront distribution going to create record and one more i'm going to create one more record i'm going to create a cname record this is optional but i want to forward anything anytime somebody types www before my domain i just want to forward it to my domain without the www create record so now if i go to my custom domain here it probably won't work yet it takes a few minutes i'll check it not quite yet i'll pause the video and let you know how long it takes it ended up taking about seven minutes but there it is there's my custom domain same as the local website same as the cloud front and let's test the redirect www dot so immediately redirects to jamesschneider.net and let's look back now so we obviously have access to the website we put our files in s3 we didn't give public access we can look at that again s3 buckets and jamesschneider.net let's try to look at index.html and we can't look at it we can't see it if we look at the permissions blocked everything's blocked however we do have a new policy cloudfront created this policy for us so we're allowing cloudfront to get objects hopefully you enjoyed this video as a reminder if you know anyone that wants to take spanish lessons this is an excellent place language academy there are native spanish speakers with many years of experience good prices i highly recommend it one final tip whenever you update your content let's say you change this index.html you put something new in well since everything is cached around the world if you want your changes to take effect immediately what you would have to do is go to cloudfront go to your distribution go to invalidations and let's say you wanted to invalidate all the cache all the servers and edge locations that have your content cached you could invalidate it so then your changes would show up immediately if you don't invalidate it it's fine eventually everything will catch up but if you want something to take effect immediately you would go in here and create an invalidation pretty simple hope you enjoyed this video thanks for watching

Channel: James Schneider

Views: 1,016

Keywords: S3, static website hosting, aws, cloudfront, certificate manager, route 53

Id: qsJSv7J4s7k

Length: 16min 32sec (992 seconds)

Published: Mon Aug 16 2021