使用 ngrok 和 VS Code 通过 Internet 公开 localhost 服务器

有时候我们需要将开发测试环境的服务公开到 Internet 上，以便其他人也可以访问和测试。这时候可以使用 ngrok 工具和 VS Code 编辑器来快速实现。

什么是 ngrok？

ngrok 是一个反向代理工具，可以帮助我们将本地计算机上的服务映射到公网上，以便远程访问。它支持 HTTP、HTTPS、TCP、WebSocket 等多种协议，并且跨平台支持 Windows、Mac 和 Linux 系统。

如何安装 ngrok？

可以从官网 https://ngrok.com/ 下载安装包，解压后即可使用。

如何使用 ngrok？

首先，我们需要启动本地服务器。比如，我们在本地启动了一个 Node.js Web 服务器，监听端口号为 3000。然后，我们使用以下命令来启动 ngrok：

ngrok http 3000

ngrok 会自动为我们生成一个公网地址，类似于：

http://a1b2c3d4.ngrok.io

此时，访问该地址就可以访问到本地的服务器了。

如何在 VS Code 中使用 ngrok？

我们可以使用 VS Code 的插件来快速启动 ngrok 和在编辑器中打开生成的公网地址。以下是具体步骤：

1. 打开 VS Code，并安装插件 "ngrok for Visual Studio Code"。
2. 打开项目，并启动本地服务器。
3. 点击 VS Code 左侧的 "ngrok" 图标，会弹出 ngrok 面板。
4. 在 ngrok 面板中，点击 "Start a new tunnel"，并输入本地服务器的端口号。
5. ngrok 会自动为我们生成一个公网地址，并在编辑器中打开该地址。

代码示例：

1. ngrok 面板
![ngrok](ngrok.png)

2. 配置本地服务器端口号
![ngrok-config](ngrok-config.png)

3. 生成公网地址并在编辑器中打开
![ngrok-result](ngrok-result.png)

注意事项

• ngrok 的免费版只支持 HTTP 协议，如需使用 HTTPS 协议需要升级到付费版。
• ngrok 的免费版生成的公网地址是动态的，每次启动都会生成一个新的地址，如果需要一个固定的地址，需要升级到付费版。