Transcription

Well, it's finally happened. After countless sleepless nights fueled solely by Red Bull and the fear of dying alone, you've finally finished your website, and it's just good enough to disappoint your family with, so you're ready to expose it to the world. But there's one problem. You don't want to host it remotely, because A. What even is that? B. You're a control freak. And C. You're cheaper than Mr. Krabs. So luckily, today, we are going to solve that issue by, ahem, properly, self-hosting our own websites. Okay, we're not actually using this one, I already have a server, so, ahem, alright. So you want to self-host a website. Now, this doesn't have to be a custom website that you developed, it can be a Nextcloud website, a Plex site, a WordPress site, pretty much whatever you want. And today, we're going to be doing that using Cloudflare and Nginx Proxy Manager, both of which are free. Now I did do a video very similar to this using PFSense and HAProxy as your reverse proxy, so if you're using PFSense, just stop here and go check out the video linked up here, but for all the other people that aren't using PFSense, which I know is a lot of you, this solution will work just fine. So there are four prerequisites you need prior to getting started. First one being a domain name. Now you can get your domain name from wherever you want, personally, I use Google Domains, it's a really easy UI, super easy to get signed up, you use your Gmail account, and it's about $12 a year, so a dollar a month, you'll be alright. Now if a dollar a month is too expensive for your blood, then there are cheaper alternatives, so sure, go ahead, but make sure you have a domain name. The second is a website. Now like I said before, this can be whatever you want, just make sure that it's running on your local server or any machine that you have it running, and that it has a proper IP and port exposed. Third is a Cloudflare account, and again, it's free, super easy to set up, all you have to do is create an account and transfer your name servers from your current domain provider to the namespaces that are provided by Cloudflare. It's really easy, Cloudflare has a tutorial to get you started, and it'll depend on your domain registrar, so just check with them on how to change your name servers. And the fourth and final thing you need is a machine running Nginx Proxy Manager. And your website and Nginx Proxy Manager can be installed on the same physical machine, you don't need two separate devices, you can have them both running in the same VM and the same Docker instance if you want, but just make sure you have that running in the same way you have the website running, with its own dedicated IP and port. So let's talk for a second about why you actually need this. So when you want to self-host a website, you want to expose that website to the entire world, meaning that anybody, no matter where they are in the world, can link directly to your website, which is hosted on a server in your parent's basement. Now you can give everybody your public IP address and expose port 443 and basically invite hackers directly into your house, but obviously I don't advise that. That is where having a domain and using Cloudflare come into play. So when you buy a domain and transfer the name servers to Cloudflare, you're basically saying whenever somebody goes to my domain address, direct it to Cloudflare and let Cloudflare handle where that goes. Cloudflare is then going to turn around and point directly to your public IP address, which is only exposed to Cloudflare, not the entire world. And once that traffic reaches your network, Nginx Proxy Manager is going to take it and then decide which service you want it to point to. What it's also going to do is encrypt all traffic using SSL certificates between your home network and the Cloudflare servers, meaning that you basically have end-to-end encryption without really having to do anything. So let's do that. Let's dive in and take a look at how I got this set up. So the first thing I want to show you is the actual website that I'm going to be exposing. And in this case, we'll be using a Guacamole instance running in Docker. And here you can see the site is hosted on port 9696. So if we go to our Docker IP address and 9696, you can see here is the Apache Guacamole website. Cool. We can access it locally, but that's not really the point of this video. The next step is to get Nginx Proxy Manager installed. And again, we've done this in Docker. You can do it whatever way you prefer. But I did it in Docker using Docker Compose, and I created a custom template over here in Portainer. And let's take a look at it. And it's extremely basic, extremely straightforward. And if you want any instructions, you can go directly to the Nginx Proxy Manager site, and it will give you instructions on how to do it in Docker or in Docker Compose. Here you can see I pretty much just copied this version, except that I'm using Docker Compose version 2.1, which really is no big deal. But this is it. The only real thing you can see that I've changed is what ports it's exposed on. So you can change this to whatever you want. Just make sure that you have ports 80, 81, and 443 exposed. And then on the left side is how you want them exposed in your network. So to the Docker instance. Once you have that created and running, we can go in here, and you'll see that I have Nginx Proxy Manager running on those exact ports. And the first thing you're going to do is go to the port you specified that's mapped to port 81. So in this case, it's 40,081, and it's going to ask you to log in. And the default credentials to log in, I think, are listed here. It is admin at example.com, and the password is changeme. And then when you log in, it'll prompt you for your actual email address and to change your password. OK, so here we are in the dashboard. And by default, you'll pretty much see zeros and nothing really here, but that's perfectly normal. OK, we're going to take a break from Nginx Proxy Manager for a little bit and step over into our router. So this step is going to be different for everybody, because not everybody has the same router or modem. So if you're using Linksys or using TP-Link or if you're using PFSense, this step is going to be slightly different for everybody. But just look up how to open ports on your specific configuration, and you'll get there. What we're going to need to do is expose ports 443 and 8080 to the outside world and make sure those are mapped to our Nginx Proxy Manager instance. So you can see here it's saying if the destination coming in is using HTTPS or 443, then take that, turn it around, and send it to this local IP address on this port, which again is our Nginx Proxy Manager on this IP address. Now remember, the port that we exposed before using Docker Compose is what we're going to use for 443. So again, let's look here. I am exposing 40443 to the internal 443 of Nginx Proxy Manager. So 40443 is what we will use for opening the port, which is what we've done here. So it's a long way of saying make sure 443 is mapped to the IP address of Nginx Proxy Manager and the port you used for 443. Got it? Good. And you want to do the same thing with 80. Now that that's done, let's step into our Cloudflare instance. So like I said before, just make sure that your domain is pointed to Cloudflare, and once you get that set up, you'll see a configuration similar to this. And you can see I'm using the domain mrballoonhands.com. Let me know down in the comments if you get the reference. So first thing we're going to do is make an API token that we will use later for SSL certificate. So to do that, click on your user profile up here, go to My Profile, go to API Tokens, and you'll probably see nothing here, obviously, if you haven't created one. But just go ahead and click Create Token, and then use the template for Edit Zone DNS. You can pretty much leave everything to default except Zone Resources, Include All Zones. So assuming you're not sharing this account with everybody, or if this is just an individual account, this should be fine. You can continue to Summary and Create Token, and when you do that, it will give you a long string of characters. Make sure that you save that somewhere, because I don't think there's a way to view it after you've created it. So keep it in a safe place. Okay, now that we have that, we can go over and edit the DNS of our site. Just click on DNS over here, and this is where you will modify how your subdomain points to your actual physical home public IP. So all you have to do is basically create an A record with the name of the subdomain that you want to use, and point it to your public IP address. And that's what you see here. So I have a couple that I was testing out. The top one is the one we are going to use. We're going to call it Gwok. So the URL we will be using is gwok.mrballoonhands.com, and all we've done is click Add Record, type a, the name would just be Gwok, and the IPv4 address is your public IP address. If you don't know what it is, just go into Google and type what's my IP, it will give you your public IP address. And for this proxy status, leave this to Proxied, and I know a lot of people have issues with Cloudflare and Nginx Proxy Manager with this proxy status and whatever, but with the way we are doing it, we'll leave this to Proxied. Okay, let's stop and take a breather for a second, and talk about where we currently sit. So you have your domain, your domain is using the name service of Cloudflare, so whenever any traffic comes in using that name, it will go through Cloudflare, and if the A record exists, it's pointed directly to your home network using your public IP, then since we opened ports correctly and forwarded them, once the traffic gets to your home network, it's pointed directly to Nginx Proxy Manager. So all that should be flowing kind of fine, but there are some other steps we need to take. We need to set up SSL, and we need to tell Nginx Proxy Manager where to point. So let's do that. All right, back in Nginx Proxy Manager, we're going to go over to SSL Certificates. Now you can see I have a few here that I've tested with, but let's just take a look at this one. I guess it's not letting me, so go over here to Add SSL Certificate, and you're going to click Let's Encrypt. And for domain names, you can list different domain names that you want to use, or you can use a wildcard, or you can have one certificate per domain name, whatever you want. But I just used a wildcard, so I did wildcard.mrballoonhands.com. And what you're going to want to do is use a DNS challenge. This will make it much easier and much more reliable for Nginx Proxy Manager to talk to Cloudflare and make sure that the servers are doing their proper handshake and checking out with each other. So go down here and select your DNS provider, and that's going to be Cloudflare. And all you have to do is replace this string right here with the API token that we created earlier. Once you do that, and you've set your email address, go down here, agree to the terms, and click Save. When you do that, you should see a certificate created here, and cool. And the last and final step is to go over to Hosts, Proxy Hosts, and Create a Proxy Host Source. So what this is doing is basically saying, when we have traffic coming in, where do we want to turn and point it on our local network? So if you remember from before, we are using our guacamole instance, which was on the same IP as Nginx Proxy Manager, but just using port 9696. And there it is. So if we go back here, you can see I'm doing that here. Now, obviously, you won't have this created yet, so you're going to want to add proxy host and domain names being the A record that you set it up before, combined with your domain name. So remember, we use guac.mrballoonhands.com. Scheme is HTTP or HTTPS. Now, this will depend on your site. Now, guacamole does not use self-signed certificate. It uses HTTP, so unencrypted. So we will select HTTP. If you're hosting a site that uses certificates, then select HTTPS here. Just know that using HTTP is perfectly fine. The traffic between Nginx Proxy Manager and your site locally won't be encrypted, but the main traffic between Nginx Proxy Manager and the outside world will be encrypted. So unless somebody is literally in your house on your local network, intercepting the packages between Nginx Proxy Manager and your website, then you're good. So yeah, HTTP, our IP address, and the port, 9696. You can turn on cache assets. You can turn on WebSocket support. The only one I really use is block common exploits. You can read about all the fancy things it does, but I would just recommend leaving that on. Then you're going to go over to SSL, select the certificate we created earlier, wildcard mrballoonhands.com, force SSL, meaning that it will use HTTPS all the time, and click save. You should have something that looks like this. Now one thing I forgot to mention, let's go back to Cloudflare, is you're going to want to go into SSL TLS and make sure this is set to full. And if full doesn't work, try full strict, but one of these should work. So basically this is saying encrypt all traffic between the Cloudflare and your home network. So that's what you want to have. And then go over here to edge certificates and select always use HTTPS, so that any HTTP that tries to come in will automatically be directed using HTTPS and encrypted. All right, so if we did everything correctly, this should work. So let's try it out, HTTPS, colon backslash guac.mrballoonhands.com. And there we go. We are exposed to the outside world. We've used our domain with our A record, and we are seeing our locally hosted Apache Guacamole website. So yeah, that's pretty much it. We can now host whatever website we want, assuming it uses your standard ports 80 or 443, and expose it to the outside world. So you can now host your website and show it off to all your friends, and yeah, they'll be super impressed. I'm totally 100% sure of it. But that's it. I hope this helped you out. I hope it was informative. I hope at the very least it was entertaining. So if it was, drop a like below, and I want to give a shout out to my Patreons who have been supporting me over there on Patreon. You guys are awesome. Also a shout out to everyone in the Discord. We have an awesome community over there. Everyone in there is super nerdy and willing to help out and talk about tech in general. So if you want to stop by, check it out. Link is in the description below. That is it. I appreciate you all if you've made it this far in the video. Thank you so much for watching, and I will see you in the next one.