明日業務で役立たない Web 開発 TIPS

2022.11.19 フロントエンドカンファレンス沖縄

Transcript

1. 明日業務で役立たない
   Web 開発 TIPS
   2022.11.19 フロントエンドカンファレンス沖縄
   © 2020 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.
   

   View Slide

2. hoto / @hoto17296
   • ちゅらデータ株式会社
   • “Web ギルド” ギルドマスター
   • スタートアップなんでも屋
   • Web / 機械学習 / データ基盤 / XR / インフラ / 情シス / etc…
   • 今日はオンライン登壇
   • 昨年まで沖縄に住んでいたけど今は愛知からフルリモート勤務
   

   View Slide

3. 最近やっていること
   「データ」の会社
   → データに関わるなら「分析」でも「基盤構築」でも「アプリ開発」でも何でもやる
   → コンテンツ制作とかは基本やっていない
   なんか Web で AR やる案件きました！！！！！
   hoto さんどうですか！！？？？
   

   View Slide

4. 「どうですか？」ではない
   • Web 屋は長くやってきたが XR (VR/AR) 領域はまったくの未知
   • Unity？ってやつで3Dモデリングとかやるのだろうか、難しそう
   ※ Unity はモデリングツールではない
   • そもそも5年前に「Web の次は機械学習か XR 開発やろ」と思い立って
   「でも XR 開発は酔うから機械学習にしよ」とちゅらデータを
   選んだにも関わらず、なぜ今更 XR を？
   まぁ 面白そうだし やるかーーーーーー (勢い
   

   View Slide

5. というわけで (？) ここ1年半くらい
   なぜか Web で AR をやっています
   

   View Slide

6. Web AR について、詳しくは
   同じチームの bayes さんが色々話してくれるはず！ (しらんけど
   

   View Slide

7. 本題にはいります
   スポンサートークなら何でも好きなことを喋っていいと聞きました
   

   View Slide

8. 課題
   Web AR 開発の難しさのひとつに「実機じゃないと検証しづらい」がある
   カメラへのアクセス
   ジャイロセンサへのアクセス
   位置情報 (GPS) へのアクセス
   Web AR アプリを動かすにはさまざまな
   ハードウェア・センサを利用する必要がある
   ※ しかも一部の Web API は HTTPS が必須
   → PC だけで Web AR 開発するのはしんどい
   

   View Slide

9. プロジェクト開始当初の開発環境
   都度ビルドして rsync で送ってからスマホから確認するという
   あたたかみのある開発フロー
   開発用マシン
   開発用スマホ
   どっかにあるサーバ
   (Global IP アドレスとドメインがついている)
   Nginx
   example.com:443
   開発環境
   コードベース
   • TypeScript
   • React
   • Three.js
   ビルド
   済み
   アプリ
   ビルド
   済み
   アプリ
   ビルド
   済み
   アプリ
   ビルド
   済み
   アプリ
   ビルド
   済み
   アプリ
   ビルド
   済み
   アプリ
   都度
   手作業で
   rsync
   ビルド
   シンプルにめんどくさい
   Vite 使ってるのに HMR できない
   ブラウザキャッシュちゃんと消さないと
   ハマる (特に iOS Safari)
   

   View Slide

10. 実現したいこと
    開発用の public HTTPS エンドポイントにアクセスすると、謎のパワーで
    ローカルで動いている Vite dev server につながって欲しい
    開発用マシン
    開発用スマホ
    Docker Compose
    webapp
    (コンテナ)
    Vite dev server
    webapp:5173
    開発環境
    コードベース
    (コンテナ内にマウント) 謎のパワー
    

    View Slide

11. どうする？
    

    View Slide

12. 補足：やらなかった方式
    • ngrok 使う案
    • 今回は IP 制限したい要件があったので ngrok だと有料プランが必須だった
    • 後述する手法で作ってしまったほうが簡単そうだったので使わなかった
    • (類似ケースで) ngrok で事足りるケースはあると思う
    • 自己署名証明書使ってローカルネットワーク内で動くようにする案
    • 新メンバーの環境構築が手間がかかる
    • 自己署名証明書を開発メンバー全員の PC にインストールしたくない
    • リモートワークしていると開発中画面の共有がしづらい (ペアプロしづらい)
    • 一人だけで開発するならこれでもよさそう
    他にもいくつか案はあったが不採用に
    

    View Slide

13. とりあえず SSH Remote Port Forwarding
    これだけでできるっちゃできるが…
    開発用マシン
    開発用スマホ
    Docker Compose
    webapp
    (コンテナ)
    どっかにあるサーバ
    (Global IP アドレスとドメインがついている)
    SSH Remote Port Forwarding
    localhost:8100
    Nginx
    example.com:443
    Vite dev server
    localhost:5173
    開発環境
    コードベース
    (コンテナ内にマウント)
    ssh -R 8100:localhost:5173 example.com
    proxy_pass http://localhost:8100;
    ※ WebSocket を通す設定も必要だが割愛
    base = “/” // ここはよしなに
    server.host = true
    server.hmr.clientPort = 443
    時間経つと接続が切れててストレス
    開発環境を動かすたびに
    長いコマンドを打つの面倒
    

    View Slide

14. 余談： 開発環境はコマンド一発で動かせるべき (過激派)
    • 複数のプロジェクトに関わっていると「このアプリはどうやって動かすのだ
    っけな」と開発環境の切り替えのたびに README を読むのが面倒
    • 開発環境の動かし方が複雑だと、新メンバーのオンボーディングや
    引き継ぎのコストが高い
    • 初回だけは多少の初期設定 (環境変数書くとか) はあるとしても、
    基本的には docker compose up だけで必要なサービスがすべて自動で
    起動してくれるのが幸せでは？？？
    • フロントエンドだけなら npm start でもいいが、たいてい DB とかも動かしたいので
    開発環境って docker compose up だけで動くべきだと思いませんか？？？
    

    View Slide

15. 続・SSH Remote Port Forwarding
    では、この部分を Docker 化しましょう
    開発用マシン
    開発用スマホ
    Docker Compose
    webapp
    (コンテナ)
    どっかにあるサーバ
    (Global IP アドレスとドメインがついている)
    SSH Remote Port Forwarding
    localhost:8100
    Nginx
    example.com:443
    Vite dev server
    localhost:5173
    開発環境
    コードベース
    (コンテナ内にマウント)
    ssh -R 8100:localhost:5173 example.com
    

    View Slide

16. SSH クライアントの Docker 化
    SSH クライアントを入れるだけの
    Dockerfile を書く
    SSH クライアントの設定を色々と書く
    (Keep Alive とか known_hosts 無効化とか)
    リモートフォワードする起動スクリプトを書く
    環境変数で接続先の設定
    秘密鍵をコンテナ内にマウントする
    (ちょっとこわい)
    秘密鍵は Docker Compose の
    Secrets を使ってホストからマウントする
    

    View Slide

17. できあがったものがこちら
    

    View Slide

18. できあがったものがこちら
    開発用マシン
    開発用スマホ
    Docker Compose
    webapp
    (コンテナ)
    ssh_client
    (コンテナ)
    どっかにあるサーバ
    (Global IP アドレスとドメインがついている)
    SSH Remote Port Forwarding
    localhost:8100
    Nginx
    example.com:443
    Vite dev server
    webapp:5173
    開発環境
    コードベース
    (コンテナ内にマウント)
    

    View Slide

19. まとめ：結局何ができたの？
    • ローカル端末で動く Web サーバに、インターネット経由で
    開発用スマホから HTTPS アクセスできるようにした
    • HMR ができる！
    • docker compose up コマンド一発でこの開発環境が起動できるようにした
    • 環境構築が簡単！
    

    View Slide

20. この話は何に役立つの？
    • Web AR アプリ開発には役に立つかもしれない
    • Web AR アプリを開発していこう！(？)
    • SSH クライアントをコンテナ内で起動したいことがあれば
    • そんなユースケースはない
    さぁ…
    

    View Slide

21. お問い合せ先 (？)
    今日は会場にいないので、気になることがあった方はインターネットで
    Twitter
    • フォローしてください！！！(直球)
    • メンション飛ばして質問投げてくれてもいいです
    Meety
    • なんでも雑に話しましょう
    • 「ちゅらデータ Meety」とかでググると出てきそう
    

    View Slide

22. @churadata
    月に一度開催の ライブ配信番組
    ちゅらコラボ
    最新のイベント情報は
    毎回異なるテーマで様々な企業様とTechトークをする
    でも随時発信しています
    日々の情報発信
    技術ブログ
    採用情報
    カジュアル面談
    

    View Slide

23. © 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL.
    データ分析・AI 開発だけじゃな
    い！ 社内の Web アプリエンジ
    ニアに入社経緯やプロジェクト
    のことを聞いてみた
    (ブログ記事)
    結局どっちがいいの？ 自社開発
    vs 受託開発 〜ちゅらデータの
    Webエンジニアが語る受託開発企
    業の赤裸々トーク
    (YouTube)
    

    View Slide

24. Web エンジニア
    積極採用中です！！！
    

    View Slide