1. 先看效果图

• 地址：zqchat

2. 实现步骤

2.1 分两步走

• 前端资源部署：使用 netlify 实现
• 本地服务器映射到互联网：使用 Localtunnel 实现

2.2 netlify 部署前端资源

• Netlify官网注册账号

• 创建站点

  • 登录成功后sites页面点击 Add new site，选择 Import an existing project
    
  • 可从 github、gitlab、Bitbucket 等选择项目源码
    

• Netlify默认会为你的站点启用HTTPS，无需进行任何配置

• 自定义域名
  

• 部署完成

• 更新部署
  

2.3 Localtunnel 映射 localhost 服务

• Localtunnel 为 npm 模块，使用 npm 命令全局安装依赖

  npm install -g localtunnel

• 映射本地服务指定端口（8000）到 https地址

  lt -p 8000

• 映射成功截图如下，即可通过 https://rude-swans-refuse.loca.lt 地址访问 localhost:8000 服务
  

3. 其它工具内网穿透工具对比

工具	优点	缺点	适用场景
Ngrok	文档丰富、易用性强	免费版域名随机、稳定性一般	临时测试、快速部署
localhost.run	无需安装客户端	仅限Linux/Mac、功能单一	极简临时需求
FRP	完全免费、高度自定义	需公网服务器、配置复杂	长期稳定项目
Cpolar	界面友好、配置直观	免费额度有限	个人开发者轻量级需求
Chisel	开源、高性能	依赖命令行操作；需公网服务器	技术向用户、数据传输

• 推荐场景‌：
  • 临时调试‌：优先选 Ngrok 或 localhost.run‌
  • 长期项目‌：推荐 FRP 自建服务或 Cpolar‌
  • 技术探索‌：尝试 Chisel 或开源方案‌

4. 总结

• 使用 netlify 部署前端静态资源（html/js/css/images等）
• 使用 Localtunnel将localhost服务映射到https

5. 参考资料

• 开源内网穿透工具 frp 安装和使用教程 - 云原生实验室的文章 - 知乎
• cpolar 文档