在前端开发中，经常需要进行本地开发调试或测试等场景，而这些场景往往需要联网来获取某些数据，例如 API 接口等。但是，因为开发者自己的网络环境有可能与真实环境有很大差异，导致本地开发与线上环境出现问题。为了解决这些问题，我们可以使用 NPM 包 bbtunnel。
bbtunnel 简介
bbtunnel 是一个 HTTP/HTTPS 隧道工具，它可以将本地服务穿过防火墙、路由器、NAT 等设备，让线上访问你的本地服务。它的优势在于设置简单，使用便捷，且可同时隧道 HTTPS 以及 HTTP 协议。
安装 bbtunnel
使用 NPM 包管理器进行安装：
npm install -g bbtunnel
快速上手
使用 bbtunnel 非常简单，只需要指定本地服务端口和远程 bbtunnel 主机地址即可。以 localhost:3000 服务为例，可以通过以下命令启动隧道：
bbtunnel --local-port=3000 --remote-host=bbt.siberia.io
参数解释：
local-port：指定本地服务端口号remote-host：指定远程 bbtunnel 主机地址
bbtunnel 默认会监听本地端口 8080，将请求隧道到指定的远程 bbtunnel 主机。打开浏览器访问 http://{your-bbtunnel-addr}.bbtunnel.com:8080/，即可访问到本地服务。
HTTPS 支持
bbtunnel 在默认情况下始终隧道 HTTP 功能。若要启用 HTTPS 隧道功能，需要在本地服务上启用 SSL，并在启动 bbtunnel 时使用以下命令：
bbtunnel --local-port=3000 --ssl --remote-host=bbt.siberia.io
参数解释：
ssl：表示开启 HTTPS 隧道支持
默认情况下，bbtunnel 会使用随机生成的 SSL 证书。如果需要使用自己的证书，可以使用以下命令：
bbtunnel --local-port=3000 --ssl --remote-host=bbt.siberia.io --key=path-to-key --cert=path-to-cert --ca=path-to-ca
参数解释：
key：指定 SSL 私钥文件路径cert：指定 SSL 证书文件路径ca：指定 SSL 根证书文件路径
指定隧道端口
如果默认的 8080 端口被占用，可以指定隧道端口：
bbtunnel --local-port=3000 --remote-host=bbt.siberia.io --remote-port=8081
参数解释：
remote-port：指定远程 bbtunnel 主机端口号
配置文件
为了让 bbtunnel 启动更加快捷方便，可以通过配置文件存储隧道参数。新建配置文件 bbtunnel.json：
-- -------------------- ---- ------- - ------------ ----- ------------- ----------------- ------ ----- ------ -------------- ------- --------------- ----- ------------- ------------- ---- -
启动隧道：
bbtunnel --config=./bbtunnel.json
参数解释：
config：指定配置文件路径
结语
使用 bbtunnel 可以方便地将本地服务发布到外网，提高开发效率。同时，可以方便地进行调试和测试，减少线上问题的出现。建议在开发过程中多加尝试和使用。
示例代码
-- -------------------- ---- ------- ----- ---- - --------------- ----- -------- - ----------- ----- ---- - ---- ----- ------ - ----------------------- ---- -- - -------------- - --- ----------------------------- ------------- -------------- --------- -- ------------------- --------- -- -- - ------------------- ------- -- ----------------------------- --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8b81e8991b448e6047