VSCode + Live Server 实现局域网访问加之Ngrok实现内网穿透，端口转发

本文旨在记录、分享在原有VSCode + Live Server 完成的 同局域网访问 的基础上，增加 ngrok 本地服务映射到公共 URL和端口映射功能的实现步骤，以及所遇到问题的解决办法，在问题和步骤描述不尽详细处也给出了部分优秀up主的解决思路。【侵权联删】

VSCode + Live Server

VSCode的获取

• 官网下载
  下载所需版本：VSCode官网下载
  
• 网盘获取
  链接: vscode

此处内容可参考
VSCode 安装教程

下载插件 Live Server

下载并全局启用即可

此处详细内容可参考
Live Server介绍与使用

ngrok的获取

• 官网获取（加载比较缓慢）

  • 直接下载： ngrok下载
    

  • 注册下载ngrok注册
    

• 网盘获取
  链接: ngrok

官网下载详细教程可参考

ngrok配置

注册成功后，需要获取用户授权码配置

• 法一、命令行配置（Command Line）
  进入授权码页面，Ctrl+C复制选中命令
  
  双击获取（解压）到的exe文件
  

  将复制内容粘贴
  粘贴方法：复制完毕内容，在命令提示符（cmd）窗口中，点击鼠标右键（注意不是左键）。
  
  Enter回车配置成功

• 法二、yml文件配置（Configuration File）
  进入授权码页面，Ctrl+C复制选中内容
  
  Win+E进入文件资源管理管理器
  在搜索栏输入：

  %LocalAppData%\ngrok
  

  快速定位 ngrok.yml 配置文件
  加入复制的内容
  此处详细内容可参考

功能实现

同局域网访问

启动 Live Server

观察到
ip：127.0.0.1 即 本机ip地址，同等效力于 localhost，
port：5501 ，开放端口号为 5501
显示效果：

目前 通过 Win+R，输入 cmd 打开，执行 ipconfig 命令查询本机在局域网下的地址。

在同属一局域网下，网络地址输入栏中输入 {IPV4地址}+{:PORT}，在此处表现为 192.168.31.24:5501，可以访问到与本机显示效果相同内容（此处不加演示）。

ngrok 端口映射

旨在将 局域网下 localhost:port -> 公网域名
在此例中表现为 localhost:5501 -> 公网域名

得到的效果：

在请求网址为 https://6a04-183-217-152-219.ngrok-free.app 时，将映射到本机 localhost:5501，值得注意的是，要想访问 test.html 页面，需要在 网址后 添加 /test.html，即网址全部内容应为 https://6a04-183-217-152-219.ngrok-free.app/test.html。（止于2024/01/03 12:00:00）
效果为：

在 ngrok 终端同样有请求log输出

问题 ngrok http {port} 报错：ERR_NGROK_108

这个错误是由于 ngrok 免费版限制同时运行的 ngrok 代理会话数。根据错误消息，免费帐户被限制为只能同时运行一个 ngrok 代理会话。
解决方法：
在同一个 ngrok 代理会话中使用配置文件来管理多个通道。配置文件允许定义和管理多个隧道设置，而无需启动多个 ngrok 进程。这样可以通过一个 ngrok 代理会话运行多个通道，而不违反免费版的并发连接数限制。
1、配置文件内容

authtoken: YOUR_AUTH_TOKEN

tunnels:
  app1:
    addr: 3000
  app2:
    addr: 4000

在上述内容中替换 YOUR_AUTH_TOKEN 为 ngrok 账户 authtoken，然后定义多个隧道（在上述示例中是 app1 和 app2），分别指定不同的本地端口。
2、使用配置文件启动 ngrok： 使用 -c 或 --config 参数来指定配置文件的路径，并指定要启动的隧道。

ngrok start -c ngrok.yml app1 app2

通过使用配置文件，可以在一个 ngrok 代理会话中管理多个通道，而不受并发连接数的限制。值得注意的是，需要确保每个隧道都有唯一的名称，并在配置文件中正确指定本地端口。

若在只使用一个端口服务的需求下，重启（万能法）或杀死ngrok的全部进程以解决此问题。
可以在 任务管理器->详细信息

结束全部 ngrok 进程，再重新启动 ngrok 服务。