Docker

ngrok経由でローカルのDockerアプリにアクセスする方法

ngrok経由でローカルのDockerアプリにアクセスする方法

今回は、ngrok(エングロック)経由で外部からローカルのDockerアプリにアクセスする方法をまとめます。

「外部からローカル(localhost)のアプリにアクセスして画面確認をしたい」と思っている方の参考になれば幸いです。

環境情報
  • PHP:8.0.6
  • Laravel:8.40.0

ngrok(エングロック)とは何か?

ngrokの仕組みの図

画像引用:inconshreveable/ngrok

 

GitHubに分かりやすい説明があったので引用します。

ngrok is a reverse proxy that creates a secure tunnel from a public endpoint to a locally running web service

参考:inconshreveable/ngrok

 

この文章の通り、ngrokとは、外部のエンドポイントからローカルサービスへの安全なトンネルを提供するリバースプロキシのことです。

もっとざっくり言うと、ローカルのサービス(Dockerコンテナとか)を外部に公開するためのツールくらいに捉えておいても良いかなとは思います。

 

ngrokを使うことによって、普段は自分のマシン内部から「localhost:ポート番号」でしかアクセスできないアプリに、外部(自分のPC)以外からもアクセスすることができます。

例えば、iPhoneからローカルのDockerコンテナにhttpsでアクセスして画面を表示させることもできるのです。

 

より詳しい内容を知りたい方は、公式ドキュメントを参考にしてください。

 

ngrok経由でローカルのDockerアプリにアクセスする方法

ngrokの概要が分かったところで、実際にngrokを使ってローカルに立ち上げたDockerアプリにアクセスする方法をご紹介します。

docker-compose.yamlにngrokコンテナを定義する

今回は、ngrok経由でローカルにDockerで立てたLaravelアプリにアクセスして、Laravelの画面を表示してみます。

現状は、以下のようにLaravelのコンテナが定義してあって、localhost:80でアクセスしたら、Laravelの画面が表示される状況です。

version: '3'

services:
  app:
    container_name: app
    build: ./docker
    ports:
      - 80:80
    volumes:
      - ./app:/var/www/app
    working_dir: /var/www/app
    environment:
      APACHE_DOCUMENT_ROOT: /var/www/app/public

 

※ Dockerを使ったLaravel環境構築の方法は以下の記事を参考にして下さい。

Laravel開発環境をDockerを使ってサクッと構築する【最小限のコード】
Laravel開発環境をDockerを使ってサクッと構築する【最小限のコード】Laravel開発環境をDockerを使ってサクッと構築する方法を解説します。...

 

ここに、以下のngrokコンテナを追加します。

ngrok:
  container_name: ngrok
  image: wernight/ngrok:latest
  ports:
    - ${NGROK_PORT:-4040}:4040
  environment:
    NGROK_PORT: app:80

 

簡単にコードの説明をすると、imageには、ngrokのDockerイメージ(wernight/ngrok)を指定しています。

portsにはホスト側(左)は何番でも良いですが、コンテナのポート(右)は4040を指定しましょう。

environmentには、コンテナで使用する環境変数を定義しています。

ここでは、NGROK_PORTという環境変数にapp:80を指定しており、これによりngrokからappコンテナの80番ポートにリクエストを流す(プロキシする)ことができます。

 

ここまで設定できたら、docker-compose up -d --build ngrokでngrokコンテナを立ち上げましょう。

 

ngrok経由でローカルのアプリにアクセスする

ngrokコンテナが立ち上がったら、ブラウザに以下のアドレスを打ち込みましょう。

http://localhost:4040

 

これにより、以下のような画面が表示されるはずです。

ngrokのアドレス表示画面

 

ここに表示されているアドレスの内、上のアドレスにアクセスすると、ngrok経由かつhttpでappコンテナのアプリに外部からアクセスできます。

逆に下のアドレスを選択すると、ngrok経由かつhttpsでappコンテナのアプリに外部からアクセスできます。

 

試しに下のhttpsのアドレスをアドレスバーに打ち込んでみましょう。

 

Laravelの画面を表示させることができました。

Laravel8のデフォルト画面

 

ちなみに、このURLはngrokが自動生成している値で、ngrokコンテナを立て直す度に毎回変わります。

ドメインを任意の値に固定したい場合は、有料プランに申し込む必要があるみたいです。

 

また、指定されたアドレスにアクセスすることで、以下のような画面(http://localhost:4040/inspect/http)に遷移し、トンネルを介して行われるやりとりの情報(ヘッダ情報、コンテンツ情報など)を確認することができます。

ngrokのリクエスト・レスポンスを確認できる画面

 

ngrok経由でローカルのDockerアプリにアクセスする方法まとめ

今回はngrok経由でローカルのDockerアプリにアクセスする方法をご紹介しました。

docker-composeにngrokコンテナを追加することで、簡単に外部からローカル(localhost)のアプリにアクセスすることができます。

LINEBotのようなhttpsでのアクセスが必須のAPIをローカルで開発する場合や、開発段階のサービスを自分以外の人に触ってもらう場合に非常に有効なサービスだと思うので、ぜひ積極的に使ってみて下さい。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA