Now that we have our website set up in an S3 bucket, we've registered a route 53 domain, and we've created an ACM SSL certificate. Let's put it all together after we create a CloudFront distribution. So, to do this I'm going to first need to actually go back to the services drop down and go to S3 to get the website name for that particular bucket.

In my case it's just this bucket right here that we created earlier, but you'll need to find the bucket name for your bucket. You can find the property section and the static website hosting portion here and then copy the entire name of the in point without the HTTP. We'll need this in order to set up the CloudFront distribution, so just make sure you have this whole section copied down.

Next I'm going to go to the services dropdown and I'm going to type in CloudFront here, and that should pull up CloudFront and we can go over to that service and create a distribution. Now, we're going to need to create a web distribution in order to distribute files over HTTP and HTTPS. This will be everything from our assets like HTML files to CSS and unique graphics files that we have on our website. So, that's what we'll create for right now.

The first step here is to set up the configuration for the origin domain name and we're going to need to paste in what we just copied from AWS's S3 static site configuration. There might be a lot of different bits of configuration here depending on if you have a bunch of different S3 buckets or many different things set up that could be an origin for CloudFront.

Instead of just clicking on the domain name for that bucket, as you see I could do here, I'm actually going to paste over that with the S3 website in point. This is important because if you don't do this and instead rely on what's in the dropdown here, you're going to get a few potential issues with navigating to the index.html file from the plane path without actually including index.html in the end of your domain. So make sure that you paste that value in that we copied from the static site hosting section.

In order to use SSL, we're also going to need to scroll down and set up our ACM certificate. So, if I scroll all the way down to the bottom here you'll see we have a distribution settings section. I'm going to, instead of saying the default CloudFront certificate, which is going to mean that we'd have to navigate to cloudfront.net in a sub domain of that to get HTTPS, select the custom SSL certificate.

I can request or import a certificate with ACM, and actually if I click this drop down here, it's automatically showing me my current SSL certificate that I just created earlier. So, I'm going to select that, but if you don't see that for some reason, wait a minute, refresh the page or click request or import a certificate from ACM and that should let you get that particular SSL certificate setup.

I'm also going to need to go up a little bit further and make sure that the alternate domain names for this match the alternate domain names that I set up inside of that certificate. Now just click the information button here if you want more details on how to format this. But I need to make sure that I had everything from serverlessjams.com, as well as www.serverlessjams.com in here. If I knew I was also going to add other sub domains like app.serverlessjams.com I could also set up a wildcard like we did with the ACM certificate. I could put the star character here and then just add at the end the period and serverlessjams.com. That'll cover me for basically anything I'm doing with this domain and that's all the configuration I need to put related to this SSL certificate.

So, now that I've done this, I could take a moment to go through the rest of the configuration settings and change things like specifying the edge locations that I actually wanted my files to be cached in. For example, if I wanted to save a little bit on costs and knew that I mostly had a U.S., Canada, and European market, I could select only using the locations in those regions.

However, if I have more of a global distribution of customers or people interested in my content, I could just keep the "Use all edge locations", and that'll give me the best performance. There's a lot of other configuration here that we could dive into, but this'll be all the basics that we'll need to in order to get started with this website. So with this done, I'm going to go over here and click create distribution.

This process can take quite a while because essentially what's happening is it's distributing a bunch of this configuration information to all the edge locations throughout the world that CloudFront will allow me to cache my files in, but while this is happening I can go back to the services dropdown and I can look back up route 53. I'm going to need to do just a little bit more work to make sure that whenever somebody navigates to serverlessjams.com they're going to be looking at everything that CloudFront is hosting and caching for me. So, in order to do this I'm going to need to create a record set and I'm going to need to point it at the CloudFront distribution. In this case I'm going to say yes, I want to use an alias for this, and then I'm going to eventually use the CloudFront distribution target right here.

Now, it's important to take a look at this little yellow indicator here, that I need to make sure the specified distribution is actually going to have both the alternate domain name and a status of deployed. And if I went back to CloudFront right now and pressed back a few times here to find it, it looks like currently while the state is enabled, the status of this distribution is still in progress. Now we could go ahead and set up this configuration inside of route 53 and simply wait, but it might take a little bit longer for everything to get configured here. So, I'm going to go ahead and keep this selected and click create just so we have that record available. But when I actually navigate to serverlessjams.com it's not going to be able to redirect me over to CloudFront until CloudFront itself is actually available.

So, if I copy this entire CloudFront domain name, which I might need to make a little bit wider to see the entire thing, then I would need to expect that when I paste this into my browser here, it's going to actually show me the website, and it looks like currently it's doing that. Now once you navigate to CloudFront and see this file here, that means that it has been sent out to the CloudFront distribution and made its way to your local computer, but it's possible that for other users this might take a little bit longer depending on where you are and how long it takes CloudFront to actually get all those new files. But once you go back after maybe a few minutes to the AWS CloudFront management dashboard and you look for the status here changing to deployed, when you see that you should be good to go in terms of the configuration for your cloud front distribution syncing up with everything inside of your actual domain for route 53.

Depending on some DNS caching and other things like that, it might take a little longer for all the files to navigate to the custom domain, but once you see the status of deployed, go ahead and try changing the CloudFront URL just to the domain that you registered. In my case, that's serverlessjams.com. Now once I enter that in here, we see that we actually have the exact same website and if I refresh the page it stays exactly the same. This means that not only have I configured my static site website in S3, I've set it up to forward the files along CloudFront and set the DNS to point to that CloudFront URL that we just saw here. And because of that, we're loading that exact same file on this custom domain using HTTPS with that ACM certificate.

So, this is basically everything you need to get started with using all of these complex features to serve a fully functional static website. Now we're going to go back and look at how we can deploy a new round of files and then invalidate the cache for our website. So, let's take a look at that in the next video.