natApp内网穿透

一、打包本地项目

以Vue项目为例：

修改public/index.html路径：将./用<%= BASE_URL%>代替：

base_url.png

在vue.config.js中添加配置项publicPath:"./"

publicPath.png

打包项目

cnpm run build

二、启动本地服务

将dist文件夹下的文件，拷贝到Nginx的根目录下
根据需要配置nginx/conf/nginx.conf
清除nginx缓存

npinx -s reload

启动phpStudy或者直接双击nginx.exe
打开浏览器，测试本地端口号(127.0.0.1)

三、natApp隧道

根据不同的需求，选择不同的隧道类型。注意：隧道类型一旦选择，不可更改。

如果是网站开发者，通常选择Web类型，具体如下：

Web: 普通型http(s)隧道穿透,用于搭建网站,微信开发等穿透到本地web服务.
TCP: 端口转发应用于SSH,数据库,远程桌面,GAME等基于TCP连接的一切应用任您想象~
UDP: 端口转发应用于游戏,远程开机等基于UDP协议的一切应用

在购买隧道时之前，会提示：购买natApp选择二级域名。

natApp中的二级域名虽然冗长，但是价格便宜，不需要备案，直接使用，还要什么自行车~

购买二级域名.png

注意：如果不需要微信开发、https等，可以在这里直接选择，否则就不要在这里购买。先退出，先选择好符合要求的二级域名。

二级域名.png

在注册二级域名时，要注意选择能否【用于微信开发】、【SSL证书】。

注册二级域名.png

当然也可以使用自主域名：

使用时要注意避坑：

如果选择使用自主域名，并且在自主域名有对应域名解析的情况下，需要先修改自身的域名解析（600S后生效），因为自主域名中应用缓冲池解析权限比第三方内网穿透的权限高。

如果自主域名使用了SSL，则在natApp的隧道配置中，免费开启https将会无效。在启动natApp时候，会显示端口为443错误。