localhostにhttpsで外部から接続できるようにするngrokの使い方

  • URLをコピーしました!
  • localhost環境でhttps接続をしたい
  • localhost環境に外部から接続したい
  • ngrokってどう使うの?

localhostで開発しているときに、外部からhttpやhttps接続したいときってありませんか?

最近だとFacebookのログイン連携がhttps必須になったので、そのためにhttps接続をしたいことがありました。

また、開発中の画面をユーザーやメンバーに共有したりするときに、直接外部からlocalhost環境に接続できたら便利ですよね。

そこでlocalhostに外部から接続できるようにするngrokというサービスを見つけたので使ってみました。

実際に使ってみて、かなり簡単に外部からのhttp接続やhttps接続が可能になりとても便利だったので紹介します。

この記事でわかること
  • ocalhostに外部から接続する方法
  • さらにhttpsでも接続できる方法
  • ngrokの簡単な使い方
目次

localhostにhttpsで外部から接続できるようにするngrokの使い方

ngrokとは

今回使用したngrokというサービスがどんなものサービスなのか簡単にいうと、ローカル上で稼働しているWebサーバーなんかを外部公開できるサービスです。

しかもhttpsのURLも発行されるので、実質的にSSL通信によるhttps外部接続も可能になります。

オーカミ

実にすばらしい!!

ngrokの使い方

ngrokのインストール

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

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

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

インストールコマンドはこちら。

$ brew cask install ngrok

ngrokのバージョン確認

インストールができたらいつもどおり-vでバージョン確認してみましょう。

以下のようにバージョンが表示されればOK

$ ngrok -v
ngrok version 2.3.29

httpsでの外部アクセス用URLの発行

ngrokのインストールが終わったら、いよいよ外部アクセス用httpsの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を起動して下さい。

WebpackDevServerの場合は、devServer.public設定が必要!

localhostにhttpsで外部から接続できるようにするngrokのまとめ

localhost環境に外部からhttps接続するためにngrokを使用してみました。

簡単にできますし、これ、かなり素晴らしいサービスだと思います。

開発時の確認なんかで使用する分にはFreeプランで十分でした。

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

まとめ
  • ngrokを使えばlocalhostに外部から接続できる
  • しかもhttps接続もできる
  • webpackの場合はpublic設定を忘れちゃダメ

参考サイト

参考にさせていただいたサイトです。
ありがとうございます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次