On Cloudflare, you’ll want to set a record to point any relevant subdomains to your current WAN IP address. IPv4 will be an A Name record. IPv6 would be an AAAA Name record, but I’m not going to deal with IPv6 for this…

So for instance, maybe you have a peepee.example.com subdomain, a poopoo.example.com subdomain, etc which all point to your WAN IP address. That will basically tell Cloudflare’s DNS to forward any traffic for those subdomains to your WAN IP.

Next, you’ll want to set up a reverse proxy service. This will be something like Nginx Proxy Manager, Caddy, etc that you run on a device on your LAN. It can even be on the same machine running your various services. The big reverse proxies all offer Docker images, so you can incorporate it directly into an existing Docker stack if you already have one. Personally I use NPM, but Caddy is also very popular.

You’ll tell this reverse proxy “when you receive valid traffic addressed to {subdomain}, forward it to {relevant service on your LAN}.” You can also set some additional options for each subdomain, like automatically upgrading to https. For instance, maybe peepee.example.com forwards to 192.168.1.100:42069 on your LAN, and is configured to automatically upgrade any http traffic to https, and to require https.

You can also set up automatic TLS certificate renewal, so https traffic can be properly encrypted. The reverse proxy will need an API key, and it will allow the service to automatically check expiration dates and pull a fresh TLS cert for your domain if the date is coming up soon.

You’ll probably want to use a wildcard certificate, (basically *.example.com) because the TLS certificates are open to the public. So if you do individual certs for all of your various services, bots will scrape the public records and you’ll inevitably get a lot of bot traffic probing your various subdomains. A wildcard domain usually means the bots hit the standard example.com and www.example.com first, which makes them super easy to detect and block. I even have rules set up to automatically block anything that tries to access my www subdomain, because I specifically don’t host a landing page and don’t have anything available there. So I know that any traffic hitting that www subdomain is a bot trying to access common subdomains.

Next, you’ll want to forward ports 80 and 443 to your reverse proxy. Port 80 is the standard port for http traffic, and 443 is the standard port for https traffic. These will be the ports that your reverse proxy actually receives the traffic on, before forwarding it to the various services.

Finally, for some ease-of-maintenance, you may want to consider adding a DDNS service (like Cloudflare-DDNS) to your docker stack. This will occasionally check your current WAN IP, and update it with Cloudflare if necessary. For example, if you have an outage and your router gets a new WAN IP when it boots back up again. Normally you would need to manually go to Cloudflare and update the IP info to point at your new address. But DDNS does that automatically.

The way traffic flows when it is all set up is along these lines:

1. A device wants to access your service at peepee.example.com. It doesn’t know where to find that site, so it asks a DNS server.
2. Cloudflare has told all of the various DNS servers “hey, peepee.example.com can be found at {your IPv4 WAN address}”.
3. The device follows that DNS record, and attempts to connect to your IPv4 WAN address, on port 80 or 443. For this example, let’s say it tries to connect on port 80 for standard http traffic. The device knocks on port 80’s door and says “hey, I’m here to access http://peepee.example.com/.”
4. Your reverse proxy checks the configured list, finds the valid peepee.example.com subdomain, finds it has a valid TLS cert, finds it is configured to automatically upgrade to https, and responds “Yes, please upgrade to https. Http traffic is not allowed.”
5. The external device knocks again, this time on port 443’s door. It goes “hey, I’m here to access https://peepee.example.com/. Your reverse proxy goes “thank you, here is the TLS cert and my half of the TLS security handshake.”
6. Your external device uses the data in the TLS cert to validate and complete the TLS handshake with the reverse proxy, and the traffic between the reverse proxy and your external device is now encrypted with https. Your device gets the nice little “secured” padlock icon in your browser. Because the traffic is encrypted, a malicious actor may be able to tell what kind of info you are passing (for example, a video stream will likely have a pretty obvious pattern) but they won’t be able to see what specific data you are passing. They may be able to tell that you’re streaming a video, but they won’t know which video specifically.
7. The reverse proxy forwards the traffic to the service, configured at 192.168.1.100:42069.
8. Your service does not ever know the device is being accessed via WAN, because (as far as the service can tell) the traffic is coming from your reverse proxy (also a LAN device). So any “pay to use WAN” services will continue to work for free.
9. The external device never gets access to info like the specific LAN IP or port number, because it only has access to the reverse proxy. All of the traffic is passing back and forth between the reverse proxy.

But notably, keep in mind that the reverse proxy didn’t do any actual user authentication. If your service has a weak password, a reverse proxy will act as a gateway for any potential hackers to gain access to the service. And any vulnerabilities in the service will still be accessible via the reverse proxy, because the reverse proxy is simply making sure the request is valid, and then passing the traffic back and forth. It isn’t actually inspecting the content of that traffic, so it’s not going to stop things like attackers.