Selfhosted

The DNS-01 challenge [1] allows for issuing SSL certificates without a publicly routable IP address. It needs API support from your DNS provider to automate it, but e.g. lego [2] supports many services.

I personally leave my Wireguard VPN always on, but as its only routing the local subnet with my services, it doesn't even appear in my battery statistics.

[1] https://letsencrypt.org/docs/challenge-types/#dns-01-challenge

[2] https://github.com/go-acme/lego

That's halfway correct - I'll try and break it down a bit further into the various parts.

Your subdomains are managed in using DNS - if you want to create or change a subdomain, that happens here. For each of your services, you'll create a type of DNS entry called an "A record", containing your service's full domain name, and the IP address of your reverse proxy (in this example, it is 10.0.0.1)

The DNS records would look like the following:

• plex.example.com, 10.0.0.1
• octoprint.example.com, 10.0.0.1
• transmission.example.com, 10.0.0.1

With these records created, typing any of these domains in a browser on your network will connect to your reverse proxy on port 80 (assuming we are not using HTTPS here). Your reverse proxy now needs to be set up to know how to respond to these requests coming in to the same port.

In the reverse proxy config, we tell it where the services are running and what port they're running on:

• plex.example.com is at server.example.com:32400
• octoprint.example.com is at server.example.com:8000
• transmission.example.com is at server.example.com:8888

Now when you type the domain names in the browser, your browser looks in DNS for the "A record" we created, and using the IP in that record it will then connect to the reverse proxy 10.0.0.1 at port 80. The reverse proxy looks at the domain name, and then connects you on to that service.

What we've done here is taken all 3 of those web-based services, and put them onto a the same port, 80, using the reverse proxy. As long as the reverse proxy sees a domain name it recognises from its config, it will know what service you want.

One thing to note though, reverse proxies only work with web-based services

Depends what you mean by same port. A reverse proxy would allow you to expose everything over 443 and then the proxy would route to particular app ports and hosts.

Accessed from the same port.

Each service runs/listens on its own port, including the proxy (typically 80/443). When you connect to the proxy using its port, it will look at the domain name you used and proxy your connection to the port for the service that name is setup for.

So when you go to expose these to the network/internet, you only have to expose the port the proxy listens to and the clients only ever use that port regardless of how many services/domains you host.

Edit: whoops, got a little bit sidetracked and didn't talk about cloudflare at all. I'll leave it up nonetheless as it contains info.

The reverse proxy only listens on port 80 and 443, so yes, all your services will be accessible through just one/two ports.

The reverse proxy will parse the http request headers and ask the appropriate upstream service (e.g. jellyfin) on localhost:12345 what it should send as a reply. Yes, this means that you need to have a http header so that the reverse proxy can differentiate the services. You don't need to buy a domain for that, you can use iPhone to make your made up domain map to a local IP address, but you need to call the reverse proxy as sub.domain.com. 192.168.0.123:80 won't work, because the proxy has no idea which service you want to reach.

I found it really easy to set up with docker compose and caddy as a reverse proxy. Docker services on the same network automatically resolve their names so the configuration file for caddy (the reverse proxy) is literally just sub.mydomain.com { reverse_proxy jellyfin:12345 }. This will expose the jellyfin docker, which is listening on port 12345, as sub.mydomain.com on port 80.

Yes, typically the proxy will listen on 443/80 and all the services it proxies to just use their defaults.

For example: emby.example.tld, port 443 > cloudflare, port 443 > your reverse proxy, port 443 > emby, port 8096

All the client sees is emby.example.tld on port 443 and the resulting web application, everything in between is transparent.

Another user already gave you the answer, but one thing to bear in mind is that Cloudflare only “speak” HTTP(S), and nothing else. So if for example you want to run Minecraft, CloudFlare’s free plan will not allow you to route it through port 80/443 as they don’t know how to “speak” the Minecraft protocol.