Help us understand the problem. What is going on with this article?

ngrokが便利すぎる

More than 1 year has passed since last update.

はじめに

先日利用した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も独自通信も公開できます。これは強力な仕組みだと思います。

おわりに

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

mininobu
ulsystems_inc
東京都中央区晴海に本拠を置くITコンサルティング会社です。技術的な知見に基づいて技術案件から上流案件まで幅広くご支援しています。
https://www.ulsystems.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした