目标: 将前端本地项目 进行内网穿透 ,让非局域网环境下也能访问前端项目
工具: nginx 或(通过nodejs安装serve 插件) 和 natapp
步骤:
- 启动本地前端项目,如果静态页面需要用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
- 在本地项目启动成功后, 在natapp(https://natapp.cn)网站进行注册下载客户端,并配置隧道,
注意: 隧道端口号 需要和 本地启动项目的端口号保持一致
不会配置隧道的可以参考教程(NATAPP1分钟快速新手图文教程)
image.png
隧道配置好后在 natapp客户端路径启动cmd命令行 并执行 natapp -authtoken=7a5********4ff1authtoken后为自己的隧道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
