ngrokで独自ドメイン、IP制限を利用する
この記事の概要
ngrok (エングロック) を実践で利用するために自分がやっている設定をまとめました。
想定読者
- ngrokを利用してみたい人
- ngrokを利用したことがある人
- ngrokで独自ドメイン、IP制限を利用したいと思っている人
事前準備
事前準備として ngrok のサインアップとインストールを実行します。
サインアップを行なう
GitHubアカウントかGoogleアカウントを使うと簡単なのでオススメです。
自分はGitHubアカウントで登録しました。
インストール
https://dashboard.ngrok.com/get-started/setup に記載されている内容に従います。
ZIPファイルを任意の場所にダウンロードして解凍します。
自分は Downloads にファイルをダウンロードして /usr/local/bin/ に展開しました。
cd /usr/local/bin/
unzip ~/Downloads/ngrok.zip
/usr/local/bin/ に設置した理由はパスを通したかったからです。
トークンの設定
以下を実行します。
ngrok authtoken {https://dashboard.ngrok.com/get-started/setup に記載してあるトークン}
実行が完了すると以下のようなメッセージが表示されます。
Authtoken saved to configuration file: /Users/YOUR_USERNAME/.ngrok2/ngrok.yml
この ngrok.yml を編集することでさまざまな設定が可能になります。
動作確認
8109 ポートで起動しているNext.jsのアプリケーションを公開してみます。
以下のコマンドを実行します。
ngrok http 8109
成功すると以下のような表示になりますので Forwarding に記載されているURLにアクセスします。
終了する際は Ctrl+C を実行してください。
Freeプランだとさまざまな制約があります、支障がなければこのままでも良いのですが、より安全に便利に利用するために有料プランにアップグレードしていきます。
独自ドメイン、IP制限の設定
ここから先は有料プランでのみ設定可能な独自ドメイン、IP制限の設定をやっていきます。
プランのアップグレード
https://dashboard.ngrok.com/billing からプランをアップグレードします。
IP制限やCNAMEを利用した独自ドメインでのアクセスも行ないたいので BUSINESS を選択しました。
IP制限がいらない場合は PRO 、 独自ドメインもいらない場合は BASIC もしくは FREE でも良いかもしれません。
料金に関しては以下を参照してください。
独自ドメインでアクセス可能にする
ここではRoute 53にホストゾーン example.com が作成されている前提で keitakn.example.com でアクセスできるように設定してみます。
Endpoints → Domains から「Create Domain」を押下しドメインを作成します。
AWSコンソール側で以下の条件でレコードを作成します。
- レコード名:
keitakn.example.com - レコードタイプ:
CNAME - 値:
xxxxxxxxx.cname.ap.ngrok.io
ngrok 側で以下のように表示されれば設定は問題なくできています。
ngrok の実行時は以下のように region と hostname を指定して実行します。
ngrok http --region=ap --hostname=keitakn.example.com 8109
これで作成したドメインでアクセス可能になります。
ちなみにTLS証明書は ngrok で用意されているデフォルトの物なのでブラウザでTLS証明書のエラーが出ます。
警告を無視することでアクセスは可能ですがこれを解消するためには以下のページから証明書をアップロードする必要があります。
IP制限を追加する
endpoints → IP RestrictionsからIP制限を追加します。
「Attach IP Policy」→「+ New IP Policy」から新規作成します。
あとがき
独自ドメインの設定をやっておけばHTTPSでしか再現できないような処理もローカルで検証できるようになります。
IP制限の設定を行なうことで安全に ngrok を利用できるようになります。
ngrok の利用を検討されている人の参考になれば幸いです。
最後まで読んでいただきありがとうございました。
Discussion