mobile-preview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile Preview

移动端预览

Expose local dev server to mobile Chrome via a public HTTPS URL using cloudflared tunnel.

通过cloudflared隧道，使用公开HTTPS URL将本地开发服务器暴露至移动端Chrome。

Prerequisites

前置条件

Install cloudflared if not present:

bash

undefined

若未安装cloudflared，请先安装：

bash

undefined

Check installation

检查安装情况

command -v cloudflared

macOS

macOS系统

brew install cloudflared

undefined

brew install cloudflared

undefined

Workflow

操作流程

1. Detect port

1. 检测端口

Identify the dev server port:

Framework	Default Port	Config
Next.js	3000	`package.json` → `dev` script
Vite	5173	`vite.config.*` → `server.port`
CRA	3000	`PORT` env var
Nuxt	3000	`nuxt.config.*` → `devServer`
Remix	5173	`remix.config.*`

Check running server port:

bash

lsof -i -sTCP:LISTEN -P | grep -E ':(3000|5173|8080|4321) '

确定开发服务器端口：

框架	默认端口	配置位置
Next.js	3000	`package.json` → `dev` 脚本
Vite	5173	`vite.config.*` → `server.port`
CRA	3000	`PORT` 环境变量
Nuxt	3000	`nuxt.config.*` → `devServer`
Remix	5173	`remix.config.*`

检查运行中的服务器端口：

bash

lsof -i -sTCP:LISTEN -P | grep -E ':(3000|5173|8080|4321) '

2. Start dev server

2. 启动开发服务器

If not already running, start in background:

bash

npm run dev &

若服务器未运行，在后台启动：

bash

npm run dev &

or

或

pnpm dev &


Wait for the server to be ready, then verify the port.

pnpm dev &


等待服务器就绪后，验证端口是否正确。

3. Start tunnel

3. 启动隧道

Use the bundled script:

bash

bash ~/.claude/skills/mobile-preview/scripts/tunnel.sh PORT

Or run directly:

bash

cloudflared tunnel --url http://localhost:PORT 2>&1 &

Parse the

https://xxx-xxx.trycloudflare.com

URL from the output.

使用捆绑脚本：

bash

bash ~/.claude/skills/mobile-preview/scripts/tunnel.sh PORT

或直接运行：

bash

cloudflared tunnel --url http://localhost:PORT 2>&1 &

从输出中解析出

https://xxx-xxx.trycloudflare.com

格式的URL。

4. Share URL

4. 分享URL

Provide the tunnel URL to the user:

Mobile preview URL: https://xxx-xxx.trycloudflare.com

Open the URL above in mobile Chrome.
The tunnel is running in the background. Let me know when you're done.

将隧道URL提供给用户：

移动端预览URL：https://xxx-xxx.trycloudflare.com

请在移动端Chrome中打开上述URL。
隧道正在后台运行，完成测试后请告知我。

5. Cleanup

5. 清理操作

Terminate the tunnel process when testing is complete:

bash

pkill -f "cloudflared tunnel"

测试完成后终止隧道进程：

bash

pkill -f "cloudflared tunnel"

Troubleshooting

故障排除

Port conflict: Check with
```
lsof -i :PORT
```
, use a different port if needed
Tunnel connection failure: Check firewall/VPN, try reinstalling cloudflared
HTTPS mixed content: Tunnel is HTTPS, so HTTP resources may fail to load. Ensure the dev server uses relative paths
HMR not working: WebSocket-based HMR may not work through cloudflared tunnel. Manual refresh required

端口冲突：使用
```
lsof -i :PORT
```
检查，必要时更换端口
隧道连接失败：检查防火墙/VPN，尝试重新安装cloudflared
HTTPS混合内容：隧道使用HTTPS，因此HTTP资源可能加载失败。请确保开发服务器使用相对路径
HMR不工作：基于WebSocket的HMR可能无法通过cloudflared隧道正常工作，需要手动刷新

Notes

注意事项

cloudflared quick tunnel requires no signup, free, automatic HTTPS
URL changes on every tunnel restart
Tunnel sessions last approximately 24 hours (auto-expire after)
Be cautious with tunnels on dev environments containing sensitive data

cloudflared快速隧道无需注册，免费使用且自动配置HTTPS
每次重启隧道时URL都会变更
隧道会话时长约为24小时（到期后自动失效）
若开发环境包含敏感数据，使用隧道时需谨慎