Share
Embed
Slide 1
Slide 1 text
VS CodeとRemote Containerで
VS CodeとRemote Containerで
開発環境もコード管理しよう
開発環境もコード管理しよう
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 2
Slide 2 text
自己紹介
自己紹介
妹尾 一弘
札幌でシステム開発会社勤務
JavaDoスタッフ
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 3
Slide 3 text
Visual Studio Code
Visual Studio Code
Microsoft製オープンソースIDE
サポートされるプログラミング言語が多い
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 4
Slide 4 text
Remote Development
Remote Development
リモート開発環境にアタッチする拡張機能パック
コンテナやSSH、WSLに接続して開発出来る
今回はコンテナの話
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 5
Slide 5 text
Remote Containerの仕組み
Remote Containerの仕組み
引用元:
引用元: https://code.visualstudio.com/docs/remote/containers
https://code.visualstudio.com/docs/remote/containers
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 6
Slide 6 text
コンテナをビルド/実行
コンテナをビルド/実行
※ 起動済みコンテナの利用も可能
※ 起動済みコンテナの利用も可能
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 7
Slide 7 text
ソースコードをマウント
ソースコードをマウント
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 8
Slide 8 text
VS Code Serverをインストール
VS Code Serverをインストール
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 9
Slide 9 text
Extensionをインストール
Extensionをインストール
※ 明示的に指定したExtensionのみ
※ 明示的に指定したExtensionのみ
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 10
Slide 10 text
環境設定は
環境設定は
.devcontainer フォルダ以下の
.devcontainer フォルダ以下の
devcontainer.json に記載する
devcontainer.json に記載する
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 11
Slide 11 text
devcontainer.json
devcontainer.json
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 12
Slide 12 text
buildセクション
buildセクション
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 13
Slide 13 text
docker-composeも使用可能
docker-composeも使用可能
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 14
Slide 14 text
他のコンテナも参照出来る
他のコンテナも参照出来る
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 15
Slide 15 text
extensionセクション
extensionセクション
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 16
Slide 16 text
settingsセクション
settingsセクション
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 17
Slide 17 text
devcontainer.jsonをコミットしておくことで
どんなコンテナを利用するか
どんなExtensionを利用するか
どんな設定でVS Codeを利用するか
がチームで共有できる
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 18
Slide 18 text
Remote Containerのメリット
Remote Containerのメリット
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 19
Slide 19 text
開発環境がコンテナ化される
開発環境がコンテナ化される
Immutable
環境が壊れてもRebuildすれば戻せる
新規メンバーがすぐに開発を始められる
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 20
Slide 20 text
環境セットアップに必要な設定を
環境セットアップに必要な設定を
すべてコードで管理できる
すべてコードで管理できる
OSやライブラリはDockerfileで
ExtensionやFormetter設定はdevcontainer.jsonで
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 21
Slide 21 text
開発環境のメンテナンスが
開発環境のメンテナンスが
通常の開発サイクルに乗る
通常の開発サイクルに乗る
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 22
Slide 22 text
辛いポイント
辛いポイント
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 23
Slide 23 text
Docker for Mac/Windowsに依存する
Docker for Mac/Windowsに依存する
ファイル権限周り等がハマりやすい
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 24
Slide 24 text
メモリが必要になりがち
メモリが必要になりがち
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 25
Slide 25 text
まとめ
まとめ
Remote Containerを使うことで
Remote Containerを使うことで
開発環境を簡単に立ち上げ・再構築できる
チームが同じ環境で開発が出来る
開発メンバー固有のトラブルが減る
開発環境メンテナンスの属人化を減らせる
VS CodeとRemote Containerで - 開発環境もコード管理しよう
Slide 26
Slide 26 text
ありがとうございました
ありがとうございました
VS CodeとRemote Containerで - 開発環境もコード管理しよう