https://geekersnites.connpass.com/event/261441/

1. #geekersnite
「自分のとこでは動くけど…」を無くす devcontainer
2022/10/14 GEEKERS NITE #1
Yuta Matsumura

2. #geekersnite
松村 優大 (MLBお兄さん)
Chief Technical Architect (C#, PHP, Azure)
Microsoft MVP (Developer Technologies)
#fukuten #devblogradio の中の人
@tsubakimoto_s
Currently working for

3. #geekersnite
「自分のとこでは動くけど…」を無くす devcontainer
2022/10/14 GEEKERS NITE #1
Yuta Matsumura

4. #geekersnite
こんな経験ありませんか？
これ作ったので
動かしてみて
動かない・・・

5. #geekersnite
こんな経験ありませんか？
開発環境
• Windows
• Node.js 14
• VS Code
• 手動インストール
• …
開発環境
• macOS
• Node.js 18
• IDE
• homebrew
• …
開発環境の作り方が
バラバラ

6. #geekersnite
開発環境の揃え方
• 同じ PC の支給
• 環境構築のマニュアル化
• セットアップスクリプトの配布
• 共通の仮想環境の配布
• コンテナーイメージの配布

7. #geekersnite
VS Code Remote Development
• 開発環境を「リモート」にもつ仕組み
SSH / Container / WSL (Windows Subsystem for Linux)
▼
• 開発環境としてコンテナーを準備する (devcontainer)
• https://code.visualstudio.com/docs/remote/containers
• Visual Studio Code + 拡張機能パック
• Docker (Windows / macOS / Engine)

8. #geekersnite
VS Code Remote Containers の前提
• Visual Studio Code を使って作業する
• ミドルウェアをコンテナーに含められる
上記以外の環境では使えません

9. #geekersnite
devcontainer をさくっと試す
GitHub: microsoft/vscode-remote-try-*

10. #geekersnite
devcontainer の試し方

11. #geekersnite
devcontainer の始め方①

12. #geekersnite
devcontainer の始め方①
1. アプリケーションを VS Code で開く
2. Dockerfile を準備する
3. コマンドパレットを開く
Dev Containers: Open Folder in Container…
4. Dockerfile のあるフォルダを指定する
5. devcontainer.json のできあがり

13. #geekersnite

14. #geekersnite
devcontainer の始め方②

15. #geekersnite
devcontainer の始め方②
1. アプリケーションを VS Code で開く
2. コマンドパレットを開く
3. devcontainer 構成の設定
Dev Containers: Add Development Container Configuration Files...
4. プリセットから選択
Show All Definitions... > Definitions
5. コンテナーで開き直す
Reopen in Container

16. #geekersnite
開発に必要なツールも一緒にインストールすることができます

17. #geekersnite
.devcontainer/
.devcontainer
├ base.Dockerfile
│ ベースイメージ構成 (参考用)
├ devcontainer.json
│ コンテナー構成
└ Dockerfile

18. #geekersnite
▶コンテナー構成
▶VS Code構成
▶転送ポート番号
▶コンテナー作成後コマンド
▶コンテナー内ユーザー

19. #geekersnite
GitHub Codespaces もいいぞ～

20. #geekersnite

21. #geekersnite
dotfiles があると便利
https://tsubalog.hatenablog.com/entry/2022/09/11/232051