はじめに
今回ngrokというサービスについての記事を書こうと思います。
このサービスを知った経緯としては、LINEのOGP（Open Graph Protocol）設定がおかしい！という依頼を受け、ローカルサーバー（docker）で修正したはいいものの、URLをLINEに張ってもOGPを確認できないからホントに正しく修正できたかわからない... というところから始まりました。
ローカルサーバーを一時的にインターネット上に公開できないかな？
と調べていたところngrokに行きつきました。
ngrokとは？
ngrok はローカル開発サーバーをインターネット上で簡単に公開できるツールです。
このツールを利用すると、ローカルで実行しているwebサイトやAPIに対して、一時的にパブリックなURLを提供しインターネット上のどこからでもアクセスできるようになります。
一般公開されることで、携帯からでもローカルサーバーにアクセスできるのでOGPの仕様について確認できるようになります。
特徴と機能
・セキュアなトンネリング: ngrok はセキュアなトンネルを提供し、HTTPS接続を通じてローカルの開発環境に安全にアクセスできます。
・インスペクター: リクエストとレスポンスをリアルタイムで可視化し、デバッグに役立つ内蔵のウェブインターフェイスが提供されます。
・再生可能なリクエスト: トラフィックの履歴を保存し、デバッグやテストのためにリクエストを再生する機能があります。
・多プロトコルサポート: HTTP, HTTPS, TCPといった複数のプロトコルをサポートしており、様々なタイプのアプリケーションに対応しています。
・簡単なセットアップ: 初期設定が非常に簡単で、数分でローカル環境をインターネット上に公開できます。
インストールしてみる
ngrokについて説明したところで、実際にインストールを行いたいと思います。
今回インストールする環境はLinuxになります。
こちらのサイトからGet started for freeをクリックしダウンロードを行うことが出来ますが、以下のコマンドでもダウンロードできます。
今回はコマンドで...
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
設定
続いて、以下のURLからアカウントの作成を行います。
アカウントを作成することで、認証トークンを発行できます。
今回LINE上でOGPについて確認するだけなので無料版にします。
アカウントが作成出来たら、ログインしダッシュボードからYour Authtokenをコピーします。
トークンをコピーしたら、コピーしたトークンをターミナルで入力し認証を行います。
ngrok authtoken <認証トークン>
ここまでで、ngrokの設定は完了です。
実際にローカルサーバーを公開してみましょう。
サーバーを公開してみる
今回はdockerで構築したローカルサーバーを公開してみます。
ngrokでサーバーを公開するには、以下のコマンドを実行します。
ngrok http [ポート]
例えばlocalhost:1000で公開しているアプリケーションを公開する場合は、
ngrok http 1000
上記のようなコマンドを実行します。
それではdockerで公開したいポートを確認し公開してみます。
ポートの確認はdocker psで行います。
[18:24:57]tn /docker docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b26bb3ec7b79 web "docker-php-entrypoi…" 8 hours ago Up 8 hours 0.0.0.0:80->80/tcp, :::80->80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp test
[18:24:58]tn /docker
ポート80はHTTP用、ポート443はHTTPS用になります。
今回はポート443を公開します。
ngrok http 443
コマンドを実行するとターミナルが以下の表示になります。
ngrok (Ctrl+C to quit) Sign up to try new private endpoints https://ngrok.com/new-features-update?ref=private
Session Status online
Account test.taro@gmail.com (Plan: Free)
Version 3.18.4
Region Japan (jp)
Web Interface http://127.0.0.1:4040
Forwarding https://7e75-58-156-74-54.ngrok-free.app -> https://localhost:443 Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
この画面に行くと正しくポートを公開できています。
公開されたURLはhttps://7e75-58-156-74-54.ngrok-free.appになります。
ngrokを終了したい時はCtrl+cで終了できます。
ちなみに、停止する度に公開されるURLは変わります。
https://7e75-58-156-74-54.ngrok-free.app/アクセスしたいパスこのようにして、携帯からアクセスすると無事、インターネット上に公開されていることを確認できました。
まとめ
今回は、Linuxでngrokのインストールからローカルサーバー公開の方法までを説明しました。
ローカルサーバーにインターネット上からアクセスしたい場合に、非常に便利なサービスになります。
OGPの確認だけではなく、クライアントにローカルサーバーの画面を触ってもらい、使用感を確かめてもらうこともできます。
ぜひ利用してみてください。