利用ngrok搭建开发测试环境

前言#

最近在做毕设的时候需要在移动端进行测试，所说有模拟器，但是做 APP 还是得在真机上体验一下，才能更好的发现问题所在以及需要优化的地方。然而我又不想让我的 APP 只局限于局域网内进行使用，也不想为了达成这一目的而租一台服务器，所以此篇教程就此诞生。

一、ngrok 是什么？#

ngrok是一款内网穿透工具，所谓内网穿透说直白一点，就是使你电脑的服务能在公网中被访问到。国内也有很多这类产品，比如花生壳，natapp等等，如果你也想使用 ngrok，请自备科学上网。

二、ngrok 的使用#

在ngrok注册完成即可得到一串Authtoken Key,ngrok 的使用方法也是极为简单的，只需要 3 步：

下载并解压对应系统的压缩包
在 ngrok 目录下执行ngrok config add-authtoken <authtokenkey>
在 ngrok 目录下执行ngrok http 80 即可将本机的 80 端口暴露到公网

运行成功后会得到一个网址 (例如：https://cd30-23-247-137-82.ngrok.io)，打开这个网址就可以直接访问到你本机的 80 端口。ngrok 每次运行都会分配一个不同的临时网址，如果需要一个固定的网址就需要订阅高级版本。价格是相当的刑！

三、使用 ngrok 的 api 获取临时网址并替换到项目中#

虽说每次运行 ngrok 都会给出临时的网址，不过每次都要手动将链接放到项目中，属实是太麻烦了，所以我们可以通过 ngrok 提供的 api 来将项目中的 baseURL 进行替换。首先需要申请 API Key并记录 apikey，只需要填入描述即可，没有任何难度。接着查看官方文档, 官方为我们提供了 6 种语言的 API 库，我是用的是 Python 的，api 使用的相关教程官方已经写得非常详细了我就不在介绍，直接贴出脚本。
```
#!/usr/bin/env python
import ngrok
import re,os

# construct the api client
client = ngrok.Client("填入apikey")

public_url = ""

# list all ip policies
#由于我是Free Plan，所以同时拥有一个临时网址，所以没做过多处理
for endpoint in client.endpoints.list():
    public_url=endpoint.public_url
print(public_url)

def updateFile(file,old_str,new_str):
    with open(file, "r", encoding="utf-8") as f1,open("%s.bak" % file, "w", encoding="utf-8") as f2:
        for line in f1:
            f2.write(re.sub(old_str,new_str,line))
    os.remove(file)
    os.rename("%s.bak" % file, file)
    
#替换flutter项目的baseUrl
updateFile(r"xxxx/lib/api/request_util.dart", "static const String baseUrl = .*;", 'static const String baseUrl = "%s";' % public_url)

#替换管理后台的baseUrl
updateFile(r"xxxx/src/boot/axios.js", "baseURL: .*'", "baseURL: '%s'" % public_url)
```
四、运行脚本#

为了使用方便，可以写两个脚本来执行 ngrok 和替换项目的 baseURL。

注意：下列脚本都是基于 MacOS 编写，请根据系统做出相应调整。如果要使用下列 shell 脚本，请将运行脚本放到与 python 文件同一目录下，并且将 ngrok 路径写入到环境变量 Path 中。

ngrok 运行脚本：
```
#!/bin/zsh
ngrok http 8333;
#记得将8333改为你的后端项目端口
```
替换 baseURL 运行脚本：
```
#!/bin/zsh
dir=$(dirname $(readlink -f "$0"))
python $dir/rebase.py
```

利用ngrok搭建开发测试环境

前言#

一、ngrok 是什么？#

二、ngrok 的使用#

三、使用 ngrok 的 api 获取临时网址并替换到项目中#

四、运行脚本#