- 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外部接続も可能になります。
![](https://hirooooo-lab.com/wp-content/uploads/2020/10/261519-e1603858209342.png)
実にすばらしい!!
ngrokの使い方
ngrokのインストール
今回はMacを前提にお話を進めるのでそれ以外の人はページ下部の参考リンクや公式サイトを見てくださいね。
![](https://cdn.prod.website-files.com/63ed4bc7a4b189da942a6b8c/66857e35669ffc5b744f4ded_feature-homepage-new-1-min.png)
![](https://cdn.prod.website-files.com/63ed4bc7a4b189da942a6b8c/66857e35669ffc5b744f4ded_feature-homepage-new-1-min.png)
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
コマンドを叩くと、こんな感じで表示されるともいます。
$ 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です。
![](https://hirooooo-lab.com/wp-content/uploads/2020/10/261623-e1603858050208.png)
![](https://hirooooo-lab.com/wp-content/uploads/2020/10/261623-e1603858050208.png)
![](https://hirooooo-lab.com/wp-content/uploads/2020/10/261623-e1603858050208.png)
これはすご〜く便利!!
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設定を忘れちゃダメ
参考サイト
参考にさせていただいたサイトです。
ありがとうございます!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RmFjZWJvb2slRTMlODMlQUQlRTMlODIlQjAlRTMlODIlQTQlRTMlODMlQjMlRTMlODElOENodHRwcyVFNSVCRiU4NSVFOSVBMCU4OCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MSVBRSVFMyU4MSVBNyVFMyU4MCU4MWxvY2FsaG9zdCVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSVBNyVFMyU4MiU4MiVFNSVBRiVCRSVFNSVCRiU5QyVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTM0MGQ5OGI4MGZjYzlmNDI3YmQzOWVkY2FjOTJjNGI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrZW50X2VhciZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWYwMmM1NGY5ZmZhYjQ0NzFlM2FmMzU1N2Q1MmZmOWE&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4gZnJlZWU&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=57a746c5690dbdbf297d925218341e62)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RmFjZWJvb2slRTMlODMlQUQlRTMlODIlQjAlRTMlODIlQTQlRTMlODMlQjMlRTMlODElOENodHRwcyVFNSVCRiU4NSVFOSVBMCU4OCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MSVBRSVFMyU4MSVBNyVFMyU4MCU4MWxvY2FsaG9zdCVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSVBNyVFMyU4MiU4MiVFNSVBRiVCRSVFNSVCRiU5QyVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTM0MGQ5OGI4MGZjYzlmNDI3YmQzOWVkY2FjOTJjNGI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrZW50X2VhciZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWYwMmM1NGY5ZmZhYjQ0NzFlM2FmMzU1N2Q1MmZmOWE&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4gZnJlZWU&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=57a746c5690dbdbf297d925218341e62)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9V2VicGFja0RldlNlcnZlciUyMCVFMyU4MSVBNyVFNSVCQiVCQSVFMyU4MSVBNiVFMyU4MSU5RiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MSU4QyUyMG5ncm9rJTIwJUUzJTgxJThCJUUzJTgyJTg5JUU4JUE2JThCJUUzJTgyJThDJUUzJTgxJUFBJUUzJTgxJTg0JUU2JTk5JTgyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03Nzk1NDQ1OTVlYTUyOTZkMzUyNjNkZjUwNzY1N2M3ZA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuanUzMyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2ZmNTBjNGVmYjM3YjM1Njg3NTRiNjhkZDY4MWZkMTM&blend-x=142&blend-y=486&blend-mode=normal&s=b488424b71231e9b150d991a72e24570)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9V2VicGFja0RldlNlcnZlciUyMCVFMyU4MSVBNyVFNSVCQiVCQSVFMyU4MSVBNiVFMyU4MSU5RiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MSU4QyUyMG5ncm9rJTIwJUUzJTgxJThCJUUzJTgyJTg5JUU4JUE2JThCJUUzJTgyJThDJUUzJTgxJUFBJUUzJTgxJTg0JUU2JTk5JTgyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03Nzk1NDQ1OTVlYTUyOTZkMzUyNjNkZjUwNzY1N2M3ZA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuanUzMyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9M2ZmNTBjNGVmYjM3YjM1Njg3NTRiNjhkZDY4MWZkMTM&blend-x=142&blend-y=486&blend-mode=normal&s=b488424b71231e9b150d991a72e24570)
コメント