👏
ngrokの超簡単な利用方法

2024/10/03に公開
 0. 例えば「ローカルで作ったアプリをクライアントに見せたいけど、どうやって外部からアクセスしてもらおう？」
「チームメンバーに自分のローカル環境を共有したいけど、簡単にできるツールはある？」
...
もしあなたも同じような悩みを抱えているなら、ぜひこの先も読み進めてください！

 1. ngrok って何？ngrok は、ローカルで動いている Web サーバーと外部からアクセスできる公開の URL をつなぐ、便利なトンネリングツールです。普通、PC 上で開発したプロジェクトをスマホで確認したいとき、同じネットワークにいないとアクセスできませんよね？でも、ngrok を使えば、ローカルの IP アドレス（例えば localhost:8080）を外部からもアクセスできる URL に変換してくれます。

 2. 仕組みは？ngrokは、ローカルホストのサービスをインターネット上に公開するためのトンネルツールで、その原理はTCP上でのエンドツーエンドのデータトンネルを実現することにあります。具体的には、ngrokクライアントが内側のネットワークとngrokサーバーを介して、外部のクライアントとの間にセキュアなトンネルを作成します。これにより、内側のサービスが外部からアクセス可能になります。

 3. 使い方以下のリンクからアクセスし、ログインする必要があります。
https://dashboard.ngrok.com/get-started/setup/windows
インストール（例：Mac OS）
注意点
それぞれのTokenやポートに変更する必要がある

brew install ngrok/ngrok/ngrok
ngrok config add-authtoken
ngrok http http://localhost:8080

 4. テストまず、app.py という名前のファイルを作成し、以下のコードを記述します：
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, this is a Flask app running with ngrok!"

if __name__ == '__main__':
    app.run(port=5000)
この Flask アプリはポート 5000 で動作し、「Hello, this is a Flask app running with ngrok!」というテキストを返します。
ターミナルで以下のコマンドを実行し、Flask アプリを起動します：
python app.py
Flask アプリはローカルの http://127.0.0.1:5000 または http://localhost:5000 で動作します。
新しいターミナルウィンドウを開き、以下のコマンドを実行して ngrok を起動し、Flask アプリを外部に公開します：
ngrok http http://127.0.0.1:5000
これにより、以下のスクショにForwardingにあるhttp://abcd1234.ngrok.io のような外部からアクセス可能な URL が生成されます。この URL を使って、ローカルで実行している Flask アプリにインターネット経由でアクセスできます。




 まとめ今回の手順では、ngrok を使ってローカルで動作している Flask アプリを外部に公開する方法を紹介しました。ngrokを利用し、開発中の Web アプリを簡単に外部に公開し、他の人と共有したり、異なるデバイスからアクセスしたりするのに非常に便利です。
0. 例えば

1. ngrok って何？

2. 仕組みは？

3. 使い方

4. テスト

まとめ

Discussion
