share-local-site（分享本地站点）

Share Local Site

Expose a local development server to the internet so anyone can access it via a public URL. No deployment needed.

When to use

• Demo a work-in-progress site to a client or colleague
• Test a local site on a mobile device
• Share localhost for pair programming or review
• Quick external access without deploying

Methods comparison

Quick start

localhost.run (zero-install, fastest to start)

Nothing to install, nothing to sign up for. Just run:

ssh -o StrictHostKeyChecking=no -R 80:localhost:3000 nokey@localhost.run

Look for the URL in the output (e.g. https://xxxxx.lhr.life). Share it immediately.

ngrok (most stable, recommended for longer sessions)

# First time only
brew install ngrok        # or: npm i -g ngrok, or download from ngrok.com
ngrok config add-authtoken YOUR_TOKEN   # get token from dashboard.ngrok.com

# Start tunnel
ngrok http 3000           # replace 3000 with your port

Get the public URL:

curl -s http://127.0.0.1:4040/api/tunnels | jq -r '.tunnels[0].public_url'

Web dashboard: http://127.0.0.1:4040

cloudflared

brew install cloudflared   # first time only
cloudflared tunnel --url http://localhost:3000

Pre-send checklist

Before sharing any tunnel URL, always verify:

1. Confirm the tunnel points to the correct port:

   curl -s http://localhost:4040/api/tunnels | python3 -c "
   import sys,json; d=json.load(sys.stdin)
   for t in d['tunnels']:
       print(t['config']['addr'], t['public_url'])"

1. Verify the page loads correctly:

   curl -sI <TUNNEL_URL>                        # check HTTP 200
   curl -s <TUNNEL_URL> | grep -i '<title>'     # confirm correct site

Watch for: Invalid Host header, wrong project, blank page, 502.

1. Only send the URL after both checks pass.

Multiple tunnels (ngrok)

ngrok free tier supports up to 3 simultaneous tunnels. Run each in a separate terminal or tmux session:

# Terminal 1: frontend on port 5173
ngrok http 5173

# Terminal 2: backend on port 3001
ngrok http 3001

List all active tunnels:

curl -s http://localhost:4040/api/tunnels | python3 -c "
import sys,json; d=json.load(sys.stdin)
for t in d['tunnels']:
    print(f\"{t['name']:20s} {t['config']['addr']:30s} {t['public_url']}\")"

Framework-specific fixes

Vue CLI: "Invalid Host header"

Vue CLI's webpack-dev-server blocks non-localhost hosts by default.

Vue CLI 2/3 (webpack-dev-server v3):

// vue.config.js
module.exports = {
  devServer: { disableHostCheck: true }
}

Vue CLI 5+ (webpack-dev-server v4+):

// vue.config.js
module.exports = {
  devServer: { allowedHosts: 'all' }
}

Vite / Next.js / Nuxt: No config needed — tunnels work out of the box.

Create React App

DANGEROUSLY_DISABLE_HOST_CHECK=true npm start

Or in .env:

DANGEROUSLY_DISABLE_HOST_CHECK=true

FAQ

Q: Do I need to restart the tunnel after code changes? No. The tunnel just forwards traffic. Hot reload works normally — just refresh the page.

Q: How long does the URL last? As long as the tunnel process is running. Close it and the URL dies.

Q: Can multiple people access the same URL? Yes. Share the URL with anyone — it's a public endpoint.

Q: ngrok says "too many tunnels"? Free tier allows 3 tunnels. Close unused ones or upgrade.

Recommended: pair with persistent-process

OpenClaw's exec sessions have automatic cleanup — idle timeout, context compaction, or gateway restart will silently kill any background process, including your tunnel. Your client is mid-demo and the URL just stops working.

To prevent this, install the openclaw-tmux-persistent-process skill. It runs your tunnel inside a tmux session that is completely independent of OpenClaw's exec lifecycle:

clawhub install openclaw-tmux-persistent-process

With both skills installed, tell your agent: "share port 3000 with tmux so it stays up" — it will start the tunnel in a persistent tmux session that survives gateway restarts.

Troubleshooting