Introduction: Securing Open WebUI
Setting up a domain name and SSL for Open WebUI, that's what we're doing here. Now Open WebUI, it's amazing. It's one of the best ways to self-host your AI and connect it to other AIs like ChatGPT, Gemini, Grok, Claude. It gives you control, but you know what's not great about Open WebUI? It doesn't have built-in SSL, which makes it kind of hard to get your own domain name, add an SSL certificate, and make it look pretty and secure for everyone that wants to use it in your group, your people.
In this video, we're going to tackle that, and it's going to be kind of fun because we're going to add some extra flavor to it. Here's what we're doing. By the way, I'm Network Chuck, welcome to my channel. This is my second channel. If you haven't subscribed yet, hit that subscribe button, please. And please make sure you hack the YouTube algorithm, hit that like button, notification bell, comment, subscribe. You got to hack YouTube today, ethically of course. Anyways, Open WebUI.
This tutorial assumes that you already have this sucker set up. And if you have no idea what I'm talking about, go watch this video right here. I'll walk you through setting it up and we'll get you to this point. And actually, you're probably jumping here from that video. Hi. Now, you'll have Open WebUI installed on some type of server, and you'll access the server by navigating to its IP address. For me in my example, mine is 185.28.22.4.
The 3-Step Plan & Prerequisites
This is a public IP address that I have through my VPS hosting at Hostinger. Now I can access my server just fine going out to 185.28.22.4 port 8080 and boom, I'm accessing Open WebUI. Not ideal. So our goal here is to remove that layer of frustration and have it to where our domain, let's just say ilovebernardhackwell.com, is going to our Open WebUI server. And that's our first step. We need to acquire a domain name if you don't already have one.
Step two, we want to make sure that when people go to our website, it's nice, safe, and secure. And that's going to involve an SSL certificate. Cloudflare is no better place to do that. And while getting your domain name is going to cost you just a little bit of money, Cloudflare is completely free and will offer a few more security features that you probably don't care about right now, but you'll be happy they're there. And finally, number three, this one's going to be pretty fun. We're going to set up what's called Nginx Proxy Manager. What is that? We'll cover more about that when we get to step, just know it's not crazy. I'll walk you through every step and it's going to provide some other opportunities that you may not be aware of now.
Asterisk assumption. I'm going to be assuming right now that you have a public IP address we can use. If you set up an Open WebUI server in your house on a laptop or something and it has a private IP address like 192.168.1.43 or 10.7.1.120, this scenario will not work for you. That'll have to be another video. Totally possible, but this will not work. You need a public IP address. Probably your situation is going to be hosting a VPS in the cloud, which is one of my favorite ways to host my services, especially things I'm going to be just kind of testing or providing to my family and friends as a service.
Acquiring a Domain with Cloudflare
All right, let's work on step one, getting a domain. Now you can buy a domain from many places. You can get one from Hostinger, the place where I'm hosting my VPS, or this is my preferred method: we can do it right from Cloudflare. We're already going to be using Cloudflare for our SSL and our WAF, or our web application firewall, but we can also buy a domain from them, which is nice. One-stop shop. So go sign up for a Cloudflare account, just go to cloudflare.com. You'll eventually get to a place where it's like, hey, do you want to add a domain? Do you want to buy a domain?
I'm going to add a domain right now for me. And actually, it's like, add an existing domain or register a new domain. That's what I want to do right now, let's go. I'll search for one: ilovebernardhackwell.com. Let's see if it's there. Got it. And tell you what we'll do... Gosh, .tech is expensive. Have any cheaper options? Ah, .com is fine. I'll purchase that and I'm ready. I'll click on Manage my domain. And actually from here, I'll click on Update DNS configuration because that's what we're going to be messing with right now.
Now real quick, if you already had a domain or you bought your domain through another registrar like Hostinger or GoDaddy or something, the process might look like this. I'm going to open up a new window real quick. You would add a domain, enter an existing domain like mycooldomain.com, you would choose the free option, the free plan. And then if you click on overview, they'll give you instructions to set up Cloudflare as your name server on your provider. Now this is not my domain by the way, I just totally entered it randomly, and it's owned by GoDaddy. So if you would go out to GoDaddy and change your name server to these servers, good old Jaden and Pablo, and once Cloudflare recognizes that that is your name server now, it'll show up here and you'll be able to do everything that we're doing right now.
Configuring DNS Records in Cloudflare
So now back to my new domain, I need to manage my DNS and look at my DNS records. And my goal here is to point this DNS name to my VPS, my server, the IP address I have. So we're going to go to Hostinger real quick and locate my IP address, which is this guy right here: 185.28.22.4.
I'll get back to Cloudflare and I'm going to add a new DNS record by clicking on Add record right here. This will be an A record. Leave it there by default. Now we're actually going to add two DNS records. First, we're just going to put an at symbol, which means when someone goes out to ilovebernardhackwell.com, it's going to go to somewhere. In this case, it's going to go to our VPS IP address. That's all we need. Click on Save at the bottom right.
Then we're going to add one more. Add record. This time for the name we're going to do an asterisk. And notice it kind of changes what our domain looks like right here giving us an example, *.ilovebernardhackwell.com. This enables us to have any subdomains. So for example, what we might end up doing, and we will end up doing, is saying like ai.ilovebernardhackwell.com, the AI being a subdomain and you can make that whatever you want: AI, Terry, open-web-UI, it's all covered by this asterisk. It's a wildcard saying whatever subdomain you have, it's going to go to the same address that we put in right now, which is our VPS server. Boom, right there. Click on save, and that's all we have to do in the Cloudflare part. That's done.
Installing Nginx Proxy Manager with Docker
Now time for the Nginx Proxy Manager. For that, we're going to get back to the server that is hosting our Open WebUI. For me, this is my VPS that I set up in Hostinger. You want to log into the terminal. You can use your local terminal app, just SSH into your server, or right here, I have a browser terminal. I'm going to use that for easy stuff. I know, why is it like that? So I'll click on browser terminal, getting me to the CLI, my favorite place to be.
The first thing we'll do is make a new directory with the command mkdir. And don't worry, this is going to be very simple, very quick. We'll make a new directory and we'll call it npm for Nginx Proxy Manager. Boom. And we'll jump into that directory or change our directories by typing in cd npm, just like that. Now we're in there. And now we'll create a new file. We'll use the best text editor in Linux, period. It's called Nano. nano it'll create a new new file called docker-compose.yml. This command will not only create a new file, but it will jump us in there real quick so we can edit some stuff inside. I don't know why I said that weird. Bam, we're inside.
Now what we're going to do is, and I'll have a link below on this GitHub page, we have some config, this Docker Compose YAML code. We'll copy this, go over to our terminal, and paste that right in. That's it. We'll hit Ctrl+X, Y, and Enter to save. If you type in ls we should see our new file right there. And now with just one more command, we're going to spin up Nginx Proxy Manager. It's so stinking cool. You ready? The command will be docker-compose up -d. Ready, set, don't blink, it's going to be fast. Go. We'll take a little coffee break while it's building our stuff for us. And that's it.
First-Time Login & Configuration
If we type in docker ps, we can see our running Docker containers, and I can see right here there's my Nginx Proxy Manager, created 5 seconds ago and it is up for 4 seconds. It's kind of trailing down there wrapping around. So now I've opened up a new tab, I can go to my IP address and then the port will be port 81. So :81. Nginx Proxy Manager. There will be a default login. It's right here: [email protected] and the password's changeme. And once you're logged in, it'll prompt you to change that mess, which you definitely should.
All right, we're almost there. Now, by the way, having Nginx Proxy Manager set up here on your server, it's going to unlock so many fun things for you. You can spend time learning it or just follow along with what I'm doing and leave it alone; it'll still do its job. Now, we're going to do one thing. We're going to add a new host. So click on Host right here, and then we'll select Proxy Host, and then we'll add a new proxy host by selecting by selecting this button right here. Lots of bells and whistles, lots of options. I'll walk you through the best stuff for you right now.
The first thing we'll do is give ourselves an easy way to access Nginx Proxy Manager with our domain name, just kind of show you what it feels like. So here I'm going to type in ilovebernardhackwell.com, the domain name I just bought and set up through Cloudflare. Just select it when you type it in, it'll fill in the field right here. The scheme will leave it HTTP, and then for the forward hostname or IP, we'll just put in localhost because we want it to actually point to itself, and then we'll say Port 81 because that's where our Nginx Proxy Manager admin interface is running. That should be all we need. I do like to check websocket support, just in case, and then click on Save.
Creating the Open WebUI Proxy Host
Now check this out. If I go out to a new tab and I type in ilovebernardhackwell.com, boom, Nginx Proxy Manager just like that. It's so quick. And then this is our last step. I think we're almost done.
We're going to add one more proxy host. So click on Add Proxy Host. This time it's going to be our subdomain, whatever we want. We can make it up right here. For me, I'm going to say ai.ilovebernardhackwell.com. I'll make sure I'm doing the same thing I did before. And for the forward hostname/IP, I'm going to grab our public IP address from Hostinger here, and whatever yours is for your VPS, I'll paste that right in there. And then we'll put the port that we want it to access for Open WebUI. The default port is 8080. That's all we need. We'll click on websocket support and then click on save.
So now, moment of truth. I'll open up a new tab. I'll go to ai.ilovebernardhackwell.com. Notice I'm not going to specify any ports because Nginx Proxy Manager is taking care of that for us. Ready, set, go! And it just stinking works. If I go up here and verify my site information, look at that, connection is secure. Let me get logged in, and just like that, things are working.
Conclusion
Beautiful, nice, safe, and secure. And again, if you're wondering, Chuck, I don't know what Open WebUI is, which I'm very curious why you're watching this entire video if you don't know what it is, but I appreciate you. Go check out my other video where I walk you through setting up Open WebUI. I show you how to do it in a VPS, which we covered right here, and also I showed you how to do it in a Docker container on-prem right here, which is like somewhere on your in your house or on your laptop on a Raspberry Pi.
And also talk about how you can run local AI models, which is a very cool thing you can do, one of my favorite things. But also Open WebUI can connect to the big models out there like ChatGPT, Claude, Gemini, Grok via API keys. A ton of benefits from doing that. You're not paying for a monthly plan, you're doing a pay-as-you-go thing with API keys. Oh so cool. Anyways, that's the video. I'll catch you guys next time.
