Ngrokを使って効率よく開発しよう

Ngrokとは? 

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

ngrok(エングロックと読みます)とは、ローカルの開発環境で稼働させているネットワークサービスを一時的にネット上に外部公開をすることができるサービスです。 

つまりhttp://localhost:xxxxを外部の人からも一時的にアクセス可能にすることができます。 

何がメリット? ngrok 

Ngrok、では何がメリットなのでしょうか? 

まず開発中のサービスを外部の誰かに共有することが簡単です。Ngrokでは自分の公開したいポート番号を指定して、ngrokを立ち上げると下記のようにランダムに振られるURLを通じて、外部からアクセスすることができます。 

わざわざホスティングサービスにデプロイをしたりする必要がないので、デモ画面をちょっと見てもらいたい時に、「下記のURLを見てね」で済んでしまうのが便利な使い方として考えられるでしょうか。 

もちろん自分で開発している段階でもメリットはあります。例えばスマホの実機で画面を確認したい場合、同じwi-fiにつないで、ipアドレスを調べて…といったことが必要となりますが、この方法であれば、URLを自分のスマホに送って、そのURLをタップするだけで見ることができますね！  

Ngrokの導入をする 

以前までngrokにはアカウントは必要なかったのですが、セキュリティ上の観点からアカウントを発行し、authTokenが必要になったようです。(筆者は知らなかったので、久しぶりに使おうと思ったら、使えなくて少し時間を無駄にしました) 

1．Ngrokの公式サイト(https://ngrok.com/)からアカウントを登録します。 

2．「Setup&Installation」からダウンロードをします。(筆者はWindowsなので下記からダウンロード) 

 3．初回の認証作業のため「Your Authtoken」のページから個別のトークンを控えておきます。(※このトークンは絶対に他人に公開しない事) 

4．ターミナルで下記コマンドの赤線部分にコピーしたトークン貼り付けて実行することで、自端末に認証トークンが追加され、ngrokを使えるようになります。 

Ngrokを実行してみる 

一般的には下記コマンド(xxxxは公開したいポート番号)で実行するだけで、外部にサービスを公開できています。発行されたURLをたたいて実際にそのURLからアクセスできることを確認してみましょう! 

さて、外部に公開はしているURLは誰からでもアクセスができます。ランダムなため心配し過ぎることはありませんが、一部の限られた人にだけ公開ができるようにするには以下のコマンドを利用しましょう 

「basic-auth」オプションに「ユーザ名」と「パスワード(8文字以上)」を付与します。 

そうすることで遷移先のページで、設定したユーザ名とパスワードが入力されない限りアクセスすることができません。安全性を考慮して付けておくのもよいでしょう。 

まとめ 

ここまでngrokのシンプルな使い方を紹介してきました。個人的にはパッと見せたい、httpsでないと使えないメソッドを使用している場合に上手く動作しているか見てみたいなどの用途で使っています。特に難しい使い方でもないので、ngrokを使って効率的に開発を進めていきましょう。 

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞