Jamstack Explorers

Exploring Netlify Redirects with Phil Hawksworth

Migrations with Proxies

Redirects can also be used as a tool for gradually migrating to Netlify, or for adding a little Jamstack to your existing infrastructure.

We'll explore:

  • Wildcard proxies and shadowing
  • Incremental migration to Netlify

Video transcript

It can be challenging to plan to move any websites from one piece of hosting infrastructure to another, whether that's a small site or a much larger sites with all kinds of complexity, in the hosting environment and all kinds of complexity in the code. If we want to move from one place to another, this is a place that Netlify redirects can help us. And we'll look at that now by looking again at proxies and rewrites and see how that couldn't give us control to really manage how we migrate a legacy site into Netlify with complete control down to one page at a time should we, should we so wish.

Let's have a look at what that means for us, so at the moment, we might have a hosting setup where our clients are connecting , making HTTP requests to our infrastructure and getting views back in return.

We don't really mind what's happening within this bit of infrastructure at this could be any platform at all. There could be all kinds of complexity within there. What we care about is that there's a URL that the client's web browser hits and gets responses back in return to those requests.

How then might redirects help us to migrate gradually across to Netlify? Well this is the situation we really want to be in. We want to be able to serve all of our site from Netlify directly from our pre-generated site, from my Jamstack site direct from Netlify. Netlify itself as we've, we've started to see can be running builds and deploy that to the CDN to get served.

What we really want is to have the published public address of our site, that the client needs to request, point first to Netlify to get served from there, but then should there be anything that we can't serve directly? We want to pass that request through to the existing infrastructure and then return that to the client. And this is what we're going to set up. This is exactly what we're going to do by adding some redirect rules here, that are deployed it Netlify's edge network on the CDN. So that every request will come here and only those that we can't satisfy directly from our site that we're moving into Netlify will just simply get passed through to the existing infrastructure and get serviced that way.

This means that we can add as much or as little, as gradually, or as quickly as we like to this environment, Leaving in place. What was there before to be able to mop up all of the unsatisfied requests until we can satisfy everything from this environment. Sounds like it might be quite complex to do, but in actual fact we've already seen the building blocks for this. So here I have another site . This site is very, very simple at the moment. There's this netlify.toml, which is doing nothing but saying, this is the directory that I'd like to publish to the CDN.

It's another dist folder. We're going to take a look at that. There's nothing in here whatsoever. What we're going to do is we'll first of all, add a redirects rule and then we'll start bringing content into our site to be published from this dist folder so that we can then be serving that . Where should we migrate from? That's the first question. Well, rather than create an example site and then migrate across to that, let's use something that exists. That's you something, a site that I particularly adore.

This is CSS-Tricks. Now we're not really migrating everyone off of CSS-Tricks onto a replica that we're going to create, but there's still serves as a perfect illustration. Because what we'll do is we'll use this as a candidate for the existing site that we want to move to a new hosting platform. Realistically, we're going to be leaving that just where it is. But for demonstration purposes, we'll start to add a layer in front of this that we can then be taking over.

Okay, so what should we, what should we do here? Well, let's first of all, get this serving from our new site. Well, we can do that with a redirect. So our now familiar redirects a section in our net ify.toml which URLs should we have this redirect rule apply for well, we'll have that for very request that comes into the site where is it going to route to? It's going to route to a CSStricks.com. And that wildcard, we want to pass that on with a splat. So every request we want to be passing on the details of that request to CSS-Tricks.

We're going to do this with a rewrite. or a proxy. So that means that we'll be returning a 200 response code. And currently. every request , that comes to our site will pass directly along.

Let's test this out first of all, by doing a quick deployment using Netlify deploy. And send that straight to production.

And the only thing that's really been deployed here since we've got no content and this folder is, is our redirect rules. So let's go and take a look at that. There we are, so. there's our new site that's being served from Netlify's CDN. But since every request that's made up in this page, can't be satisfied by Netlify will pass that directly along with passing that through we're rewriting to CSS-Tricks and passing on the the details of the request that we're making through this wild card and this splat.

And we can see that the site looks as it should just be served from, from this domain now with any requests that can't be satisfied, which is all of them, for the assets at their site being redirected through to CSS-Tricks. If we navigate around through the pages, which have got relative URLs, we'll see that everything works and continues to work as expected. We're still serving from the original hosting infrastructure, but now the requests are being routed first through the Netlify CDN to the site that we just created.

Okay. So how then can we start to prove that we can take over or migrate to Netlify hosting infrastructure based on these? Well, let's make a change to this homepage. How can we possibly do that? Of course, this doesn't live in our infrastructure. So let's make a copy of this and start serving it from our infrastructure. We're going to use good old view source for that. I'm going to completely take the index.html file here, wholesale add it to our, to our, dist folder here, index.html.. here we are, we have our pasted, the entire entire thing in there. let's see this. Let's make sure that we can prove that where we're serving this from that and find out rather than directly from CSS-Tricks, let's update this title. I'm going to just search for that, it can. In this page.

So I can find that. Here we are. So I think, yeah, this is the thing that we might want to take over. Serving directly from Netlify, woohoo... okay. So if I was to save that now and I will do another deploy.

What we should see now, is that any URLs that can be satisfied within Netlify will be, and the only thing we have is this index.html. Everything else will be passed through, so if we refresh this page now, Here we are. We see we've got a slightly different page being served. Now this is our index.html that we have in our new site. Everything else, including all of the assets, all of the different pages, they're all being passed through to the existing infrastructure.

So it's actually as simple as that to start planning, to migrate from existing infrastructure over to a new hosting environment. This redirect here, is the key to everything and the ability to rewrite requests that can't be satisfied by default because of the way that Netlify redirects, perform this shadowing process and only serve the assets that they can see before passing things through to redirects. This is the key to a smooth migration process.

We could be as granular as we like on here, starting to decide which aspects of our existing site we wish to pass through to new infrastructure, whether we want to do that for everything, or if you want to be very targeted. And it really means that we can start planning a migration process and start moving to the Jamstack and moving to Netlify infrastructure very gradually in a very controlled manner without disrupting the existing infrastructure.

So it's a useful tip. We'll look at some more redirect magic in another stage. 📍


your progress