mac-使用ngrok实现项目本地部署公网访问（内网穿透）

SunnyY
1,699 阅读3分钟

ngrok 是一个跨平台的开源反向代理工具，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道，分配给你一个域名让你本地的web项目可通过外网访问，适合向别人展示你本机的web demo 以及调试一些远程的API (比如微信公众号，企业号的开发)。

但是要确保暴露的服务是安全的，因为任何人都可以通过公网地址访问你的服务！！！，可以在 Ngrok 仪表盘中配置访问控制和其他安全设置。

下面是安装启动步骤

官网注册

官网地址：ngrok.com/

image.png

下载对应部署并安装，以mac电脑为例

下载地址：ngrok.com/download

image.png

1.安装

brew install ngrok/ngrok/ngrok

2.解压包到指定位置

sudo unzip ~/Downloads/ngrok-v3-stable-darwin-amd64.zip -d /usr/local/bin

3.添加authtoken

获取authtoken地址 : dashboard.ngrok.com/get-started…

如果没有注册需要先进入到ngrok官网，注册登录后获取

ngrok config add-authtoken <token>

image.png

4. 启动 Ngrok 隧道

执行命令将自己本地对应服务端口暴露到公网，实现穿透

ngrok http 8080

穿透以后会提供一个外部访问地址，即可外部网络访问自己本地部署的服务

image.png

  • 拷贝输出台中的URL,其中，https://xxxxx.ngrok.free.app 或者 https://xxxxx.ngrok-free.app  就是你的公网地址，通过这个地址可以访问你本地的服务。
  • 访问公网IP会提示安全风险提示，点击Visit Site 即可：

image.png

注意：

  • 启动ngrok端口号要与前端项目启动的端口号要一致；
  • 如本地前端项目启动的地址是http://localhost:3000
  • 那么ngrok启动命令ngrok http 3000

5. 固定域名

ngrok http 80每次启动，存在一个访问地址每次启动都会不一致问题，此时需要去官网完成相关配置，固定链接域名，注意免费版本只能启用一个 Ngrok 隧道。

启动第一次：访问地址
https://7653-180-166-192-66.ngrok-free.app

启动第二次：这个地址会变 
https://205c-180-166-192-66.ngrok-free.app

  • 进入配置页 新增域名

    image.png

  • 复制固定域名完成本地部署

    image.png

    image.png

  • 复制配置以后，在命令提示符页面按 control+c 先停掉本地之前部署好的内网穿透，执行拷贝的命令。

    ngrok http --domain=nearby-xxxx-xxxx.ngrok-free.app 8080

    image.png

    https://xxxxx.ngrok-free.app  就是公网访问地址

6. 前后端项目穿透

若自己本地启动了前后端项目需要穿透到外网如何实现（一个是自己可以通过配置nginx或者其他网关，此处只穿透这个网关即可；或者按照笔者下列处理方式）。

更多配置内容可查看官网文档：ngrok.com/docs/secure…

  • 查看配置文件地址

    ngrok config check

//Library/Application\ Support/ngrok/ngrok.yml

  • 查看 ngrok.yml 文件

    vi Library/Application\ Support/ngrok/ngrok.yml

  • 编辑ngrok.yml 文件

    ngrok config edit

  • 在 ngrok.yml 文件中添加以下内容并保存

    version: "2"
authtoken: YOUR_AUTH_TOKEN
tunnels:
  frontweb:        
    proto: http
    hostname: anemone-safe-distinctly.ngrok-free.app
    addr: 127.0.0.1:81
  afterweb:
    proto: http
    hostname: anemone-safe-distinctly.ngrok-free.app
    addr: 127.0.0.1:80

    请将 YOUR_AUTH_TOKEN 替换为你的 Ngrok 认证令牌。这里配置了2个隧道分别为frontweb与afterweb,他们的addr对应的是2台本地服务器的端口号

  • 启动隧道

    #前后端都启动 
ngrok start --all 
#只启动前端/后端 
ngrok start frontweb 
ngrok start afterweb

    image.png

7. 其他

退出ngrok命令

control+c

查看配置文件地址

//Library/Application\ Support/ngrok/ngrok.yml

ngrok config check

打开文件vi

vi Library/Application\ Support/ngrok/ngrok.yml

退出文件（英文）

esc+:q！

参考文档：

avatar
文章
阅读
粉丝