#ゆるWeb札幌 開発環境用のトンネリングツールと そのしくみ（ngrok編） 山川広人　（＠gishi_yama)
 公立千歳科学技術大学 情報システム工学科 Javaエンジニアグループ北海道 Java Do 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

#ゆるWeb札幌 3 今一番捗っているキーボード 
 WASD Keyboards でオーダーメード
 （赤軸 × Mac US Retro 配列） 参照：https://twitter.com/de_teiu_tkg/status/1162568699431145477

#ゆるWeb札幌 4 本題

#ゆるWeb札幌 ここで取り上げる〈開発環境用のトンネリングツール〉とは？ 5 プライベートネットワークの内側のマシンをサーバーとして さくっと インターネットに公開できるツール 何がうれしいか？：
 開発用端末で動かしているWebアプリのデモなどを さくっと ブラウザ越しに使ってもらえる
 モバイルアプリ・Bot・IoTデバイスにむけて開発中のバックエンド側を さくっと 動作確認できる 参照：https://ngrok.com/product

#ゆるWeb札幌 SSHポートフォワーディングでトンネリング
 8月28日未明からサイトごとダウンしてて使えない
 ⇒発表しようと思っていた内容も無事死亡
 （本当はツール間の比較がしたかったのに...） 利用実績をよくみかける開発環境用のトンネリングツール 専用のツールを使ってトンネリング
 フリープランでも開発用途には十分に使える
 長期利用や思い切って運用に使う...
 といった用途には有料プランも用意されている ※他にもあります 参照：https://ngrok.com/, https://http://serveo.net/ (2019-08-28時点でダウン中）

#ゆる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

#ゆる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クライアント

#ゆるWeb札幌 最初は「これ便利！」よりも
 「えっ何これ怖っ！使って良いの？」って思った 安全なの？使って良いの？
 シス官を説得 確認するために、しくみは把握しておこう！ 9 ^ ゆるく

#ゆる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

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

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

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

#ゆるWeb札幌 ここまで紹介してきた手軽さや技術的な部分はもちろん... • 充実のオプション
 例） Basic認証いれる： ngrok　... -auth="username:password"
 logだしておく： ngrok ... --log-level debug --log stdout • フリープランで開発用途に十分な機能・性能、サインアップしておけば8時間縛りも消える
 ⇒ ある程度の期間、試験環境や身内向けサービスとして公開しておける
 　　 （何らかの原因でngrokと切断された時は転送用URLが変わるのでリカバーは必要） • 運用を見据えた有料プランもある（$5/maonth〜）
 ngrok自体は国内外の利用事例も多いし、有料プランで転送URLに固定サブドメインが設定できる
 ⇒ なんか公開したいな...という時にそのままスライドできる 個人的に思う、ngrokのいいところ 14

#ゆる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

#ゆるWeb札幌 16 まとめ

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

#ゆる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