ngrokのインストールと使い方

1. ngrokとは？

ngrokは、ローカル上で公開しているwebサービスを外部に公開できるツール
例えば、OAuthを使った外部サービスとの連携の開発とかに使います。

2. インストール手順

Windowsの場合

1. ngrok公式サイト(ngrok.com) にアクセスし、Windows用をダウンロードする
2. ダウンロードしたZIPファイルを解凍し、ngrok.exe ファイルを適当なディレクトリにおく。
3. ngrok.exeを配置したフォルダにパスを通す。システム環境変数の設定をしてね。

システム環境変数の設定

• Windowsキー + Pause を押して、「システムの詳細設定」を開きます。
• 「環境変数」をクリックし、Pathにngrokを配置したフォルダのパス（例: C:\ngrok）を追加します。
• コマンドプロンプトを開き、ngrok と打ち込んで正しく実行されるか確認する。

macOS/Linuxの場合

以下のコマンドコピペでOK！

1. ターミナルを開いて、コピペぽちー

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok

---

2. 初期設定

インストール後、ngrokを使うためにはアカウントを作成し、認証トークンを設定する必要があります。

ngrokアカウントの作成

1. ngrok公式サイトにアクセスし、アカウントを作成します。無料プランでOK
2. ログイン後、ダッシュボードから「Your Authtoken」をコピーします。

トークンの設定

コピーしたトークンを入力して認証する。

ngrok authtoken <あなたの認証トークン>

これでngrokのセットアップは完了です。

---

3. ローカルサーバーを公開する

次に、ローカルで動作しているアプリケーションをngrokを使ってインターネットに公開する。
localhost:3000で公開しているNode.jsのアプリケーションを公開する場合はこんな感じ

ngrok http 3000

コマンドを実行すると、次のような出力が表示されます：

ngrok by @inconshreveable                                       (Ctrl+C to quit)

Session Status                online
Account                       your_account (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxxx.ngrok.io -> http://localhost:3000
Forwarding                    https://xxxxxxxx.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

外部からのアクセス

この出力に表示されているhttps://xxxxxxxx.ngrok.ioのURLを使用して、外部のネットワークからローカルサーバーにアクセスできるようになります。

4. ngrokの切断

ngrokを終了したい場合は、単にCtrl + Cを押して、ngrokセッションを終了する。

結論

ガチでめっちゃ使いやすいし簡単！
webエンジニアなら入れておくと良いですよ〜！