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/

Hiroto YAMAKAWA

August 31, 2019
Tweet

More Decks by Hiroto YAMAKAWA

Other Decks in Programming

Transcript

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

    US Retro 配列) 参照:https://twitter.com/de_teiu_tkg/status/1162568699431145477
  3. #ゆる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
  4. #ゆる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クライアント
  5. #ゆる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
  6. #ゆるWeb札幌 ここまで紹介してきた手軽さや技術的な部分はもちろん... • 充実のオプション
 例) Basic認証いれる: ngrok ... -auth="username:password"
 logだしておく: ngrok

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