20250423_Web技術集会_Webアプリ開発でコンテナする
164 Views
April 25, 25
スライド概要
VRChat上のイベント『Web技術集会』での発表資料です
https://x.com/vrwebtechorg/status/1914317749389824496
ソフトウェアエンジニアのはしくれ VRにも存在する
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
887.9K
各ページのテキスト
Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも 開発してみた～ 2025/04/23 Web技術集会 なのなの @nano2_aloerina HashTag: #Web技術集会 Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 写真撮影 動画撮影 ○ ○ 資料公開 マサカリ △ △ 多分します お手柔らかに
Who is ❏ ❏ ❏ なのなの ❏ @nano2_aloerina ❏ @[email protected] ❏ nano-nano VRChat ❏ のらりくらりと5年目くらい ❏ かわいいムーブﾁｮｯﾄﾃﾞｷﾙｶﾓ ❏ 誕生日インスタンス混雑対応係(？) おしごと ❏ Webフロントエンドエンジニア ❏ Webバックエンドエンジニア ❏ プロジェクトマネージャー ❏ テックリード ❏ 新人若手教育 ❏ ほか（不本意ながら）いろいろ... Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 2
時とともに変わっていくもの、いかないもの Webアプリ開発ひとつをとっても 使われる技術・アーキテクチャ・環境などは、時代とともにいろいろ変わっていく とはいえ、開発環境構築のつらみは今も昔も変わらない印象 ❏ ❏ ❏ ❏ ❏ ❏ ❏ 最終更新日が5年前の手順書 手順書通りにやったらIDEのあちこちでエラー表示 最新版のツールをDLすると動かない 別プロジェクトの指定バージョンとバッティング 「○○さんのところではできたが、✕✕さんのところではできない」 OSがWindows vs OSがmac 追加しまくって収拾付かなくなる環境変数（PATHとか） 下手すると 数時間・数日溶ける！ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 3
そこで登場 Dev Container 開発に必要な環境をDockerコンテナとして作成、ホストPCのVS Codeからリモート接続して あたかもホストPCに開発環境を構築したように扱える仕組み https://code.visualstudio.com/docs/devcontainers/containers Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 4
そこで登場 Dev Container Dev Containerのメリット ❏ ホストPCの環境を汚さない ❏ ❏ 簡単操作で環境構築 ❏ ❏ VS CodeからGUIで環境構築＋環境の設定はファイルに定義 ⇒環境の配布がしやすく、手順のミスが起きづらい 環境再現度の高さ ❏ ❏ DockerやVS Codeなどのインストールは必要だが、それ以外にアレコレ入れたり PATHを通したりは不要 Dockerという仕組み上、開発者間での「動く・動かない問題」が起きにくい 使い捨てのしやすさ ❏ そもそもDockerの思想は「作って捨てる」なので、開発環境の作り直しが簡単にできる Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 5
そこで登場 Dev Container Dev Containerのデメリット ❏ Dockerの知識が必要 ❏ ❏ ❏ トラブルシューティングのためには、Dockerの基礎知識がないとどうしようもない ジュニアエンジニアや新しい技術に関心の無いエンジニアにはハードルが高いかも…… Linux上で作れない環境は作れない ❏ ❏ それはそう（ベースの技術はDockerなので） 逆に、Webアプリはコマンドラインで基本なんとかなるので コンテナでの開発環境構築に向いている（と思われる） Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 6
ものは試しで使ってみる ご丁寧にチュートリアルがあるので、参考にしながらやってみる 1. ホストPCにDockerとVS Codeをインストールする ❏ Windowsやmacなら、Docker DesktopでもOK ❏ ❏ Windowsなら、WSL2の上に素のDockerをインストールすればライセンス問題もセーフ VS Codeはお好きなインストール形式で 2. VS Codeに拡張機能をインストールする ❏ ❏ Dev Containers - Visual Studio Marketplace 他のリモート開発機能もセットになった Remote Development という拡張機能もある Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 7
ものは試しで使ってみる 3. VS Codeを開き、コマンドパレットを開いて「devcontainer」と入力する ❏ ❏ 拡張機能が正しくインストールされていれば、Dev Container関連メニューが出てくる その中に「サンプルを試す」というのがあるので、これを使ってみる Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 8
ものは試しで使ってみる 4. 好きなものを選んで、Dev Containerのサンプルを起動する ❏ ❏ ここでは、Node.jsを選んだとして話を進める しばらく待ち（コンテナイメージのPullなどがあるので）、左下のステータスバーに 接続中の表示がされればOK コンテナへの接続OK！ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 9
ものは試しで使ってみる 4. 好きなものを選んで、Dev Containerを起動する ❏ ちなみに、Node.jsのサンプルはExpressによる簡易Webサーバーの実装 ホストPCで開発する感覚でターミナルを開き、npm run start or yarn start で サーバーが起動できる ❏ ちゃんとポートも転送されているので、http://localhost:3000/ でアクセスできる リモート接続したコンテナ内で コマンドを入力している ちゃんとポート転送もされる ポップアップで教えてくれる Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 10
設定はどこに？ サンプルでは、.devcontainer/devcontainer.json にDev Containerの設定が書かれている 実際の開発で使う場合も .devcontainer フォルダを作成し、必要なものはこの中に格納すると VS Codeでコンテナを起動する際に正しく認識される Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 11
実案件で使ってみてのTips コンテナ周りの設定は devcontainer.json だけで完結させない方が良い ❏ 現実にはアプリ用コンテナだけでなく、同時に動かしたいコンテナがある場合がほとんど ❏ ❏ DB用コンテナとか、LocalStack（AWSエミュレーション環境）用コンテナとか devcontainer.json では docker-compose.yml も指定できるのでComposeを使うのが良い Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 12
実案件で使ってみてのTips コンテナ周りの設定は devcontainer.json だけで完結させない方が良い ❏ アプリ用コンテナについては、Dockerfileを作っておくとカスタマイズしやすい ❏ 案件によって追加で必要なツールも変わってくるので、インストールコマンドなどを Dockerfileに書いておく AWS CLIなどを使うため 必要なコマンドを追加した例 Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 13
実案件で使ってみてのTips Windowsなら、ソースコードはWSL2上に置いてマウントする ❏ Windows上にソースコードを置いて、Dev Containerとマウントする場合は ファイルシステムの違いからI/O速度が遅くなり使い物にならない ❏ ❏ 個人的に試した限りでは、フロントエンド（Vite）のホットリロード動作も怪しい WSL2上にソースコードを置いて、Dev Containerとマウントする場合は Linux同士のマウントになるので、実用的なI/O速度で開発できる ❏ このことは、Dockerのドキュメントにも記載がある Windows OS これはNG！ マウント WSL2 Dev Container （フロントエンド） マウント これはOK！ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 14
実案件で使ってみてのTips フロントエンド(Vite)では vite.config.ts の server > host オプションをtrueにする ❏ コンテナ外から開発サーバーにアクセスできるようにするため ❏ 調べればこのあたりなど情報が出てくるのだが、探すのに苦労した Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 15
実案件で使ってみてのTips Dev Container起動時はVPN接続しない ❏ とある実案件では、客先AWS環境がIP制限されているのでVPNで接続している ❏ ❏ ところが、VPN接続した状態だと、Dev Containerの起動シーケンスが止まる現象が発生 ❏ ❏ ❏ 本社の固定IPをホワイトリストに突っ込んで、というよくあるやつ 本社に出社して使うと現象は発生しない 詳しいところは分からないが、VPNと相性が悪いのかもしれない 一度起動してしまえば、あとはVPN接続して問題ない ❏ ❏ ので、私はDev Container起動時だけVPNを切っている このあたり、詳しい人の助言求む……！ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 16
まとめ ❏ Dev Containerは、コンテナ技術で開発環境が構築できる技術 ❏ Webアプリ（フロントエンド/バックエンド）は、Dev Containerを使って十分開発できる ❏ ちょいちょいハマりポイントはあるが、乗り越えられれば結構便利 Dev ContainerでDX（Developer eXperience） あげてこー！ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 17
おまけのはなし Dev ContainerでGUIアプリ開発？ GUIアプリ（Tauri）の開発環境をDev Container上に構築し、VNCクライアント（noVNC）で Dev Containerに接続 なんて荒技を駆使してる例もあるらしい この辺とか、この辺とか... Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 18
おまけのはなし 実際に使っているディレクトリ構成 .devcontainer (root) ┣ .devcontainer ┃ ┣ devcontainer.json ┃ ┣ docker-compose.yml ┃ ┗ Dockerfile ┣ app ┗ (その他必要なディレクトリ) Dev Container起動に必要なファイル用フォルダ app ソースコード格納用フォルダ docker-compose.ymlのvolumesでマウントする (その他必要なディレクトリ) たとえば... ❏ ❏ Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano DBのconfigファイルを置くためのフォルダ をマウントする AWS CLIの設定を置くためのフォルダをマ ウントする 19
EOF Webアプリ開発でコンテナする ～Dev Containerでフロントもバックも開発してみた～ (c) 2025 nano-nano 20