← 返回
开发者工具 中文

Share Local Site

Share a local development server with anyone via a public URL. Use when you need to demo a site to a client, let a colleague preview your work, test on mobil...
通过公网 URL 共享本地开发服务器。适用于向客户演示网站、让同事预览工作或测试移动端等场景。
darwin7381
开发者工具 clawhub v1.1.0 1 版本 99809.2 Key: 无需
★ 0
Stars
📥 523
下载
💾 3
安装
1
版本
#latest

概述

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

MethodSignupInstallStabilityBest for
----------------------------------------------
localhost.runNoNo⭐⭐Quickest start. Zero setup, perfect for first-time use
ngrokYesYes⭐⭐⭐⭐Most stable. Dashboard, multi-tunnel, longer sessions
cloudflaredNoYes⭐⭐⭐Already installed; quick tunnels

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:

```bash

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:

```bash

curl -sI # check HTTP 200

curl -s | grep -i '' # confirm correct site</p><p> ```</p><p> Watch for: <code>Invalid Host header</code>, wrong project, blank page, 502.</p><ol><li><strong>Only send the URL after both checks pass.</strong></li></ol><h2>Multiple tunnels (ngrok)</h2><p>ngrok free tier supports up to 3 simultaneous tunnels. Run each in a separate terminal or tmux session:</p><pre><code># Terminal 1: frontend on port 5173 ngrok http 5173 # Terminal 2: backend on port 3001 ngrok http 3001 </code></pre><p>List all active tunnels:</p><pre><code>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']}\")" </code></pre><h2>Framework-specific fixes</h2><h3>Vue CLI: "Invalid Host header"</h3><p>Vue CLI's webpack-dev-server blocks non-localhost hosts by default.</p><p><strong>Vue CLI 2/3 (webpack-dev-server v3):</strong></p><pre><code>// vue.config.js module.exports = { devServer: { disableHostCheck: true } } </code></pre><p><strong>Vue CLI 5+ (webpack-dev-server v4+):</strong></p><pre><code>// vue.config.js module.exports = { devServer: { allowedHosts: 'all' } } </code></pre><p><strong>Vite / Next.js / Nuxt:</strong> No config needed — tunnels work out of the box.</p><h3>Create React App</h3><pre><code>DANGEROUSLY_DISABLE_HOST_CHECK=true npm start </code></pre><p>Or in <code>.env</code>:</p><pre><code>DANGEROUSLY_DISABLE_HOST_CHECK=true </code></pre><h2>FAQ</h2><p><strong>Q: Do I need to restart the tunnel after code changes?</strong></p><p>No. The tunnel just forwards traffic. Hot reload works normally — just refresh the page.</p><p><strong>Q: How long does the URL last?</strong></p><p>As long as the tunnel process is running. Close it and the URL dies.</p><p><strong>Q: Can multiple people access the same URL?</strong></p><p>Yes. Share the URL with anyone — it's a public endpoint.</p><p><strong>Q: ngrok says "too many tunnels"?</strong></p><p>Free tier allows 3 tunnels. Close unused ones or upgrade.</p><h2>Recommended: pair with persistent-process</h2><p>OpenClaw's <code>exec</code> 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.</p><p>To prevent this, install the <strong>openclaw-tmux-persistent-process</strong> skill. It runs your tunnel inside a tmux session that is completely independent of OpenClaw's exec lifecycle:</p><pre><code>clawhub install openclaw-tmux-persistent-process </code></pre><p>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.</p><h2>Troubleshooting</h2><table><thead><tr><th>Problem</th><th>Fix</th></tr></thead><tbody><tr><td>---------</td><td>-----</td></tr><tr><td>Invalid Host header</td><td>See framework-specific fixes above</td></tr><tr><td>ngrok token invalid</td><td>Re-copy from dashboard.ngrok.com</td></tr><tr><td>localhost.run hangs</td><td>Switch to ngrok</td></tr><tr><td>Blank page / 502</td><td>Make sure your local dev server is running</td></tr><tr><td>Wrong project showing</td><td>Check <code>curl localhost:4040/api/tunnels</code> for port mapping</td></tr><tr><td>cloudflared 404</td><td>Quick tunnels can be flaky — switch to ngrok</td></tr></tbody></table></div> </div> </div> <div id="tab-versions" class="detail-content"> <div class="detail-section"> <h2>版本历史</h2> <p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p> <ul class="version-list"> <li> <div> <span class="version-tag">v1.1.0</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div> <div style="font-size:12px;color:#94a3b8;"> 2026-03-30 00:22 安全 安全 </div> </li> </ul> </div> </div> <div id="tab-security" class="detail-content"> <div class="detail-section"> <h2>安全检测</h2> <div class="sec-grid"> <div class="sec-card"> <h4>腾讯云安全 (Keen)</h4> <div class="sec-status sec-safe"> 安全,无风险 </div> <a href="https://tix.qq.com/search/skill?keyword=ca987c29694f5048813d333fcb779af1" target="_blank">查看报告</a> </div> <div class="sec-card"> <h4>腾讯云安全 (Sanbu)</h4> <div class="sec-status sec-safe"> 安全,无风险 </div> <a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/25/412344_228dedfe62f62f6ee4ac6b016751453c.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781400850%3B1812936850&q-key-time=1781400850%3B1812936850&q-header-list=host&q-url-param-list=&q-signature=6ff8d9c9ee29cc62ade9c992b17902c5c4abdfb6" target="_blank">查看报告</a> </div> </div> </div> </div> <!-- Recommended Skills --> <div style="margin-top:24px;"> <h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2> <div class="rec-grid"> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">developer-tools</span> <h3><a href="/s/gog">Gog</a></h3> <div class="rec-owner">steipete</div> <div class="rec-desc">Google Workspace 命令行工具,支持 Gmail、日历、云端硬盘、通讯录、表格和文档。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 921</span> <span style="color:#5b6abf;">📥 185,808</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;"></span> <h3><a href="/s/frp-tunnel">frp-tunnel</a></h3> <div class="rec-owner">darwin7381</div> <div class="rec-desc">通过自托管 frp 隧道分享本地开发服务器,支持自定义域名和自动 HTTPS,用于与他人共享本地服务或演示。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 0</span> <span style="color:#5b6abf;">📥 658</span> </div> </div> <div class="rec-card"> <span class="badge-cat" style="margin-bottom:8px;display:inline-block;">developer-tools</span> <h3><a href="/s/github">Github</a></h3> <div class="rec-owner">steipete</div> <div class="rec-desc">使用 `gh` CLI 与 GitHub 交互,通过 `gh issue`、`gh pr`、`gh run` 和 `gh api` 管理议题、PR、CI 运行及高级查询。</div> <div class="rec-stats"> <span style="color:#f39c12;">★ 668</span> <span style="color:#5b6abf;">📥 324,236</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded',function(){ document.querySelectorAll('.detail-tab').forEach(function(btn){ btn.addEventListener('click',function(e){ var tab = this.getAttribute('data-tab'); document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')}); document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')}); this.classList.add('active'); var el = document.getElementById('tab-'+tab); if(el) el.classList.add('active'); }); }); }); </script> <div class="footer"> <p>Skill工具集 © 2026</p> </div></body> </html>