開発覚書はてな版

個人的な開発関連の備忘録

【VSCode】拡張機能:Remote - Containers を使ってみた

概要

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

code.visualstudio.com

marketplace.visualstudio.com

Remote - Containers で出来ること

検証環境

事前設定

Docker Desktop

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

コンテナ動作状況の確認

  • リモートエクスプローラーから「Dev Containers」の確認やマウント状況などのかくにんが出来る。

f:id:kakkoya:20200403185916p:plain

検証時にはまったところ

  • Docker Desktop のバージョンが2以上と公式で記載がありましたが、バージョンを2.2に上げないとマウント周りのエラーが出ました。

感想

  • 複数マシンに跨った開発が楽になりそう。
  • Windows/Macなどを気にせず開発できる。
  • ローカルマシンの設定を汚さないのがほんとによい。
  • 開発環境ごとメンバーに配布出来るので、個々の開発環境の差分が発生しにくくなるので便利そう。

関連リンク