目标: 将前端本地项目 进行内网穿透 ,让非局域网环境下也能访问前端项目

工具: nginx 或(通过nodejs安装serve 插件) 和 natapp

步骤:

1. 启动本地前端项目,如果静态页面需要用nginx将项目地址启动为本地服务
   nginx配置可参考代码:

    server {
        listen       8898;  #端口号
        server_name  localhost; #服务地址 localhost代表 127.0.0.1
        ssl_session_timeout  15m;
        location / {
            root   F:/Code/CT;   #项目文件所在文件夹
            index  index.html index.htm admin.html;  # 项目默认启动页面
        }
    }

本地访问: localhost + 端口号 测试项目是否启动 例如示例中的: localhost:8898

2. 在本地项目启动成功后, 在natapp(https://natapp.cn)网站进行注册下载客户端,并配置隧道,
   注意: 隧道端口号 需要和 本地启动项目的端口号保持一致
   不会配置隧道的可以参考教程(NATAPP1分钟快速新手图文教程)
   image.png
   隧道配置好后在 natapp客户端路径启动cmd命令行 并执行 natapp -authtoken=7a5********4ff1 authtoken后为自己的隧道authtoken,启动成功如下图
   image.png

3.如果项目为vue项目,不需要进行nginx服务启动,vue编译后会自启一个带端口号的服务,但是需要在vue.config.js 内添加 disableHostCheck: true,不然穿透访问会提示
参考下面代码:

module.exports = {
  /*其他代码*/
  devServer: {
     disableHostCheck: true,  // 需要添加本句代码
     /*其他代码*/
  },
  /*其他代码*/
}

使用 14.17.0 以上node版本安装serve 插件 , npm i -g serve 并在静态项目目录下运行 cmd命令行并执行 serve命令会默认启动5000 或 3000 端口 , 可使用 serve -p 8080 命令指定端口 启动成功会出现下图

image.png

穿透工具不止 natapp(NATAPP-内网穿透)一个,还有 网云穿(网云穿内网穿透 (xiaomy.net)
)等等,使用方法大同小异,保持本地有前端服务且穿透端口和本地项目端口保持一致即可

4.可将 natapp 启动改为快捷启动,在natapp 目录下创建一个 .bat文件,例如我的natapp在文件D:\Tools\natapp路径下,将.bat文件右键创建快捷方式到桌面,双击图标即可自动启动内网穿透

   @echo off
   cd /d D:\Tools\natapp
   natapp -authtoken=7a57b5915d574ff1