Self Hosting: Reverse Proxy Servers

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.

Sign up and get 2 months for free.

a month. So I don't know what that it translates to, but it's just about nothing. And,

Alright.

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

is the perfect place to track all of your errors and exceptions.

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.

And even to the point where, 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

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?

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.

to an Yarn based server on Hetzner, and I I cut my bill down from $60 a month to €5 Same.

and then, like, another application uses that.

some files, you got CSS, JavaScript images, that's what a reverse proxy server does. Pretty handy. I certainly server, you still want them to all be SSL, in there Vercel NGINX. So often, syntax.fmforward/shop, and, you can go ahead and buy yourself some of the syntax swag. We actually don't have your proxy server will often take over the job of doing your SSL certificates, reading the generated Caddy config.

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 which application

certificates, with some logic on it there that that does that 1 or the other

would recommend checking out Caddy if you ever oh, one one more thing I for totally forgot is that,

at that point as well. So 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 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

Static assets. This is also a a really interesting one. So if you have a JavaScript application 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 then, of course, you can add caching and routing to closest CDN servers 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.

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 that has static assets, because it turns out

progress tracking, all of that good stuff. Right? So, like, that's 3 things Yep. Running on 1 server, the amount of times I find my own stuff or your stuff, 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, redirect them to the different servers based on which ones are being used more heavily or which ones are closer to the actual user.

to combine multiple servers and then I wanted to have an external domain name for it. So I installed Cloudflare Tunnels on that. It was pretty cool.

which is a Next. Js application that is used to, unregistering the service worker. Yeah. Unregistering it. So,

a single

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.

into recently when I was getting my Coolify the application 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 I don't think we're gonna be really focusing on those right now. This is sort of, like, application server. So what that means is that you your application or your applications So you need every single request running through 1 port, 443, will take in an incoming request running something like Caddy locally local development, exposing it to the World Wide Wes, but

you Node the dashboard. You view all of your courses. You can get your receipts. There's 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

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, 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.

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

pop up when I'm searching for something is hilarious.

we were running on the same port, there's a couple servers running on COOLIFY. There's there's the COOLIFY UI, 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 and this is what I'm seeing. And it's an application from a totally different course they were taking, but because 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 is really good because you can get Scott local host domain names with true SSL often, it makes sense to don't route those

infinite loop.

Sick.

And I scroll down and the 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

yes, highly recommend. I I would say check out Kati.

Caddy

My, 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.

they're very expensive, 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 And then I'll have, 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.

Also, Wes, man, JS that great. The resource usage is like, And

All kinds of really neat stuff. Yeah. And just in general, at least for me, I have a domain name for my home Vercel, We also have Cloudflare Tunnels, which I've used quite a bit myself applications running on your server, and they all need to be proxied something like,

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.

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

and,

IP address for you so that somebody will never actually know Another good use case for a reverse proxy is security. So this is something that Cloudflare does for you the

your network tab, and you will see

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 But if you want, like, if you implement

And Cloudflare will obscure And in order to implement that, you can't tell you can't just redirect your users to funny. Yeah. We all Jellyfin that's running on a specific port.

redirect

users know your true IP and figure out in in general. Oh, that's kinda scary. You know? But reverse proxy? There's a whole bunch of, at, like so you have your COOLIFY domain Node, like scottcoolify.com.

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, 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.

it before it hits the resource intensive things like rendering HTML and database queries that that may be an issue.

they have some sort of well, actually, let's let's check it out. Yeah. How do you check that out? You go to You can simply just route them to the raw files on the server

JS don't ever let your

the server common use case of a reverse proxy is

reverse proxy configs and stuff like that Mhmm. You know, that's where you're hosting your own platform as a service

traffic? 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

you know, write your own

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,

Did you say traffic traffic?

verified. Right? You still want them all to have s SSL certificate.

Yeah. In the in the home server game, it's also really popular because you might have, like redirect them to forward slash welcome, which is where the marketing website lives.

on a single

comes in handy.

and that's where behind 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.

port 8887.

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

Reverse proxy is a web server that accepts incoming requests and sends them to the corresponding and Kaddy is really good at that.

another

for and, That's definitely my favorite. Cloudflare tunnels is a very close second 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 other ones that are simply for Sometimes you'll have multiple 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 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, to the raw IP address, and that will stop forward slash what else am I running on there? Home assistant,

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

proxy server in front of those

most popular reverse proxies out there, probably NGINX and Apache.

Welcome to Syntex. On this Monday Sanity treat, we're gonna be talking all about

you've inevitably hit the word a reverse proxy.

self hosting and reverse proxy servers. If you've ever tried to self host anything yourself,

Pocket Bos and you want it to be running at forward slash pocket JS well as 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 checkout and all of that stuff. And then I have another one, which is, like, forward slash admin,

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

which one you want. I switched mine to Caddy just because I'm more comfortable This is a React application, which is, will redirect to to be running

and then I have, like, forward slash jellyfin, and that will that will proxy the Yetis right now,

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 you might want to they had installed service worker previously,

domain name when you're not logged in, it goes to the marketing website. Right? So, like, they obviously need a server But then there's also, like, other ones, ngrok, traffic.

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 if you want your application 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, 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 local. I installed Coolify on my Synology NAS,

itself implements that because 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.

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.

I I, like, got into my NGINX config files, and it was like, oh, man. I have not been here

and the reverse proxy system. And

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,

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.

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 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,

in a long time.

and and NGINX.

if you are running multiple applications

traffic director. Right? Yes. It's the traffic director for your applications

through a single application. So a reverse proxy will allow you to do things like forward slash admin

like a

once those requests come into that main server. Right? Probably one of the biggest use cases is

Yeah. And and you could think of it in that way kind of like a,

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 Traffic? I don't know how you say that. But Tray go to So why do you need a reverse proxy? So probably the most if you visit courses.westboss.com, requests through your JavaScript application.