ngrok で docker のローカル環境を外部公開 #Docker

ngrok
これを使って自分の localhost を外部公開したい
Mac の人向けです

インストール

$ brew cask install ngrok

もし brew が入っていなければ
The Missing Package Manager for macOS (or Linux) — Homebrew
から設定しよう

ngrok 起動

起動

$ ngrok http 3000

下記の Forwarding が外部公開用のURL

起動時のコンソール

ngrok by @inconshreveable                                       (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://12491a60.ngrok.io -> http://localhost:3000
Forwarding                    https://12491a60.ngrok.io -> http://localhost:3000

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

参考：ngrokを使用してローカル環境を外部に公開する - Qiita

ただし！！！

もちのロンでローカルでは docker にてアプリを起動しているので、

起動

$ ngrok http 8888

だと外部公開できなかった
上のコマンドだと、 localhost を外部公開しているからみたい

docker 🐳

こんな感じでアプリを起動させている
host=0.0.0.0 とあるので、 host を指定して、ngrok を起動したい

dockerの中に侵入

root@54ec94e72bf0:/usr/src/app# npm run dev

> project@1.0.0 dev /usr/src/app
> cross-env NODE_ENV=development webpack-dev-server --open --hot --host=0.0.0.0 --port=8888

Project is running at http://0.0.0.0:8888/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do not use the open flag.

正解

＄ ngrok http -host-header="0.0.0.0:8888" 8888

結論

超絶便利ー