- 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 ngrokngrokのバージョン確認
インストールができたらいつもどおり-vでバージョン確認してみましょう。
以下のようにバージョンが表示されればOK
$ ngrok -v
ngrok version 2.3.29httpsでの外部アクセス用URLの発行
ngrokのインストールが終わったら、いよいよ外部アクセス用httpsのURLを発行してみましょう。
前提としてlocalhost:8080でwebサーバーのアクセスができるようにしておいて下さい
ngrokの実行
以下のようにngrokのコマンドにポートを指定して実行します。
$ ngrok http 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を起動して下さい。
localhostにhttpsで外部から接続できるようにするngrokのまとめ
localhost環境に外部からhttps接続するためにngrokを使用してみました。
簡単にできますし、これ、かなり素晴らしいサービスだと思います。
開発時の確認なんかで使用する分にはFreeプランで十分でした。
有料プランもいくつかあるようなので、もっと使い倒したい方はこちらの料金プランを見てみて下さい。
- ngrokを使えばlocalhostに外部から接続できる
- しかもhttps接続もできる
- webpackの場合はpublic設定を忘れちゃダメ
参考サイト
参考にさせていただいたサイトです。
ありがとうございます！
コメント