ngrokを利用して開発テスト環境を構築する

前言#

最近、卒業研究を行っている際にモバイル端末でのテストが必要になりました。エミュレーターもあると言われていますが、アプリを作るには実機で体験しないと、問題点や最適化が必要な部分をより良く発見できません。しかし、私のアプリをローカルネットワーク内でのみ使用したくはなく、その目的のためにサーバーを借りることも望んでいません。そこで、このチュートリアルが誕生しました。

一、ngrok とは？#

ngrokは、内網を貫通するツールです。内網貫通とは、簡単に言えば、あなたのコンピュータのサービスをパブリックネットワークでアクセスできるようにすることです。国内にもこのような製品がたくさんあります。例えば、花生壳や、natappなどです。もし ngrok を使用したい場合は、科学的にインターネットに接続する準備をしてください。

二、ngrok の使用#

ngrokに登録すると、Authtoken Keyの一連の文字列が得られます。ngrok の使用方法は非常に簡単で、たったの 3 ステップです：

対応するシステムの圧縮ファイルをダウンロードして解凍します。
ngrok ディレクトリでngrok config add-authtoken <authtokenkey>を実行します。
ngrok ディレクトリでngrok http 80を実行すると、ローカルの 80 ポートがパブリックネットワークに公開されます。

実行が成功すると、URL（例：https://cd30-23-247-137-82.ngrok.io）が得られます。この URL を開くと、あなたのローカルの 80 ポートに直接アクセスできます。ngrok は毎回異なる一時的な URL を割り当てます。固定の URL が必要な場合は、プレミアムバージョンを購読する必要があります。価格はかなり高いです！

三、ngrok の API を使用して一時的な URL を取得し、プロジェクトに置き換える#

ngrok を実行するたびに一時的な URL が提供されますが、毎回手動でリンクをプロジェクトに貼り付けるのは非常に面倒です。そこで、ngrok が提供する API を使用してプロジェクト内の baseURL を置き換えることができます。まず、API Key を申請し、apikey を記録します。説明を入力するだけで、特に難しいことはありません。次に、公式ドキュメントを確認し、公式は私たちに 6 つの言語の API ライブラリを提供しています。私は Python を使用しており、API の使用に関するチュートリアルは公式が非常に詳細に書いているので、ここでは紹介せず、スクリプトをそのまま貼り付けます。
```
#!/usr/bin/env python
import ngrok
import re,os

# APIクライアントを構築
client = ngrok.Client("apikeyを入力")

public_url = ""

# すべてのIPポリシーをリスト
# 私はFree Planなので、一時的なURLを一つ持っているため、特に処理はしていません
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 を置き換えるための 2 つのスクリプトを書くことができます。

注意：以下のスクリプトは MacOS を基に作成されていますので、システムに応じて調整してください。以下のシェルスクリプトを使用する場合は、実行スクリプトを 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 を使用して一時的な URL を取得し、プロジェクトに置き換える#

四、スクリプトを実行する#