開発環境用のトンネリングツールとそのしくみ / mild-web-sap06

「開発環境用のトンネリングツールとそのしくみ」

ゆるWeb勉強会@札幌 #6
https://mild-web-sap.connpass.com/event/132036/

Transcript

1. #ゆるWeb札幌
   開発環境用のトンネリングツールと
   そのしくみ（ngrok編）
   山川広人　（＠gishi_yama)

   公立千歳科学技術大学 情報システム工学科
   Javaエンジニアグループ北海道 Java Do
   1
   

   View Slide

2. #ゆるWeb札幌
   公立千歳科学技術大学 情報システム工学科 専任講師
   R&D： Experimental Development　of ICT (ex:City-Bus Tacking System) 

   Computer in Education, Programming and Programmer's Learning 

   

   Community：
   Hiroto Yamakawa, @gishi_yama
   2
   

   View Slide

3. #ゆるWeb札幌 3
   今一番捗っているキーボード 

   WASD Keyboards でオーダーメード

   （赤軸 × Mac US Retro 配列）
   参照：https://twitter.com/de_teiu_tkg/status/1162568699431145477
   

   View Slide

4. #ゆるWeb札幌 4
   本題
   

   View Slide

5. #ゆるWeb札幌
   ここで取り上げる〈開発環境用のトンネリングツール〉とは？
   5
   プライベートネットワークの内側のマシンをサーバーとして さくっと インターネットに公開できるツール
   何がうれしいか？：

   開発用端末で動かしているWebアプリのデモなどを さくっと ブラウザ越しに使ってもらえる

   モバイルアプリ・Bot・IoTデバイスにむけて開発中のバックエンド側を さくっと 動作確認できる
   参照：https://ngrok.com/product
   

   View Slide

6. #ゆるWeb札幌
   SSHポートフォワーディングでトンネリング

   8月28日未明からサイトごとダウンしてて使えない

   ⇒発表しようと思っていた内容も無事死亡

   （本当はツール間の比較がしたかったのに...）
   利用実績をよくみかける開発環境用のトンネリングツール
   専用のツールを使ってトンネリング

   フリープランでも開発用途には十分に使える

   長期利用や思い切って運用に使う...

   といった用途には有料プランも用意されている
   ※他にもあります
   参照：https://ngrok.com/, https://http://serveo.net/ (2019-08-28時点でダウン中）
   

   View Slide

7. #ゆるWeb札幌
   開発環境で動くJavaプログラムをngrokで さくっと 公開して、LineBotのバックエンドに設定してみる
   〈デモ〉どのくらい さくっと 公開できるか？
   7
   開発PC Router/GateWay
   LintBot用のバックエンドアプリが

   http://localhost:8080/ で起動中
   • Java
   • Spring Boot
   • Line Messaging API
   • H2DB
   LINEサービス スマホ
   LINE Botの中身（Webhook先）を

   開発マシンにできると

   楽に開発できるんだけどな....
   ※ちゃんとした手順をふめば出来ないことはない

   ※めんどいのでだいたいは

   　Herokuなどのホスティングサービスや

   　仮サーバを使う
   Private Network
   

   View Slide

8. #ゆるWeb札幌
   開発環境で動くJavaプログラムをngrokで さくっと 公開して、LineBotのバックエンドに設定してみる
   〈デモ〉どのくらい さくっと 公開できるか？
   Router/GateWay
   LintBot用のバックエンドアプリが

   http://localhost:8080/ で起動中
   • Java
   • Spring Boot
   • Line Messaging API
   • H2DB
   LINEサービス
   ngrok

   サーバー
   〈トンネリング通信〉
   https://xxxx.ngrok.io/への要求を

   http://localhost:8080/に転送し、

   その返答をLINEサーバーに返す

   ※フリープランだと8時間まで
   スマホ
   LINE Botの中身（Webhook先）を

   https://xxxx.ngrok.io/...

   に設定すると、開発環境と通信できる
   Private Network
   開発PC
   参照：https://twitter.com/mokomeme_ch/status/1003302828473872384
   ngrokクライアント
   

   View Slide

9. #ゆるWeb札幌
   最初は「これ便利！」よりも

   「えっ何これ怖っ！使って良いの？」って思った
   安全なの？使って良いの？

   シス官を説得 確認するために、しくみは把握しておこう！
   9
   ^
   ゆるく
   

   View Slide

10. #ゆるWeb札幌
    どういう仕組みで動いているの？
    10
    Private Network
    http://localhost:8080/...
    Router/GateWay
    ngrokサーバー (tunnel.xx.ngrok.com)

    ※ Amazon EC2 に事前に用意されている
    ①
    ① ngrokクライアントを起動すると、ngrokサーバにHTTPS通信を行う。
    ngrokクライアントの起動中は、サーバーとの通信を維持する。

    （long-lived connection） ※有料・登録プランは認証もする。
    ② Webアプリに転送するURLを発行する。

    (例：https://xxxx.ngrok.io -> http://localhost:8080)
    ③ 転送用URLへの通信内容を複写し、①の通信を使って

    ngrokクライアント経由で通信内容をWebアプリに渡す。
    ④ Webアプリからの返信は、③の逆順で宛先に戻す。
    ngrokクライアント
    ③
    Webアプリ
    ④
    ②
    xxxx.ngrok.com
    

    View Slide

11. #ゆるWeb札幌
    つまり、原理は WebSocket とほぼほぼ同じ
    (持続的なリバースプロキシ）
    11
    

    View Slide

12. #ゆるWeb札幌
    ソースコードも公開されている
    12
    https://github.com/inconshreveable/ngrok

    メインはGo言語、インスペクタはJavaScriptベースなので、得意な人は読んでみるといいかも
    

    View Slide

13. #ゆるWeb札幌
    ngrokの動作状況や、受け入れた要求・返信の

    可視化・確認・監視が可能
    同じ情報がREST APIでも取得でき、

    これには元アトラシアンのエンジニアもニッコリ
    インスペクタも同梱されている
    13
    参照： https://ngrok.com/docs,
    https://blog.developer.atlassian.com/secure-localhost-tunnels-with-ngrok/
    

    View Slide

14. #ゆるWeb札幌
    ここまで紹介してきた手軽さや技術的な部分はもちろん...
    • 充実のオプション

    例） Basic認証いれる： ngrok　... -auth="username:password"

    logだしておく： ngrok ... --log-level debug --log stdout
    • フリープランで開発用途に十分な機能・性能、サインアップしておけば8時間縛りも消える

    ⇒ ある程度の期間、試験環境や身内向けサービスとして公開しておける

    　　 （何らかの原因でngrokと切断された時は転送用URLが変わるのでリカバーは必要）
    • 運用を見据えた有料プランもある（$5/maonth〜）

    ngrok自体は国内外の利用事例も多いし、有料プランで転送URLに固定サブドメインが設定できる

    ⇒ なんか公開したいな...という時にそのままスライドできる
    個人的に思う、ngrokのいいところ
    14
    

    View Slide

15. #ゆるWeb札幌
    1. 自分の管理下の環境(自宅とかモバイルルーター）ではないところで使うには、

    「使っていいか？」はお伺いを立てた方がいい　（※聞いちゃうと駄目って言われそうな気はするけど...）

    サーバ管理者から監視してもただのHTTPSの持続的コネクションに見える

    ⇒ ローカルネットワークに外部からの通信が入っていることに気づきづらい、コワイ！
    2. （ローカル環境とngrokサーバーの間は）セキュアに通信できる工夫がされているが、

    公開したアプリやネットワークポートに対する第三者からの攻撃は守ってくれない

    公開したいアプリにセキュリティホールがある状態で使わない、「開発環境だから...」と油断しない
    3. できたばっかりの日本リージョンのngrok鯖がフィッシングサイトに使われ、Chromeが激おこしてくる

    ⇒https://twitter.com/gishi_yama/status/1166777621583028224

    Web-APIやWebhookのテストには問題ないが、Webページのテストには辛い

    ※ngrok鯖のリージョンを AP (Asia/Pacific） や US で頑張る手はある
    個人的に思う、ngrokの利用上の注意
    15
    

    View Slide

16. #ゆるWeb札幌 16
    まとめ
    

    View Slide

17. #ゆるWeb札幌 17
    ngrokはいいぞ！
    ※用法・用量を守って正しく使いましょう
    

    View Slide

18. #ゆるWeb札幌
    • "ngrok Documentation" https://ngrok.com/docs
    • "How does ngrok work ?" https://www.quora.com/How-does-ngrok-work
    • "stackoverflow: Is ngrok safe to use or can it be compromised?"

    https://stackoverflow.com/questions/36552950/is-ngrok-safe-to-use-or-can-it-
    be-compromised
    • "ATLASSIAN Developer: The secret life of ngrok"

    https://blog.developer.atlassian.com/secure-localhost-tunnels-with-ngrok/
    参考文献
    18
    

    View Slide