Ngrok

内网穿透

将内网的电脑 “暴露” 到公共网络。可以简单理解为一个中间人，由于他知道你的电脑地址，所以能建立一条隧道，帮助其他用户访问到你的计算机

原理

Ngrok 实现内网穿透

首先我们访问 Ngrok 官网，使用 GitHub 或者邮箱进行注册登录。

https://ngrok.com/download

注册成功

将下载好的 zip 包解压，得到 ngrok 可执行文件

接下来我们参照官方文档，在本地执行 ngrok 命令添加用户的 authtoken：

ngrok config add-authtoken 2VFnAFLZIr8lHootY5emepsJM......355FxE3DsTqFN5kNB

直接复制上图的命令，进入到 ngrok 文件所在的目录执行

现在，你的账号信息已经保存到本地的 ngrok 配置文件中了，接下来只需要执行 ngrok http <端口号> 命令即可启动内网穿透服务。

如下图，注意将端口号改为自己本地项目占用的端口号，比如前端一般是 80、后端一般是 8080。

image-20230911224246088

如果页面使用vue页面显示

**invalid host header **

在vue.config.js里面添加

invalid host header问题

固定域名

通过上述命令直接启动内网穿透，每次得到的访问域名是随机生成的，这不利于我们持续访问。

可以从 ngrok 官网找到静态域名的配置：

图片

创建好域名后，复制下图的 ngrok 启动命令：

图片

多服务

以上是单服务的内网穿透，但实际情况下，我们本地可能不仅有前端、还有后端服务，那么如何利用 Ngrok 同时内网穿透多个服务呢？

这就需要我们修改 ngrok 的配置文件，手动配置隧道。

首先根据官方文档的指引，找到自己电脑上的默认 ngrok.yml 配置文件：

图片

然后在编辑器中修改这个文件，比如配置前端（frontend）和后端（backend）两条隧道，对应的本地服务端口分别为 5173 和 8104：

图片

之后，可以通过 ngrok start <隧道名称> 配置指定启动哪个隧道：

ngrok start frontend
ngrok start backend

或者执行 ngrok start --all 命令同时启动所有隧道，运行结果如下，同时在 ngrok-free.app 域名下分配了 2 个子域名，并指向对应服务

访问不同的域名，就能访问到前端或后端了~