概要

Visual Studio Code の拡張機能「Remote - Containers」を使ってみました。
Docker上で開発環境を構築するため、ホストPCに余計なインストール作業をせずに済むので便利です。
また、ターミナル上からコンテナ上の操作が簡単に出来るので便利です。この記事では機能の紹介や簡単な使い方などを記載していきます。

code.visualstudio.com

marketplace.visualstudio.com

Remote - Containers で出来ること

Visual Studio Codeで作業中のソースコードをDocker上で動作させることが出来る。
Visual Studio CodeのターミナルがDocker上に直接接続される。
必須のVisual Studio Code 拡張機能を含めて配布できる。
Theme/UI拡張はホスト側でWorkspace拡張（LanguageServiceへの接続が必要なものなど）はコンテナ側で動作する。

検証環境

Windows 10 Pro
Docker Desktop - 2.2.0.x
Visual Studio Code - 1.43.x
- Remote - Containers - Preview

事前設定

Docker Desktop

Windows or macOS 版の場合、ソースコードが配置されているドライブに「File Sharing」設定を行う。

Visual Studio Code

拡張機能「Remote - Containers 」をインストールする。

動作確認

1. サンプルソースの取得

開発言語ごとに以下のリポジトリからフォルダ一式を取得する。

2. Dev Containerの起動・接続

1で取得したフォルダ一式をVisual Studio Code上で開く。
Visual Studio Codeの左下の「><」をクリックする。
パレット上の「Remote-Containers: Open Folder in Container...」を選択する。
コンテナに接続するフォルダを選択する。（そのままファイルダイアログの「Open」ボタンをクリック）

f:id:kakkoya:20200403194824p:plain

3. コンテナ上で作業

Dev Container表示がされるようになったら成功です。
ターミナル上から各種コマンドを実行することでコンテナ上で実行されます。

f:id:kakkoya:20200403195000p:plain

その他出来ること

devcontainer.json の編集

.devcontainer/devcontainer.json を編集することで各種設定を変更できる

dockerFile：開発環境として使用するDockerfileを指定
appPort：ローカルPCからDockerにアクセスできるポートの指定
postCreateCommand：コンテナ作成時に実行するコマンドを指定
extensions：開発環境にインストールする拡張機能を指定

コンテナ側への拡張機能インストール

拡張機能のインストール一覧が「LOCAL - INSTALLED」と「DEV CONTAINER: XXX - INSTALLED」に分割されている。（XXXについてはコンテナ名）
Workspace拡張については「Install on Dev Container: XXX」ボタンが追加されて、そのボタンを押すことでコンテナ側に拡張機能をインストール出来る。
コンテナのビルド単位で拡張機能が消える可能性があるので、チーム内で必須のものは devcontainer.json で定義しておくとよい。

f:id:kakkoya:20200403185747p:plain