Configure Route 53 & Routing

[00:00:00]
>> We've done a few pieces of the puzzle, right? Where we registered a domain name, maybe, we've uploaded some stuff to the Internet. We should bring them together, right? And be able to use them both. So instead of the very delightful URL that we currently for our site, we can have a less bad one.

[00:00:24]
Again, no requirement that you bought a domain, but let's take a look at what that might look like. So, we'll head into Router 53. And so we can go to our registered domains to this point, and I got superawesome.click, and it is currently set to auto renew. I'm gonna turn that off now, because otherwise I can tell you what will happen a year from now.

[00:00:59]
But if you picked a domain that wasn't just for example purposes, and you want to continue using it, you do not have to unclick that. You might also see a very angry, alert saying that your domain might be suspended. We talked about this, that when I drew your attention to that little line after we registered.

[00:01:21]
It was, we're gonna send you an email, you should click the link in there. If you did not, there's now a very angry, alert that is showing up probably over here somewhere. But, I did so, I do not presently see that. All right, cool. So we can go in to, manage DNS, which is this middle button right here.

[00:01:49]
Right? And we can go ahead and we can click on it, and let's hit edit. So you can see we've got some basic descriptions, and stuff along those lines not much to do in there. Go ahead and also view the details, you would think that like edit is the place where you edit the information on where, it shows.

[00:02:13]
We can see there's nothing really in there, it's actually view details we've got right now, the NS record and the SOA record. We wanna do is, pointed towards the rest S3 bucket. In AWS, you actually have an addition to some of the more normal ones like your MX record, so on and so forth.

[00:02:33]
You have the ability to alias it to another Amazon resource, which is one of the reasons why doing it in Router 53. It's just a little bit easier than pointing it, and getting it setting up all that stuff to resolve to the bucket, where this small little switch over here.

[00:02:48]
Hover over for a second, we can flip that and there's a lot less options in this case. So now we can go ahead, and we have a record type where, let's see we have, we can alias it to another record in this hosted zone. Or alias to S3 website endpoint well, we have an S3 bucket.

[00:03:14]
We did flip on the static website hosting says, seems like our best bet. We choose a region, if for some reason you did not choose us-east-1, just keep note of that at this moment. I believe I did choose us-east-1, and then we should see our site. So you should have that fall in place and then, hit create records and that should go ahead and create you an A record for your S3 bucket.

[00:03:45]
So now you should, maybe not instantaneously, so if you got really excited you went over there it's not working yet. Cuz DNS takes time, DNS is like replicated over like hundreds of servers around the world, it might take a second or two. So, we're gonna do something else before I immediately go over, and declare victory.

[00:04:02]
We're gonna go and register the SSL cert, because that was also gonna take a few seconds as well. So we'll do that by the time, that we pull that train gets pulled into the station. The DNS should have propagated for our domain, but we'll see awesome, so go this is yet another Amazon tool, right?

[00:04:23]
So, we're gonna go from Route 53 to the Amazon certificate manager. Start insert. Cool, so now we've got that we're gonna click on this request a certificate button. This is allowing us to have HTTPS traffic, in addition to HTTP, add a whole, not secure thing on our list of things that we need to solve for.

[00:04:52]
This is the kind of next way for us to start checking off boxes on that list. So go ahead and superawesome. Nope awesome.click clock click, I'm going to add another one which is gonna be www. Cool, so there's a bunch of ways for it to do this now, you can either have DNS validation or email validation.

[00:05:30]
A DNS validation basically just puts a little note on the actual DNS record to say, I can prove that I own this. Because, I put the little secret that you asked for on the DNS record. If you are doing this through RouteR 53, this is pretty easy because they will basically do it all for you.

[00:05:49]
You just kinda have to like Greenlight, all the steps along the way. So cool go DNS validation, otherwise there was an email for version as well. All right, let's now see, we hit request let's there it is. I had to hit refresh before it showed up, so we can hit that scope, click on this one for a second.

[00:06:18]
So this is pending validation now, you might think to yourself, okay, I wait, right? This seems the screen is telling you to do no, you do not wait because you will wait a very long time. What you need to do is see, where it says create records in Router 53.

[00:06:36]
As we mentioned, they're gonna say hey, we're gonna go check to see if these like special secrets, are on the DNS registration, right? And so even that last page, I had to refresh, it's like a pending validation, a lot of things take time. This case, it does take time, but there's also an action that you need to take that if you don't take, it will just never happen.

[00:06:56]
And that's why, we're together today. So otherwise, you will learn this the hard way, like I did over the course of three days. Cuz, yeah, 10 minutes grace 30 minutes, okay, maybe three hours possibly. The next day it start to get suspicious, but you go through the cycle, at first you blame yourself but now awesome.

[00:07:21]
So now, I've successfully created the DNS records, and now, at this point I should now go ahead and wait a little bit, and everything should be, okay. But, yeah, there's not really a great sign around that at first, right? So, while that happens, we should be able to check let's see super Now, that was the full one autocomplete failed me.

[00:07:55]
All right, so I don't have this SSL cert just yet, because we just kick that off but you can now see, I can go to my domain name. And it is showing up, right? As my superawesome.click website with all my ipsums, and my one picture of the Beatles.

[00:08:11]
So we have all of that in place, we still have the problem that we saw before though, right? I went to slash notes slash cupcake, strong URL, superawesome.click/ notes/ cupcake. I'm into it, and then if I go hit refresh, we get that 404 not found. Which makes sense, because that key does not actually exist in that S3 bucket, right?

[00:08:34]
It feels like something is broken, it's not really broken, it's just not what we want it. So we need to address that. The first one or two ways that we go about it are not going to feel good, but we don't really have a lot of great options.

[00:08:51]
Towards the end we will figure out some ways to go about this, you have ways you could handle this. You could theoretically, if you had a kind of either a framework that supported like SSR or a separate way to build your site, you could be, okay. We've got the general entry point like index.html and then, we kinda build a static version of site.

[00:09:11]
And we SSR in, and then the client side code, yeah, that's great and there are frameworks that do that, right? Something like next or spelt kit or something like that might, do something like that. The other option is being like listen, no matter what they put at the end, send them to index.html.

[00:09:30]
And load up my client side app, and let the client side router figure out to show them a 404 page or not. This will theoretically work, it does involve you playing a little bit fast and loose with HTTP status codes, right? Because you're gonna say, listen wherever they go, bring them to HT.html, and we'll figure it out later.

[00:09:53]
Which puts you in the precarious situation of saying, either almost everything is a 200, okay. Or 400 don't mean anything for a forest don't mean anything now, if that makes you uneasy we will get there, we will fix it towards the end. But we are going to live with discomfort for a little bit, and just figure out, how to mostly get it working.

[00:10:13]
And then improve, upon our solution as time goes on, so let's go ahead and let's get that in place. So for this we're gonna go back to S3, that's fine because we're waiting for our certificate to cook a little bit anyway. We'll go over to our bucket, and we've got a few different options here.

[00:10:45]
Well, lets go over to properties and down the bottom, we've got that. Bucket hosting, so we have that Index.html, we have the issue where, an error where should they go. Now we talked about it. So easiest way to do that right now, to get everything working just on S3 alone.

[00:11:05]
Would be to say, let's react Router handle all this, right? If it is a place they can go great, if not a place fine that too. So we can just put that in there, again, we will swap it out for a better solution in a little bit. But, that will work for now.

[00:11:24]
So now, no matter what, they will we go back to our page, and we refresh, we'll actually get the client side routing working as, we expected it. It will be a little squirrely in the network, right? You can see it's technically a 404, because it missed the S3 bucket.

[00:11:42]
But, the page that we showed them loaded up the client side app, and did the right thing. Again, suboptimal and we will make it more better as time goes on, but that is a piece of it.