Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

8c6c1f0c4c41d0640ade76bd71e9e475?s=128

Hiroto YAMAKAWA

August 31, 2019
Tweet

More Decks by Hiroto YAMAKAWA

Other Decks in Programming

Transcript

  1. #ゆるWeb札幌 開発環境用のトンネリングツールと そのしくみ(ngrok編) 山川広人 (@gishi_yama)
 公立千歳科学技術大学 情報システム工学科 Javaエンジニアグループ北海道 Java Do 1

  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
  3. #ゆるWeb札幌 3 今一番捗っているキーボード 
 WASD Keyboards でオーダーメード
 (赤軸 × Mac

    US Retro 配列) 参照:https://twitter.com/de_teiu_tkg/status/1162568699431145477
  4. #ゆるWeb札幌 4 本題

  5. #ゆるWeb札幌 ここで取り上げる〈開発環境用のトンネリングツール〉とは? 5 プライベートネットワークの内側のマシンをサーバーとして さくっと インターネットに公開できるツール 何がうれしいか?:
 開発用端末で動かしているWebアプリのデモなどを さくっと ブラウザ越しに使ってもらえる


    モバイルアプリ・Bot・IoTデバイスにむけて開発中のバックエンド側を さくっと 動作確認できる 参照:https://ngrok.com/product
  6. #ゆるWeb札幌 SSHポートフォワーディングでトンネリング
 8月28日未明からサイトごとダウンしてて使えない
 ⇒発表しようと思っていた内容も無事死亡
 (本当はツール間の比較がしたかったのに...) 利用実績をよくみかける開発環境用のトンネリングツール 専用のツールを使ってトンネリング
 フリープランでも開発用途には十分に使える
 長期利用や思い切って運用に使う...
 といった用途には有料プランも用意されている

    ※他にもあります 参照:https://ngrok.com/, https://http://serveo.net/ (2019-08-28時点でダウン中)
  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
  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クライアント
  9. #ゆるWeb札幌 最初は「これ便利!」よりも
 「えっ何これ怖っ!使って良いの?」って思った 安全なの?使って良いの?
 シス官を説得 確認するために、しくみは把握しておこう! 9 ^ ゆるく

  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
  11. #ゆるWeb札幌 つまり、原理は WebSocket とほぼほぼ同じ (持続的なリバースプロキシ) 11

  12. #ゆるWeb札幌 ソースコードも公開されている 12 https://github.com/inconshreveable/ngrok
 メインはGo言語、インスペクタはJavaScriptベースなので、得意な人は読んでみるといいかも

  13. #ゆるWeb札幌 ngrokの動作状況や、受け入れた要求・返信の
 可視化・確認・監視が可能 同じ情報がREST APIでも取得でき、
 これには元アトラシアンのエンジニアもニッコリ インスペクタも同梱されている 13 参照: https://ngrok.com/docs,

    https://blog.developer.atlassian.com/secure-localhost-tunnels-with-ngrok/
  14. #ゆるWeb札幌 ここまで紹介してきた手軽さや技術的な部分はもちろん... • 充実のオプション
 例) Basic認証いれる: ngrok ... -auth="username:password"
 logだしておく: ngrok

    ... --log-level debug --log stdout • フリープランで開発用途に十分な機能・性能、サインアップしておけば8時間縛りも消える
 ⇒ ある程度の期間、試験環境や身内向けサービスとして公開しておける
    (何らかの原因でngrokと切断された時は転送用URLが変わるのでリカバーは必要) • 運用を見据えた有料プランもある($5/maonth〜)
 ngrok自体は国内外の利用事例も多いし、有料プランで転送URLに固定サブドメインが設定できる
 ⇒ なんか公開したいな...という時にそのままスライドできる 個人的に思う、ngrokのいいところ 14
  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
  16. #ゆるWeb札幌 16 まとめ

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

  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