Configure CloudFront Distribution

[00:00:00]
>> Our regular domain is better, we're in the process of having an SSL in place. We kind of fixed the client side routing issue half x, we'll go get ourselves half credit for that one. And now we have the issue where it's still located my case and In Virginia, right?

[00:00:20]
Not too bad, but like the further you get from Virginia, the worse it's going to get. So the way that we will solve for that is using a little thing called CloudFront. We'll talk about that one together. We're gonna set up CloudFront, CloudFront takes a little bit because, like mentioned before, it's setting up your assets on a CDN around the world.

[00:00:46]
So what we're gonna do is, we're gonna go through and set it up for a little bit. Then we'll talk about and explain that, while it's baking, and that will then allow us to hopefully by the time I'm done talking, it should be ready to go. So the steps that we're gonna do together, I'm just gonna kind of call them out, is we're gonna create a new CloudFront distribution, right?

[00:01:08]
A distribution is just a CloudFront setup. If S3 is buckets, then CloudFront is distributions, right? So we're distributing your app around the world, it's a CloudFront distribution. We are gonna point it at our static website on S3, we'll add in those domain names. We'll set up the GCP and brought lien of our applications, will set a default route object.

[00:01:29]
Basically set a point to the S3 bucket you will now talk to CloudFront. While that is all cooking, we will kind of get a little bit more into what CloudFront is and why we did all of that, but let's start the process in our case. So we'll head over to CloudFront, back in the console, we'll find CloudFront.

[00:01:49]
There's also Cloud Nine, cloud formation which is like templates for a lot of this stuff. CloudWatch, which is your logs, Cloud Nine, which is an editor. It's great, everything's great, so let's get this set up, let's go ahead and we'll create a new CloudFront distribution. So the origin domain, we're gonna start by, it feels really tempting to pick one of these If you do, it will break quietly and silently.

[00:02:23]
Now there's a way to get these working in a little bit, but right now without actually pointing out the S3 bucket, We wanna point to the actual website that we have. But yeah, usually like yeah, I'm gonna click one of these, it's not gonna be a great scene.

[00:02:40]
So there's a way to eventually get this working in a little bit, but we're gonna have to do some additional steps as well. And we'll actually solve for another problem as we handle that, but for now, go back into that bucket actually for a second, so S3. And we'll find, superawesome.click, into the properties.

[00:03:05]
We want this version of the URL. So CloudFront is gonna point at that URL, like I said, if you pick that one from the list, it won't work. A lot of this stuff with S3 and CloudFront is like oral history, so there's a lot of places that will say you can never get it to work.

[00:03:23]
If you picked from that list, it's technically not true anymore, we'll cover how to make it work, but right now it's definitely still true, so, yeah. So it's one of those things you guys, to be careful what you read, some of the stuff like most things, so we'll paste in that URL.

[00:03:40]
And you can see that it mostly figured out where it's going, we have that kind of in place. So you can basically add any custom headers we don't really need at this point. Origin shield is even more protection, origin shield we talked about CloudFront. I'll kind of mentioned a little bit more, we'll make sure even fewer things make it to the actual source, right?

[00:04:04]
It's usually helpful to protect load from your actual servers, for the case of S3 buckets, it's maybe not the most important thing, so we're gonna skip it just for now. Scrolling down a little bit more, we've got the path pattern, we basically want the same basic setup for most things.

[00:04:21]
I'll show you how to add special cases like no, I want my images to have a different cache policy than my JavaScript files. You can do all that right now, we just don't have enough to care just yet. It used to be that the settings for this, you had to change a whole bunch to actually do the right thing.

[00:04:37]
The nice part about the modern day setup of CloudFront is that like, the good choices are mostly in place for you. So yeah, we would like to compress objects, like cool if you can Jesup things and use Brotli compression. Please do, right, don't make me opt into that I would like that please.

[00:04:57]
The one we are gonna change which is if they go to HTTP colon slash, just move them over to HTTPS, right? So have that in place allowed methods, this one for our cases, getting head is just fine. However, you could put CloudFront in front of an API, as well, which point you would might want to let POST requests through and stuff along those lines.

[00:05:19]
So this one would just putting the static assets there, they're just gonna get our lovely web pages and load them into their browsers. We'll go with the recommended cache policy, we will spend more than enough time in this section later. Going through, use all the edge locations versus US only North America and Europe, yeah, you can pick different regions.

[00:05:44]
Some of this might have to do with those ads on YouTube videos and podcasts for VPN where you can get stuff. Also different legal requirements on where you can and cannot have data so on and so forth. But for our cases like, yeah, we want the best possible performance alternative domain name.

[00:06:06]
We do want to set that up and we're gonna add in superawesome.click or in your case your own and you guessed it, www.superawesome.click. So then we need to tell it where the SSL HTTPS, all right, fingers crossed. Hey, my cert is ready, as we did it before. I would have been a real bummer if I got this far like and now we have to stop, go make a cert and wait.

[00:06:39]
So the reason we made that certificate before in the Amazon certificate manager is to have it ready to go now, so that is in place. You'll notice if you don't see it, you might have to go regenerate it in US East one, right, the little note here, which is certificate must be generated in US East, North Virginia region 1.

[00:07:04]
The reason for that is technically while CloudFront is globally distributed, that is like technically where CloudFront lives. So all the CloudFront specific stuff needs to be in US East 1, so if you had a US East 2 or a US West 2. Which is when I was like doing it the other day, and then I had to do it a second time because I forgot about that fact.

[00:07:24]
You do need to just go through the same process we did before, we'll give you a little time, a little bit to just regenerate the cert in US East 1. Going on, I want to support HTTP/2, which we'll talk about in a second as well. And then the default route object in this case is gonna be slash index.HTML, right, just as it was when we set it up in S3.

[00:07:50]
Go ahead and we will create that distribution, and while we're at it, we are going to change the route 53 for now pointing to the just the bucket, to our CloudFront distribution. Registered domains, managed DNS, remember we're gonna view the details. In this case we can go find it, edit the record, now alias instead to a CloudFront distribution, that's gonna be in US East 1.

[00:08:42]
Here's our very fancy name, if you did not register domain name, obviously don't have to do this part. But this will likely be the domain name that you'll be working with, which is totally fine, and we'll have that in place. And everything else here seems really cool, this is what I was talking about before about.

[00:09:01]
If you had multiple servers, right, and you wanted to route it to the one closest to them. They want the lowest latency so on and so forth, we're using CloudFront which that is literally what CloudFront does. So we don't need that but kind of just pointing out that was there All right, so now we are also updating the DNS as well, let's go ahead and do the same, for the www.

[00:09:32]
So we will let that cook for a little bit, in the meantime, let's talk a little bit about S3.