natApp进行内网穿透-外网访问前端本地运行项目

业务场景

我们在进行前端项目开发的过程中，前端的项目的本地服务都是跑在我们自己电脑上的，比如说我们的vue项目运行起来以后是直接运行在127.0.0.1（localhost）环境下的，别的同事想访问的时候，需要在同一个局域网访问你的电脑本机地址才可以，那么就存在一个业务场景，比如测试或者别的同事你的老板想看效果，但是不在同一局域网，你因为没有完全实现结束，不可能直接发布到服务器上给他们看，所以这个时候需要进行外网访问你的本机运行的服务！

解决什么问题

外网访问你本地运行的前端项目

使用工具

• natApp

实现过程

• 下载natApp

在这里插入图片描述

• 申请一个免费的

在这里插入图片描述

- 申请结束

在这里插入图片描述

• 配置启动服务
• 新建一个文件夹，存放下载好的natApp，比如下面我的地址

在这里插入图片描述

• 授权启动 [后面的就是申请出来的authtoken]

在这里插入图片描述

- 启动状态

在这里插入图片描述

• 在地址中可以看到状态

在这里插入图片描述

• 如果在申请的时候没有进行配置端口号的话，那么可以在后面对应的隧道中配置

在这里插入图片描述

如何查看本地开启的端口

• vue项目启动为例

在这里插入图片描述

文章中涉及到的命令

//授权
chmod 777 natapp

//启动
./natapp -authtoken=【填写隧道中你申请的authToken】

存在的问题

如果前端使用了内网穿透的地址，那么请求后台地址的地址也需要进行内网穿透才可以，否则很大概率会跨域！后台配置内网穿透过程如上！