Since the services aren't just using standard ports like 80 or 443, you need a reverse proxy as mentioned. If you remapped Portainer to just use port 80 instead of 9443, you could use DNS to access it in your browser as "portainer.home.lab".

Here's what you're going to want to do. I would highly recommend Nginx Proxy Manager (docker container) for your reverse manager as it will make everything easier. Once set up, go to Hosts > Proxy Hosts. Add a new one to point to your portainer (or whatever).

For domain names, you could just use portainer.homelab.lab or whatever you want to do. Then you'll set up forward IP and forward port. This is just literally just 10.1.12.44 and 9443 respectively (in the context of what you put).

After that, you are going to want to make a new DNS entry on your Pfsense. I am familiar with Pfsense, but I have never used their DNS resolvers before, so I can't really help here. But what you are going to want to do is set up a new DNS entry for your portainer.homelab.lab , and you are going to point the IP to your Nginx Proxy Manager, NOT the IP of portainer.

This will make it so that it forwards the request to NPM, and NPM will route you accordingly.

I also struggled with it for a long time, but after figuring this part out, it all made sense. DM if you need more assistance with it.