Setting Up Cloudflare Tunnel to Expose Local Sites

When my hosting provider switched to IPv6 using MAP-E, it brought an unexpected challenge: traditional networking features like DMZ and Port Forwarding were no longer functional. This was a productivity killer for me as a software developer, especially since I need my local test sites to be accessible by other online services.

Enter Cloudflare Tunnel, a simple and secure way to expose local services to the internet. It doesn’t require port forwarding, works seamlessly with IPv6, and is perfect for making local WordPress sites created with Local by Flywheel accessible externally. Here’s how I set it up on my Mac.

Why Cloudflare Tunnel?

Cloudflare Tunnel creates a secure tunnel between your local machine and the internet. It maps public URLs (like test.meowapps.com) to local services running on your machine. Whether you’re testing APIs or previewing websites for clients, Cloudflare Tunnel is a reliable and straightforward solution.

Prerequisites

  1. Local by Flywheel Installed: Ensure you’ve set up your WordPress sites locally using Local by Flywheel.
  2. Cloudflare Account: Sign up for a free Cloudflare account at Cloudflare.
  3. Domain Name: If you don’t already have one, register a domain and add it to your Cloudflare account. This tutorial assumes you’ve configured your domain in Cloudflare.

Step 1: Install cloudflared

First, we need to install the Cloudflare Tunnel CLI tool.

brew install cloudflare/cloudflare/cloudflared

Step 2: Authenticate Cloudflare Tunnel

Log in to your Cloudflare account:

cloudflared tunnel login

A browser window will open, asking you to authenticate. Once authenticated, Cloudflare will save the credentials on your machine.

Step 3: Create a Cloudflare Tunnel

Create a new tunnel for your sites:

cloudflared tunnel create my-tunnel

Replace my-tunnel with a name you like (e.g., wordpress-tunnel). This will generate a unique Tunnel ID and save its credentials on your Mac.

Step 4: Configure the Tunnel

Create the Configuration File

Set up the tunnel to route traffic to your Local by Flywheel sites. Create a configuration file:

mkdir -p ~/.cloudflared
nano ~/.cloudflared/config.yml

Add the following configuration:

tunnel: my-tunnel
credentials-file: ~/.cloudflared/<tunnel-id>.json

ingress:
  - hostname: test.meowapps.com
    service: http://localhost:80
  - hostname: test2.meowapps.com
    service: http://localhost:80
  - service: http_status:404

Replace <tunnel-id> with your actual Tunnel ID. Local by Flywheel already handles the routing based on the Site domain, so make sure you use the same site domains with the subdomains in Cloudflare.

Map Subdomains in Cloudflare

Register each subdomain in your Cloudflare this way:

cloudflared tunnel route dns my-tunnel test.meowapps.com

This automatically creates a DNS record in Cloudflare pointing to <tunnel-id>.cfargotunnel.com.

Step 5: Run the Tunnel

Start the tunnel:

cloudflared tunnel run my-tunnel

Your sites will now be accessible via the subdomains you configured! 🙂