- ローカルの開発サーバーに外部からアクセスしたい
- Webhook のテストがしたい
python manage.py runserver をすると開発用のローカルサーバーが立ち上がるのはご存知のとおりだと思います。
ところがこのローカルサーバーは外部からアクセスできません。
そうなると、次のような場合に不便です。
- デプロイ後に近い環境での動作確認をしたい
- 開発中のアプリを他の人にお試しで使ってもらいたい
- Webhook の受信テストがしたい
これらの悩みを解決してくれるのが ngrok （エングロック）です。
ngrok を実行すると、開発用サーバーにアクセスするためのURLが発行され、ngrok を経由して外部から開発サーバーにアクセスできるようになります。
本記事では ngrok を実行するまでの手順をイチから解説しました。
※ 本記事の内容は Django を使った場合を想定しています。他のフレームワークをご利用の場合は、適宜読み替えてください。
ngrok でトンネルを作って外部アクセスする方法
ngrok 実行までの流れは以下のとおりです。
- インストール
- ユーザー登録
- ngrok を実行する
1. インストール
OS ごとにインストール方法が異なります。
公式サイトを見ていただき、お使いのOSのインストール方法に従ってを進めてください。
例えば mac OS の場合には、ターミナル上で以下のコマンドを実行します。
※ あらかじめbrew のインストールが必要
brew install ngrok/ngrok/ngrokインストールが終わったら以下のコマンドを実行します。
ngrok --version
>> ngrok version 3.1.1ngrok のバージョンが返ってくればインストールは成功です。
2. ユーザー登録
ngrok は基本的にユーザー登録が必要です。
そのため、サインアップページからユーザー登録を済ませましょう。（登録無料）
メールアドレス・パスワード方式と、GitHub, Goole アカウントを使った登録方法があります。お好みの方法を選択してください。
ユーザー登録が終わったら、ダッシュボードに移動してください。
サイドバーの Your Authtoken をクリックすると、ユーザー固有のトークンが表示されます。
この後使いますので、Copy ボタンを押しましょう。
最後に、ターミナルなどのコマンドライン上で次のコマンドを実行してください。
ngrok config add-authtoken [コピーした Authtoken ]“Authtoken saved to configuration” が表示されれば成功です。
これで、ngrok.yml ファイルにトークンが反映されました。
3. ngrok を実行する
前提として、適当な Django プロジェクトをご用意ください。
その上で、以下のコマンドで開発用サーバーを立ち上げておきましょう。
python manage.py runserver 8000上記コマンドは、わかりやすさを重視して明示的に8000番を指定しました。
続いて、開発用サーバーのポート番号を指定して ngrok を実行します。
ngrok http 8000少し時間がかかる場合もありますが、しばらくすると次のように表示されるはずです。
ngrok
Check which logged users are accessing your tunnels in real time https://ngrok.com/s/app-users
Session Status online
Session Expires 1 hour, 58 minutes
Terms of Service https://ngrok.com/tos
Version 3.1.1
Region Japan (jp)
Latency 9ms
Web Interface http://127.0.0.1:4040
Forwarding https://xxxx-xxx-xxx-xx-xxx.jp.ngrok.io -> http://localhost:8000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00Forwarding にある URL が ngrok によって提供された URL です。
※ https://xxxx-xxx-xxx-xx-xxx.jp.ngrok.io にあたる部分
この URL にアクセスすると、ngrok を経由してローカルで起動した開発用サーバーにアクセスできます。
補足1. Inspect を使ったログの確認方法
ngrok を起動すると表示される画面のうち、Web Interface に書かれたアドレスにアクセスすることでログ的なものが確認できます。
ngrok
Check which logged users are accessing your tunnels in real time https://ngrok.com/s/app-users
Session Status online
Session Expires 1 hour, 58 minutes
Terms of Service https://ngrok.com/tos
Version 3.1.1
Region Japan (jp)
Latency 9ms
Web Interface http://127.0.0.1:4040
Forwarding https://xxxx-xxx-xxx-xx-xxx.jp.ngrok.io -> http://localhost:8000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00実際の画面は以下のとおりです。
どうしてもエラーが出てしまう場合、ngrok 側に問題がないかどうか確認する際に重宝します。
補足2. ngrok で使える主なコマンド
一般的なコマンドをざっとまとめておきます。
# ポート8000番に対してトンネルを作成
ngrok http 8000
# バージョンを表示
ngrok version
# 最新バージョンにアップデート
ngrok update
# ヘルプを表示
ngrok helpその他のコマンドはngrok help コマンドから確認できます。
まとめ
本番環境にアップロードせずにWebアプリの挙動を確認できるので重宝します。
ぜひテストの選択肢の一つとして加えてみてください。
コメント