利用ngrok搭建开发测试环境

前言

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

一、ngrok是什么？

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

二、ngrok的使用

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

1. 下载并解压对应系统的压缩包。

2. 在ngrok目录下执行：

ngrok config add-authtoken <authtokenkey>
BASH

3. 在ngrok目录下执行：

ngrok http 80
BASH

即可将本机的80端口暴露到公网。

运行界面

运行成功后会得到一个网址，例如：

https://cd30-23-247-137-82.ngrok.io
TEXT

打开这个网址就可以直接访问到你本机的80端口。ngrok每次运行都会分配一个不同的临时网址，如果需要一个固定的网址就需要订阅高级版本。价格是相当的刑！

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

虽说每次运行ngrok都会给出临时的网址，不过每次都要手动将链接放到项目中，属实是太麻烦了，所以我们可以通过ngrok提供的api来将项目中的baseURL进行替换。

首先需要 申请API Key 并记录apikey，只需要填入描述即可，没有任何难度。

接着 查看官方文档，官方为我们提供了6种语言的API库。我使用的是Python的，api使用的相关 教程 官方已经写得非常详细了我就不再介绍，直接贴出脚本。

#!/usr/bin/env python
import ngrok
import re
import 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
)
PYTHON

四、双击运行脚本

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

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

ngrok运行脚本：

#!/bin/zsh
ngrok http 8333
# 记得将8333改为你的后端项目端口
BASH

替换baseURL运行脚本：

#!/bin/zsh
dir=$(dirname $(readlink -f "$0"))
python $dir/rebase.py
BASH