Mac 上使用ngrok部署外网web项目

最近在完成一个关于vue的手机端项目，项目内部使用了Mint-UI和MUI框架，打包工具选择了webpack,项目打包成功后，把项目部署到了mac电脑上自带的Apache中的根目录,这样，就可以通过本机的ip访问项目，但是如何通过外网访问这个项目呢？我们可以通过ngrok来实现这个功能.

项目截图

一、什么是ngrok?

其实，ngrok是一种反向代理，通过在公共的端点和本地运行的web服务器之间建立一个安全通道，ngrok可捕获和分析所有通道上的流量。

二. 下载 MAC 版的 ngrok：https://ngrok.com/download

下载页面

三. 解压到指定目录：

$ unzip -n ngrok-stable-darwin-amd64.zip -d /tmp

四. 进入到解压后的 ngrok 所在路径：

$ cd /tmp

五. 开启服务：

$ ./ngrok http localhost:80

启动情况

输入入命令后会出现上图样式，稍等片刻，等 Session Status 显示为 online 状态时即可使用外网访问。即：以前使用http://localhost:80/huapuWeb 访问，现在便可使用http://a210887a.ngrok.io进行访问，http://a210887a.ngrok.io 就是本地服务映射到外网的地址。其中 a210887a不是固定的，在每次开始 ngrok 服务的时候都会变更。

六.现在就可以通过http://a210887a.ngrok.io在各个网络上访问，效果如下:

外网访问效果