Hirooooo’s Labo

開発メモ、ガジェット、日記、趣味など、思った事を思ったまんま書くブログ

localhostにhttpsで外部から接続できるようにする方法(ngrok使用)

f:id:hirooooo-lab:20190614123738p:plain

開発しているときにlocalhostに接続して開発すると思うんですけど、corsの問題だったり、最近だとFacebookのログイン連携がhttps必須になったので、そのためにhttps接続をしたいことがありました。
また、開発中の画面を共有したりするときに、外部からlocalhostに接続できたら客やメンバーに見せるのも楽になりますよね。
そんなときに見つけたngrokというサービスが素敵だったのでご紹介です。

ngrokとは

まずは今回使用したngrokというサービスがどんなものサービスなのか簡単にいうと、ローカル上で稼働しているWebサーバーなんかを外部公開できるサービスです。
しかもhttpsのURLも発行されるので、実質的にSSL通信によるhttps外部接続も可能になります。

実にすばらしい

ngrokのインストール

今回はMacを前提にお話を進めるのでそれ以外の人はページ下部の参考リンクや公式サイトを見てくださいね。
↓公式サイト ngrok.com

HomeBrewを使ってngrokをインストール

Macでお馴染みbrewで簡単にインストールできます。

$ brew cask install ngrok

ngrokのバージョン確認

インストールができたらいつもどおり-vでバージョン確認してみましょう。
以下のようにバージョンが表示されればOK

$ ngrok -v
ngrok version 2.3.29

外部アクセス用URLの発行

ngrokのインストールが終わったら、いよいよ外部アクセス用のURLを発行してみましょう。
localhost:8080でwebサーバーのアクセスができるようにしておいて下さい。

ngrokの実行

以下のようにngrokのコマンドにポートを指定して実行しましょう。

$ ngrok http 8080

※ 8080 はポート番号なので適宜変更してください。

するとかんな感じで表示されるともいます。

$ ngrok http 8080
ngrok by @inconshreveable                                                                                              (Ctrl+C to quit)

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

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

これで表示されたhttp://xxxxxxxx.ngrok.ioで外部からlocalhostのWebサーバーにアクセスすることが可能になります。
httpsで接続したい場合は下の方のhttps://xxxxxxxx.ngrok.ioにアクセスすればOKです。
(いや〜超便利)

Invalid Host Headerと怒られる時

localhostで建っているwebサーバーがWebpackDevServerを利用している場合、Invalid Host Headerと表示されてしまい繋がりません。
その場合は、WebpackDevServerの設定でdevServer.publicを設定する必要があります。

webpack.configに以下の設定を追加するか、起動コマンドに--publicでURLを指定する必要があります。

{
  // ...
  devServer: {
    public: xxxxxxxx.ngrok.io,
  }
  // ...
}

または

webpack-dev-server --public xxxxxxxx.ngrok.io

としてwebpack devserverを起動して下さい。

ngrokを使用してlocalhostに外部からhttps接続するまとめ

今回ngrokを使用して外部からlocalhost向けに接続する方法をやってみました。
簡単にできますし、これ、かなり素晴らしいサービスだと思います。
開発時の確認なんかで使用する分にはFreeプランで十分でした。

有料プランもいくつかあるようなので、もっと使い倒したい方はこちらの料金プランを見てみて下さい。
https://ngrok.com/pricing

参考サイト

Facebookログインがhttps必須になったので、localhost開発でも対応する - Qiita

WebpackDevServer で建てたサーバーが ngrok から見れない時 - Qiita