Self Hosting: Reverse Proxy Servers

Welcome to Syntex. On this Monday Sanity treat, we're gonna be talking all about self hosting and reverse proxy servers. If you've ever tried to self host anything yourself, you've inevitably hit the word a reverse proxy.

And we're gonna be talking a little bit about what a reverse proxy is, how you can do them yourself, and what they're useful in and some different ways of approaching them. My name is Scott Tolinski. I'm a developer from Vercel, and with me JS always is Wes Bos. What's up, Wes?

Excited to talk about reverse proxies. It's funny that we had Matt from Caddy on probably about 2 years ago, maybe even 3 years ago.

And we asked them, hey. Like, do you think it's even worth learning to how to manage a server? And at the time, it was everybody was, like, serverless everything, and it feels like we've we've really switched. You know? Like, it feels like everybody's talking about self hosting now. You know? And we're all back into, oh, I need a reverse proxy, so that's what we're here to tell you about today. Yeah. I I've been self hosting a lot Wes. I have, like, 10 things on my COOLIFY. I just migrated my entire COOLIFY

to an Yarn based server on Hetzner, and I I cut my bill down from $60 a month to €5 a month. So I don't know what that it translates to, but it's just about nothing. And, man, JS that great. The resource usage is like, so, you know, I have my analytics server. I got several back ends running on there, all kinds of stuff. And you could even host guess who? You could host Sentry on there if you wanna self host Sentry. Sentry.i0 is the perfect place to track all of your errors and exceptions.

And let me tell you, I was just on Sentry this morning because, we had a little bug and some code that I pushed. And I gotta say, every single time I come on here is a joy because it feels like there there's something new.

And even to the point where, like, it's auto tagging my things as high priority for me, it's been doing that for a little bit. But when I come in here and I see, alright, this is a high priority issue that's affecting most users that come to the site, now I know I gotta I gotta dive in here. I click on my error. I go into my error. And then what do I see? I see the exact line of code in which the error is happening. I've gotta say, you cannot beat that. So head on over to century.ioforward/syntax.

Sign up and get 2 months for free.

Alright.

Wes Bos, hit us with reverse proxy. What is it? It's a scary word, isn't it? It is. It it's especially the reverse part. You know? Like, normal like, the word proxy

in in general. Oh, that's kinda scary. You know? But reverse proxy?

Well, they go backwards on us now. Yeah. Yeah.

Reverse proxy is a web server that accepts incoming requests and sends them to the corresponding application server. So what that means is that you your application or your applications are generally have their own servers in them. Right? You you'll have an express app. You might have a Hano app. You might have a a WordPress PHP running. Those all have their own web servers. Right? But often, you will put another proxy server in front of those for a number of different reasons, which we're gonna explain today. So we'll talk about some of the examples real quick so you sorta can put them in your head while we're talking about the features. But most popular reverse proxies out there, probably NGINX and Apache.

Those things can be just regular web servers as well, but they are often used as reverse proxies.

Then we have my personal favorite, which is Caddy. Caddy Vercel is a Go based server, and, generally, you're gonna be putting that in front of your actual in our case, in front of a JavaScript application.

We also have Cloudflare Tunnels, which I've used quite a bit myself recently when I was getting my Coolify local. I installed Coolify on my Synology NAS, and then I wanted to have an external domain name for it. So I installed Cloudflare Tunnels on that. It was pretty cool.

But then there's also, like, other ones, ngrok, traffic.

There's a whole bunch of, other ones that are simply for local development, exposing it to the World Wide Wes, but I don't think we're gonna be really focusing on those right now. This is sort of, like,

production applications that need a reverse proxy in front of it. Yeah. Yeah. You know what? I I've used so many of these. I've used Caddy, and Caddy's great even for local stuff. Cloud for their tunnels like you mentioned. Man, I I use cloud for their tunnels all the time now. I think that's such a a neat tech, and and NGINX.

In fact, when I was just migrating one of my my servers because I had, like, an old server that I've been using to host a lot of stuff. Mhmm. All of the sites that I had hosted on that server were being done through NGINX and the reverse proxy system. And I I, like, got into my NGINX config files, and it was like, oh, man. I have not been here in a long time.

So, yeah, it is funny how we've kinda swept some of the stuff under the rug, but it's it's nice to be able to totally understand how it works. Mhmm.

So why do you need a reverse proxy? So probably the most common use case of a reverse proxy is to combine multiple servers into a single domain name. So for my course platform, I have I I have 3 applications for my course platform. I have 1 which is Express Vercel, and it runs the, like, the marketing pages and the checkout and all of that stuff. And then I have another one, which is, like, forward slash admin, which is a Next. Js application that is used to, do refunds and and change orders and all of the admin stuff that you do, right, back end tooling. And then I have another one, which is the the actual viewing experience.

This is a React application, which is, you Node the dashboard. You view all of your courses. You can get your receipts. There's progress tracking, all of that good stuff. Right? So, like, that's 3 things Yep. Running on 1 server, and and they all are generally going to be running on their own port number. Right? You you run 1 app on 444, another 1 on 222.

Sometimes you'll have multiple applications running on your server, and they all need to be proxied through a single application. So a reverse proxy will allow you to do things like forward slash admin will redirect to your admin application that's running on it it can even be running on a different server if if you really want to. Right? Or, if you visit courses.westboss.com, it's gonna redirect it to 1 application, whereas if you visit one of the course domain names, then it's going to redirect it to another one. So, basically, a reverse proxy will take in an incoming request and figure out which application it actually needs to and which server it actually needs to go because the second point is load balancing is if you have 7 or 8 servers that are running your application, you might want to redirect them to the different servers based on which ones are being used more heavily or which ones are closer to the actual user.

Yeah. And and you could think of it in that way kind of like a, like a traffic director. Right? Yes. It's the traffic director for your applications once those requests come into that main server. Right? Probably one of the biggest use cases is

if you are running multiple applications on a single server, you still want them to all be SSL, verified. Right? You still want them all to have s SSL certificate.

And in order to implement that, you can't tell you can't just redirect your users to port 8887.

First of all, because that bad URL, and second of all, because it's not going to be secure. The secure port on the browser is 443.

So you need every single request running through 1 port, 443, and that's where your proxy server will often take over the job of doing your SSL certificates, and Kaddy is really good at that.

Yeah. So I I host a lot of stuff I've mentioned before on COOLify, which is, like, kind of a host your own platform as a service type of Deno. And they use the traffic.

Did you say traffic traffic?

Traffic? I don't know how you say that. But Tray

traffic? Yeah. I've never traffic. I've never used it outside of a COOLIFY context, but it does look pretty neat. And in that regard, you know, if you don't want to, you know, write your own reverse proxy configs and stuff like that Mhmm. You know, that's where you're hosting your own platform as a service comes in handy.

Yeah. In the in the home server game, it's also really popular because you might have, like at least for me, I have a domain name for my home Vercel, and then I have, like, forward slash jellyfin, and that will that will proxy the application Jellyfin that's running on a specific port.

And then I'll have, forward slash what else am I running on there? Home assistant, and and that will proxy the Node assistant application. Right? You're you're running 7 or 8 applications on the server, but you want a single clean domain name for it. You can use reverse proxy for that. And Coolify itself implements that because there's a couple servers running on COOLIFY. There's there's the COOLIFY UI, then there's the COOLIFY API. They have a WebSocket API that's that's doing everything in real time, and those all need to be proxied through a single domain name JS well as if you want your application to be running at, like so you have your COOLIFY domain Node, like scottcoolify.com.

But if you want, like, if you implement if you install, Pocket Bos and you want it to be running at forward slash pocket Bos, that's again where the the reverse proxy will come in. And Coolify also has they recently rolled out support for Caddy as Wes, so you can choose which one you want. I switched mine to Caddy just because I'm more comfortable reading the generated Caddy config.

I haven't even had to look at the configs in in my Google Play. I do everything via, like, ClickOps. You know? You're just Yeah. Pasting in your domain. That's a cool thing too. You don't have to generate an SSL. You just paste in your domain, and all of a sudden, I have an SSL. I haven't even thought about it. Yeah. So Beautiful.

Another good use case for a reverse proxy is security. So this is something that Cloudflare does for you JS don't ever let your users know your true IP or don't ever let connections come through an IP address directly. Meaning that if somebody wants to DDoS you, they need to know how to access your computer directly.

And Cloudflare will obscure the IP address for you so that somebody will never actually know where you're where it's hosted. And then you can also use things like NGINX or Caddy or whatever to simply just shut down any traffic that's coming to the raw IP address, and that will stop it before it hits the resource intensive things like rendering HTML and database queries that that may be an issue.

Access management is is another one. You can simply just at a very high level, you can deny access if somebody doesn't have a specific cookie set, or you can do something like, I'm pretty sure this is what Sentry does. If you visit Sanity Scott io Mhmm. When you're logged in, it goes to the app. If you visit century.io when you're not logged in, it goes to the marketing website. Right? So, like, they obviously need a server with some logic on it there that that does that 1 or the other redirect based on if you have a cookie in there. And I I don't know what that is. I I'm I certainly could ask, but I'm assuming they have some sort of well, actually, let's let's check it out. Yeah. How do you check that out? You go to your network tab, and you will see in there Vercel NGINX. So often, the server will will show up as to what's in there. So they probably have some some logic in their NGINX config file that says if there is no Sentry logged in cookie or key or whatever is needed, then redirect them to forward slash welcome, which is where the marketing website lives.

Static assets. This is also a a really interesting one. So if you have a JavaScript application that has static assets, something like, some files, you got CSS, JavaScript images, often, it makes sense to don't route those requests through your JavaScript application.

You can simply just route them to the raw files on the server and just bypass the entire JavaScript application entirely. And that's a very common thing to do because things like NGINX and Caddy are extremely fast at getting a request in and sending the response. And if you don't have a JavaScript application where it's not necessary, those will be even faster.

And then, of course, you can add caching and routing to closest CDN servers at that point as well. So that's what a reverse proxy server does. Pretty handy. I certainly would recommend checking out Caddy if you ever oh, one one more thing I for totally forgot is that, running something like Caddy locally is really good because you can get Scott local host domain names with true SSL certificates, not the, like, it's it's h t t p s, but it's crossed out, and you have to, like, click the continue anyway. They'll give you, like, a proper locally generated SSL certificate, and then you can get, like, Scott local host. So that's how I I have, like, typescript Scott local host and and boss monster dot local host. And it's so nice to be able to have these, like, proper domain names locally and not have to rely on, like, what was the IP address or what was the the port number? You Node? Like, local host colon 8887, and then, like, another application uses that.

Also, Wes, service workers. If you're running your service worker in development for testing, it'll register to that local host warp. You load up another app, and next thing you know, like, why is this still broken? Oh, yeah. Service workers running. I I can't tell you how many support requests I've had where people send me. They're like, I started your app,

and this is what I'm seeing. And it's an application from a totally different course they were taking, but because we were running on the same port, they had installed service worker previously, and now they can't access my application because the service worker is is taking over. Then you have to guide them through the whole painful process of unregistering the service worker. Yeah. Unregistering it. So, yes, highly recommend. I I would say check out Kati.

That's definitely my favorite. Cloudflare tunnels is a very close second behind that.

Yeah. Sorry. I'm blurry right now, folks.

My, camera's choosing to focus on this water bottle over here instead of the face. Well, speaking of,

go to syntax.fmforward/shop, and, you can go ahead and buy yourself some of the syntax swag. We actually don't have the Yetis right now, because it turns out they're very expensive, and, we were selling them at a at a at a loss. But maybe we'll get some more of these in the future. But we got our we got the sick pick tee. We got the syntax deck. We got the can koozie.

All kinds of really neat stuff. Yeah. And just in general,

we're selling things as cheap as we possibly can because this store doesn't exist to make us a profit. This this store is, for us to be able to share fun things. So one last thing, guys. I was actually just looking up, Caddy and, WebSocket support because I knew there was, like, something crazy with Caddy and WebSocket support. Yep. And I find a a GitHub issue, Caddy reverse proxy CSS infinite loop.

And I scroll down and the the I read this post. Okay. Here's the fix, and then it has the fix. So okay. Okay. So now I have all the fix ready. And then I look up, and it was me. I posted this in 2021.

I read this whole thing, and I didn't notice it was me in in 2021. I thought I was gonna say me. That's great.

Yeah. That's I actually use Caddy to proxy my Veeet WebSocket server locally because I That's what it was about. Yep. Oh, yeah. Exactly. Yep. That's so funny. Yeah. We all the amount of times I find my own stuff or your stuff, pop up when I'm searching for something is hilarious.

Same.

Sick.

Alright. Thanks, everybody, for tuning in. We will catch you later.