Cloudflared tunnel for hosting Multiple Domains on a single PC

Question

I have a Mac Mini that I have installed XAMPP (Apache+MySQL). And I have configured with cloudflared tunnel and works with a single domain website.

However, I have trouble to serve multiple different domains with CloudFlared Tunnel.

Have anyone tried to configure multiple domains on a single PC using CloudFlared Tunnel ? If so, can you explain how it is done ? Thanks.

UPDATE 1:

Goal is a single tunnel for multiple domains, each domain serves a different site. Sample configuration file (single tunnel) ~/.cloudflared/config.yml:

---

tunnel: TUNNEL_ID credentials-file: /path/to/credentials_file/TUNNEL_ID.json

ingress:
 - hostname: domain1.com
   service: https://www.site1.local:443
   originRequest:
      noTLSVerify: true
 - hostname: domain2.com
   service: https://www.site2.local:443
   originRequest:
      noTLSVerify: true
 - service: http_status:404

The above config file works for the first domain which serves site1.local. However, the second domain always serve site1.local instead of site2.local.

UPDATE 2:

Unable to assign specific port (in this example it is 7443) for the domain. returns this error ERR_SSL_PROTOCOL_ERROR. FYI, I am using MacMini M1, XAMP (with Apache).

httpd-ssl.conf file:
---------------------
Listen 7443

<VirtualHost _default_:7443>
    ServerName www.site1.local
    ServerAlias *.site1.local
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/site1"
    <Directory "/applications/XAMPP/xamppfiles/htdocs/site1">
        Options Indexes FollowSymLinks ExecCGI Includes
        AllowOverride All
        Require all granted
    </Directory>
    
    SSLEngine on
    SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/server.crt"
    SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.key/server.key"
    ErrorLog "/Applications/XAMPP/xamppfiles/logs/mysite-ssl-error_log"
</VirtualHost>
---------------------


config.yml file:
---------------------
tunnel: TUNNEL_ID
credentials-file: /path/to/credentials_file/TUNNEL_ID.json

ingress:
 - hostname: domain1.com
   service: https://www.site1.local:7443
   originRequest:
      noTLSVerify: true
 - service: http_status:404
---------------------

Answer 1

Cloudflare tunnels are created at an Account level. If your cloudflare account has more than 1 TLDs, you will be able to route traffic from different domains to the same host.

The config is easy: if you're using the CF Zero Trust GUI, you need to create an ingress rule for each TLD on the tunnel config.

Example: lets say you have TLD1 and TLD2 on your CF account.

• You log in to cloudflare, and open Zero Trust console.
• You click on Access / Tunnels and get to the list of tunnels you have created.
• Select the tunnel running on your laptop, and click configure.
• Click on Public Host name. There you will see the first route that was added when you created the tunnel. Let's say it's: my-laptop.TLD1
• Click on Add a Public Host name.
• Select a Subdomain that you want to point to your laptop.
• Click on Domain and select the second TLD that you want to point to your Origin.
• Complete the rest of the ingress rules, and click save.

You will then have my-laptop.TLD1 and my-laptop.TLD2 both routing traffic to your laptop.

Updated: based on the example you provided on the question, you should adjust the ports of the Origin servers to something that is NOT overlapped (both are exposing port 443 on the same host). Use something like:

tunnel: TUNNEL_ID credentials-file: /path/to/credentials_file/TUNNEL_ID.json

ingress:

hostname: domain1.com service: https://www.site1.local:1443 originRequest: noTLSVerify: true
hostname: domain2.com service: https://www.site2.local:2443 originRequest: noTLSVerify: true
service: http_status:404

UPDATE 2:

if you are running the apps on a laptop for testing / demo, you could set an ingress rule like this:

tunnel: TUNNEL_ID credentials-file: /path/to/credentials_file/TUNNEL_ID.json

ingress:

    hostname: domain1.com service: http://www.site1.local:8443 originRequest: noTLSVerify: true
    hostname: domain2.com service: http://www.site2.local:9443 originRequest: noTLSVerify: true
    service: http_status:404

When a user access the app, CF proxy will serve the app over ssl, but the conn between cf and the origin will not.

If you want full (strict) ssl conn on your set-up for whatever reason, you can follow this guide to create and load the certificate on the apache server: https://developers.cloudflare.com/ssl/origin-configuration/ssl-modes/full-strict/