1490
1194

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ngrokが便利すぎる

Posted at

はじめに

先日利用したngrokというサービスが便利過ぎたので紹介します。

ngrokとは

簡単にいうと、ローカルPC上で稼働しているネットワーク(TCP)サービスを外部公開できるサービスです。例えば、ローカルPCのWebサーバを外部公開することができます。

ngrokの導入

ngrokにユーザ登録

ngrok公式サイトからユーザ登録します。Githubアカウント、Googleアカウントでも登録できるのでお好みで登録します。

ngrokコマンドをインストール

ngrokのサービスを利用するには、公開されているngrokコマンドを使用します。ダウンロードサイトからOSに合ったファイルを取得します。ツールはzip圧縮されているだけなので、ファイルをダウンロードしたら任意の場所に解凍します。

ngrokコマンドをインストール

ツールのインストールが完了したら、アカウント登録後に表示される「Welcome to ngrok!」のページに表示されている「Connect your account」に記載されているngrokのコマンドを実行し、認証トークンを取得します。
認証トークンの取得が成功すると、~/.ngrok2/ngrok.ymlが生成され、認証トークン情報が登録されます。
これで、準備は完了です。

ngrokでWebサイトを公開する

それでは、ngrokを使ってローカルPCのサービスを公開してみます。今回はローカルPCにnginxをインストールして、Webサイトを公開します。
まずは、ローカルにnginxをインストールしましょう。以下、Macでの例です。

nginxのインストール
brew install nginx

インストールが完了したら、nginxを起動し、ローカルPC上Webサイトが表示できることを確認します。Macの場合、nginxのデフォルトポート番号は8080なので、ブラウザでhttp://localhost:8080に接続します。nginxが正常に稼働しているとnginxデフォルトページ「Welcome to nginx!」が表示されます。

nginxの起動
nginx

続いて下記のとおりngrokコマンドを実行し、外部公開用のURLを払い出します。

ngrokによるWebサイトの公開
ngrok http 8080

成功するとコンソールに次の内容が表示されます。(一部「XXXXXXXX」でマスク済み)

ngrok実行結果
ngrok by @inconshreveable                                       (Ctrl+C to quit)
                                                                                
Session Status                online                                            
Account                       XXXXXXXX (Plan: Free)                             
Version                       2.2.8                                             
Region                        United States (us)                                
Web Interface                 http://127.0.0.1:4040                             
Forwarding                    http://XXXXXXXX.ngrok.io -> localhost:8080        
Forwarding                    https://XXXXXXXX.ngrok.io -> localhost:8080 

上記の「Forwarding」に表示されているURLをブラウザでアクセスし、nginxのindex.htmlの内容が表示されていれば無事公開されています。

ここがすごいよ!ngrok!!

ngrokについて個人的にすごい!と思うことを書きます。

httpsでの公開ができる

上記の例で、実行結果のForwardingが2あり、「https」が用意されているのがおわかりでしょうか。ngrokはSSL認証の部分を肩代わりしてくれ、ngrokの公開エンドポイントまでSSL通信が可能です。認証の機構がデフォルトで用意されているのはありがたいですね。

公開できるのはhttp/httpsだけじゃない

ヘルプ(ngrok --help)を見るとわかるのですが、ngrokはngrok tcp 22 と実行すると、sshサーバを公開することができます。ngrokは「tcp通信」を公開するサービスなので、任意のポートのtcp通信を公開できます。telnetもsshもftpも独自通信も公開できます。これは強力な仕組みだと思います。

おわりに

いかがだったでしょうか。
個人的には、勉強会とかデモの公開なんかで使うと思います。教材やサンプルコンテンツの提供するのに、いちいちクラウドにアップして公開して・・・というのはめんどうだなと思ってました。これから使っていきたいと思います。

1490
1194
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1490
1194

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?