はじめに
こんにちは🧑💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。
みなさんは開発環境を開発者以外の人に共有したい時、どのようなやり方をしてますでしょうか？ 本番環境以外の確認用の環境があればいいですが、新規開発などではそこまで整備されていないでしょうし、デプロイに時間がかかったりと色々手間ですよね。
今回紹介するngrokというツールを使えば、開発環境を素早く・安全に公開できます！ 開発者以外の人に表示確認してもらうには、中々手軽な手段なので是非ご一読ください。
目次
ngrokでできること
前述したように、以下のことが無料で可能です。
- localhostを外部に公開できる
- ランダムなドメイン名
- basic認証やOAuthで公開制限
- etc...
今回は無料プランでできる上記のことを、手順を踏まえて説明していきます。
手順
インストール
大まかには以下のような手順です。 公式Docsの手順を大まかに掲載しているので、詳しくはGetting Started with ngrokをご覧ください
1. ngrokに会員登録
後の手順の認証のために、会員登録ページからngrokの会員登録をします。
2. ngrokコマンドをダウンロード
HomebrewかZIPファイル経由で、ngrokコマンドのダウンロードをします。
▼Homebrew
$ brew install ngrok/ngrok/ngrok
or
▼ダウンロード
https://ngrok.com/download
3. 認証トークンの追加
会員登録後に、Your Authtokenのページで自分のtokenが確認できます。 このtokenを以下コマンドで追加します。
$ ngrok config add-authtoken TOKEN
4. localhostの公開
port番号とともにngrokコマンドを実行し、localhostの公開ができます。
たとえばhttp://localhost:8000/が稼働中なら、以下コマンドです。
$ ngrok http 8000
成功すれば以下のようにコンソールが表示されます！
Forwardingの項目のURLにアクセスすると、localhostと同じ表示が確認できます。
Session Status online Account xxxx xxxx Version 3.3.0 Region Japan (jp) Latency 4ms Web Interface http://xxx.x.x Forwarding https://xxxx-xxx-xx.ngrok.app -> http://localhost:8000
4.1. basic認証を追加
ちなみに、basic authをつけて公開したい場合、以下コマンドで実行できます。
これで、アクセス時にusernameとpasswordを入力して閲覧できるようになります。
$ ngrok http 8000 --basic-auth 'username:password'
4.2. OAuthを追加
また、OAuthは以下コマンドで追加できます。 たとえばgoogle認証をしてほしければ、こんな感じですね。
$ ngrok http 8000 --oauth google
ただ、これだけではGoogleアカウントを持っている人は誰でもアクセスできてしまいますね。 なので、指定したアドレスしかアクセスできないようにするオプションもあります。
$ ngrok http 8000 --oauth google --oauth-allow-email 'yyy@gmail.com'
yyy@gmail.com以外の人がGoogle認証しても、アクセスできないようになりました。
他にも様々な認証方法があるので、より詳しくはAuthentication with ngrokをご参照ください。
セキュリティ面
セキュリティに関して、各コマンドの特徴をまとめます。
普通の公開方法
$ ngrok http 8000
下記のようなURLが発行されます。
https://8a71-(ハイフン区切りのWAN側IPアドレス).ngrok.app
先頭4文字は(何回か試したところ)ランダムな16進数が振られるので、16の4乗通りに追加でIPアドレスが付与されます。
ドメイン名を総当たり攻撃されても、ほぼ辿り着かないでしょうが、共有リンクが漏れてしまった場合、アクセスできてしまいますね。 これに認証を追加して、より強固にしていきます。
basic認証
$ ngrok http 8000 --basic-auth 'username:password'
basic認証を追加することにより、上記の普通の公開方法に加え、ID/PASSを知らないとアクセスできないようになりました。 ただ、共有リンクと一緒にID/PASSも共有すると想定されるので、上記の「漏れてしまった場合」というリスクは解決できていません。
OAuth(Google認証)
$ ngrok http 8000 --oauth google --oauth-allow-email 'yyy@gmail.com'
これにより、指定したGoogleアカウント以外のアクセスは拒否できます。 共有対象者が特定の一個人のみの場合、これでいいですが、組織内の複数のメンバーに共有したい場合、
$ ngrok http 8000 --oauth google --oauth-allow-domain=company.com
このコマンドで、Gmailの組織ドメイン単位でアクセス可能です。
上記の場合、組織内のxxx@company.comやyyy@company.comといったGoogleアカウントが共有対象です。
まとめ
ngrokでの開発環境の共有方法を紹介しました。 非常に手軽ですが、その反面、セキュリティについて少し工夫しないといけないですね。
例えば、もし共有したいサイトやページがリリース前の内部情報だった場合、漏れる危険性は考慮しておいた方がいいかもしれません。
ちなみに、有料プランで主に以下のことが可能だそうです。 詳しくはPricingをご覧ください。
- カスタムドメイン/サブドメインの設定(Personalプラン)
- IP制限(Proプラン)
- etc...
最後に
ラボルでは、エンジニアを積極採用中です。1、2年目のエンジニアから経験豊富なテックリードやエンジニリングマネージャーまで、興味がある方はぜひご応募ください!!
