在前端开发中，我们经常需要进行本地调试和测试，同时又需要与他人或外部系统进行交互。这时，我们往往需要将本地服务器暴露在互联网上，以便实现远程访问。这时，一种快捷、方便的方式就是采用 npm 包 serverless-localtunnel。
serverless-localtunnel 是什么？
serverless-localtunnel 是一个通过本地服务器将网络请求转发至公网的 npm 包。它不需要配置服务器或租用专门的服务，而是通过本地运行的 ngrok 或 localtunnel 服务在公网上开辟一个隧道，将请求转发到本地服务器，从而实现普遍意义上的内网穿透。
serverless-localtunnel 的使用方法
安装 serverless-localtunnel
使用 serverless-localtunnel 前需要全局安装它：
npm install -g serverless-localtunnel
使用 serverless-localtunnel
以下是 serverless-localtunnel 运行的基本命令格式：
sls-lt --port <local-port> --subdomain <your-subdomain>
其中，<local-port> 是你本地服务开放的端口号，<your-subdomain> 是你在 serverless-localtunnel 上开放的子域名。
- 如果省略
<your-subdomain>，则 serverless-localtunnel 会为你分配一个随机的子域名。 - 如果省略
<local-port>，则 serverless-localtunnel 默认为你分配一个端口为 8080 的本地服务。
下面是一个例子：
sls-lt --port 3000 --subdomain myserver
运行以上命令后，serverless-localtunnel 将把请求转发至端口为 3000 的本地服务，使用 myserver.subdomain.localtunnel.me 子域名进行访问。
使用 serverless-localtunnel 反向代理
使用上述方法时，serverless-localtunnel 将网络请求直接转发至本地服务器，这可能会导致安全和性能上的问题。为降低这类问题，我们可以使用 serverless-localtunnel 反向代理功能。serverless-localtunnel 默认采用二级随机的子域名进行反向代理，或者您也可以手动指定代理服务。
使用二级域名进行反向代理
sls-lt --port 3000 --subdomain myserver --proxy
运行以上命令后，serverless-localtunnel 将为您生成一个二级随机子域名，作为反向代理服务。您的本地服务将会被代理到这个子域名上，从而保证了安全性和性能。
手动指定反向代理服务
sls-lt --port 3000 --subdomain myserver --proxy https://example.com:8080
运行以上命令后，serverless-localtunnel 将使用指定的服务作为反向代理。这样您可以自己控制和管理代理服务，更加方便灵活。
serverless-localtunnel 的使用示例
以下是一个使用 serverless-localtunnel 开启本地服务器的简单示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - ---------------- --------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
运行以上代码后，输入 localhost:3000 即可在本地访问该服务器。但是该服务只能在您的本地访问，如果您需要将该服务暴露到公网上，就需要 serverless-localtunnel 了。
使用 serverless-localtunnel，我们可以直接在终端上使用以下命令来启动服务：
sls-lt --port 3000 --subdomain myserver
然后我们就可以使用 http://myserver.subdomain.localtunnel.me 到达服务。
总结
serverless-localtunnel 便捷的内网穿透方式帮助我们解决了本地开发中暴露服务的问题。使用本文介绍的方法和示例，相信您已经对 serverless-localtunnel 有了一定的了解，在以后的前端项目开发中，相信它将为您带来越来越多的便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602d81e8991b448de5dd