Setting Up a Cloudflare Tunnel with Wildcard Support

Using Cloudflare Tunnel is a great way to expose your local websites to the public securely without configuring a traditional VPN or public IP addresses. Here’s a step-by-step guide on how to set up a Cloudflare Tunnel and use a wildcard to access multiple local sites:

Step 1: Create a Cloudflare Account

If you don’t already have a Cloudflare account, you’ll need to create one and add your domain. Point your domain’s DNS settings to Cloudflare by changing your nameservers at your domain registrar.

Step 2: Install Cloudflared

Cloudflared is the daemon used to create a Cloudflare Tunnel. You’ll need to install it on your local machine or the server where your sites are hosted.

• For macOS: Use Homebrew:

brew install cloudflared

Step 3: Authenticate Cloudflared

Run the following command to authenticate cloudflared with your Cloudflare account:

cloudflared tunnel login

This command opens a browser window where you can log in to your Cloudflare account and authorize the connection.

Choose the domain that you’d like to use with your tunnel.

Step 4: Create a Tunnel

Create a new tunnel and give it a name:

cloudflared tunnel create tunnel-name

Confirm that the tunnel has been successfully created by running:

cloudflared tunnel list

Your tunnel configuration is complete! If you want to get information on the tunnel you just created, you can run:

cloudflared tunnel info tunnel

Step 5: Configure the Tunnel

Create a config.yml file inside .cloudflared to define how traffic is routed:

tunnel: <Tunnel-UUID>
credentials-file: /path/to/.cloudflared/Tunnel-UUID.json

ingress:
  - hostname: "*.domain.com"
    service: http://127.0.0.1:80
  - hostname: "*.example.com"
    service: http://127.0.0.1:80
  - service: http_status:404

In this example, *.example.com will route all requests to your local web server running on port 80. Make sure to replace example.com with your actual domain.

Validate your configuration:

cloudflared tunnel ingress validate

Validating rules from ~/.cloudflared/config.yml
OK

Test a specific domain:

cloudflared tunnel ingress rule https://foo.domain.com

Using rules from ~/.cloudflared/config.yml
Matched rule #0
    hostname: *.domain.com
    service: http://127.0.0.1:80

Tail the connection logs:

cloudflared tail <Tunnel-UUID>

Step 6: Start the Tunnel

Run the tunnel:

cloudflared tunnel run TUNNEL_NAME

To run it at login:

sudo cloudflared service install
sudo cloudflared service uninstall

Cloudflare Tunnel will be installed as a launch agent and start whenever you log in, using your local user configuration found in ~/.cloudflared/.

Except there’s an issue with the plist file that’s created.

To resolve this, we’re going to update the file by editing /Library/LaunchDaemons/com.cloudflare.cloudflared.plist

Original:

<array>
    <string>/usr/local/bin/cloudflared</string>
</array>

Updated:

<array>
    <string>/usr/local/bin/cloudflared</string>
    <string>tunnel</string>
    <string>run</string>
</array>

Start and stop the daemon:

sudo launchctl start com.cloudflare.cloudflared
sudo launchctl stop com.cloudflare.cloudflared

Manage the service:

sudo launchctl bootout system /Library/LaunchDaemons/com.cloudflare.cloudflared.plist
sudo launchctl bootstrap system /Library/LaunchDaemons/com.cloudflare.cloudflared.plist

Step 7: Update DNS

Finally, you need to add DNS records in your Cloudflare dashboard to point your desired subdomains (or wildcard
subdomains) to the tunnel. For wildcard subdomains, create a CNAME record like this:

• Type: CNAME
• Name: *
• Target: <TUNNEL_ID>.cfargotunnel.com

Resulting in client.domain.dev

If Cloudflare has an Edge Certificate you can also setup wild card subdomains.

• Type: CNAME
• Name: *.name.
• Target: <TUNNEL_ID>.cfargotunnel.com

Resulting in client.your-name.domain.dev

Required Local Changes

server {
    listen 80;
    server_name project.test project.example.com;
}

There’s no need to update your hosts file or Gasmask settings.

Additional Configurations for WordPress and Laravel

Your local sites will now have full SSL, can be accessed by your mobile devices, and if required shared with team mates.

WordPress
Update wp-config.php:

define('WP_HOME', 'https://project.example.com');
define('WP_SITEURL', 'https://project.example.com');

Laravel
Update your .env:

APP_URL=https://project.domain.com
HORIZON_DOMAIN=https://project.domain.com

Next, you may need to force HTTPS by editing your AppServiceProvider boot method.

use Illuminate\Support\Facades\URL;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        if (config('app.env') === 'local') {
            URL::forceScheme('https');
        }
    }
}

Additional Tips

• Consider adding basic authentication in Nginx to prevent unauthorized access.
• If you’re using Vite or hot module reloading, further adjustments are needed.

Setting Up Cloudflare Tunnel via Web Interface

Cloudflare allows you to configure your tunnel through its web interface:

1. Go to Zero Trust > Networks > Tunnels in your Cloudflare dashboard.
2. Click Create Tunnel, select Cloudflared, and name your tunnel.
3. Choose an installation method:
   • If Cloudflared is not installed, follow the installation steps.
   • If Cloudflared is already installed, proceed with configuration.
4. Add a public hostname:
   • Subdomain: *
   • Domain: Select your domain
   • Set the service type to HTTP and the URL to http://127.0.0.1:80

This setup provides full SSL support, allows access from mobile devices, and enables easy sharing with teammates.

By following these steps, you can securely expose multiple local sites using a single Cloudflare Tunnel with wildcard support—perfect for development, testing, and internal applications without exposing them directly to the intern