blog母ブログメニューしずかなかずし'かずし'の日々の気づきを'しずか'に発信するメディアTop>ネットワーク(本サイトは、アフィリエイト広告を利用しています)ngrokの使い方。ネットワークこんにちは!趣味の週末プログラミングのはずが、新しくサービスを立ち上げるためにサーバーのインフラ系の勉強に忙しく、肝心のプログラミングが全然進まないので、週末の日数が倍になればいいのにー、と非現実的な妄想にとらわれている、しずかなかずしです。サーバー開発してますか??「しずかなかずし」ブログでも何度か取り上げている、NodejsのWebアプリ開発。Nodejsのデファクトスタンダードとも言うべき、ExpressというのWebアプリケーションフレームワークはご存知でしょうか。Expressフレームワークを使うと、ローカルPCに簡単にWebサーバーが立ち上がるので、開発がすこぶる快適です。ほんの数行のコマンドを叩くと、http://localhost:3000のようなURLでアクセス可能な「ローカルPC」サーバーのでき上がり。ローカルPCで動作している、開発中のExpressのサーバーに外部ネットワークからアクセスしたい、と思うことありますよね?例えば、開発中のWebアプリにスマホで使った操作感はどうなんだ?という場合ですね。以前から私も時折使っていた、ngrokというツールは、このようなケースにとても便利なのです。本日は、改めてngrokを取り上げてみます。Expressのサーバーを立ち上げるngrokとは?ngrokは、ローカル、つまり手元のPCのWebサーバーに対して、外部アクセス可能なURLを割り当ててくれるサービスです。...https://ngrok.com/このサービスを使うと、ローカルPCのサーバー(localhostのようなアドレス)にhttp://aabbccdd.ngrok.ioといったURLが割り当てられます。世界中のどこからでも、このアドレスにアクセスすれば、手元のパソコン上で動作するサーバー・プログラムと通信できるようになるのです。ホームルーター(NAT)があろうと、どんな環境でろうと、ローカルPCがインターネットワーク接続されてさえいれば、外部からのアクセスを可能にしてくれる、夢のようなサービスです。コマンド一発でURLを割り当ててくれるのです。FreeBSDといったOS向けのものが用意されています。開発マシンのOSに依存せずに使えるのはうれしいですね。インストールはngrokのダウンロードページから適切なバージョンのファイルをダウンロードして、解凍するだけ。/path/to/ngrok.zip同じディレクトリに、ngrokというコマンドが登場します。3000番ポートで動いているサーバーに、世界中どこからでも、アクセス可能になってしまいます。<YOUR_AUTH_TOKEN>なるコマンドを実行せよ、と記載されています。2.3.35では、この手順が不要で、上記のように、アカウント登録無しで使い始めることができるようです。仕組みをざっと説明すると以下の絵になります。ngrokのコマンドを実行する際に、ローカルで動作するHTTPサーバーのポート番号を指定しますが、これがngrokのサーバーに登録されます。この時に、ngrok.ioのサブドメインが割り当てられます。上の図では「xxxx」となっている部分です。ランダムな文字列になります。ブラウザからアクセスする先は、ngrok.ioというサーバーなのですが、そのサブ・ドメイン「xxxx」にアクセスします。スマホからもアクセス可能です。Expressで動作するサーバーとやり取りできる、という感じです。便利なngrokですが、無料のプランで使う場合に、1つ難点があります。ngrokのコマンドを実行した時に割り当てられるサブ・ドメイン名が起動するたびに変わってしまいます。これは困るケースも出てくるかと思います。URLをどこかのサービスに登録して動作させる必要があるような場合です。私の場合は、OAuthのアプリケーション登録を認証サーバーに登録するケースが問題になりました。毎回違うものを登録し直す必要があります。WebHookのコールバックを受ける(Listenerの実装)ためにサービス側にURLを登録する、なんてケースでも問題になりますね。そんなときのために、ドメインを固定(reserve)する仕組みが用意されています。月に5ドル支払えば、使えるようです。用途に注意してプランを選びたいですね。Expressの最初の手順もおさらいしてみます。私は、Ubuntuで以下のバージョンで試しました。Nodejsが古いですが、ご愛嬌です。-vv8.10.0まずは、express-generatorをインストールしましょう。セット全体にインストールできますが、私は個別の環境にインストールしてみました。express-generatorを実行します。-gオプションを付けます。プロジェクト(Webアプリ)を作ります。hello作成されたhelloディレクトリに移動して、必要なパッケージをインストールします。helloディレクトリの下にあるbin/wwwというNodejsのプログラムが実行されます。Expressのデフォルト実装では、3000番ポートでHTTPの待受を開始します。そこで、おもむろに別ウインドウ(別ターミナルアプリ)を開き、ngrokを実行してみましょう。実行は、ngrokを展開したディレクトリで行います。3000以下のような画面が表示されます。アクセスすればよい、ということになります。「2a779c41」がサブ・ドメインで、タダで使っていると起動のたびに変わってしまうアドレスですね。ありがたいことにHTTPSでもアクセス可能なのです。アクセスにアクセスしてみます。itLinkedInB!HatenaPocketLINELINERSSFeedlyCopyテレワークに最適なマイクは実は自宅カラオケ用マイクだった!その理由は...NextさくらVPSの無料お試し期間中にキャンセルした理由。週末にプログラミングと料理を楽しむ、しずかなかずしです。Proxyの使いどころ。...IchigoJamでパソコンとUSBシリアル通信。ネットワークでIPアドレスを固定する方法。10版を遅延なく使う接続方法。して声が遅れるの?20年近く使っているGE冷蔵庫が復活した!これはまだまだ使えるぞ〜TP-LinkルータのDMZで自宅サーバーのポート開放!セキュリティーに注意して使い分け自宅サーバのルーター設定はUPnPでポート開放。「家」アナロジーで解説!最新のAirScreenで画面をキャスト。ネットワーク上の機器を探す!あきれるほど便利なネットワーク解析アプリAndroidスマホからAirScreenへのキャストする方法。特急ロマンスカーで箱根へ。stickでAirScreenを使う。free".ホームメニューSNS上へ。