🐳

VSCode の Remote Containerを推したい!!

に公開
Docker
VS Code
tech

Remote Containerって？

Developing inside a Container using Visual Studio Code Remote Development

Microsoftが公開しているVSCodeの拡張機能です。

一瞬でDocker開発環境を立ち上げてくれます。

なんで今更

業務でDockerの環境を使う機会があり、Remote Containerを勧めた結果「なにそれ？」ってなったので、復習と共有を兼ねて記事にしてみました。

あまりにも使いやすいので個人開発は殆どこれを使って開発しています。

Remote Containerで生まれるメリット

  • 簡単に作って壊せる
  • ローカル環境が汚れない
  • Shellがコンテナ内のものになるので、OS毎のコマンド操作の差異が消える
  • 設定や拡張機能をプロジェクト毎に設定できる
  • コンテナの立ち上げや停止も全部管理してくれる

色々書いていますがDocker環境の恩恵をそのまま受けられるのが一番大きいです。

使い方

VSCodeにRemote Containerをインストールするだけです(Dockerをインストールしていない場合はインストールが必要です)。

ありがたいことに大抵の環境はテンプレートが用意されているので、Add Development Container Configuration Filesでテンプレートを選択するだけですぐにコンテナを立ち上げることができます。

おまけ

Q. 自分で作ったDockerFileやdocker-container.ymlは使えるの？
A. 使えます。プロジェクトにDockerファイルが置いてあればAdd Development Container Configuration Filesを選んだ時に選択肢に出てくるはずです。

Q. どうやって設定や拡張機能を追加するの？
A. devcontainer.jsonに追加します。拡張機能を右クリックし、add devcontaimer.jsonを選んで追加することもできます。

.devcontainer/devcontainer.json
{
  ...
  "extensions": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ],
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  ...
}

Q. Shell server terminated (code: 1, signal: null)って出て立ち上がらないんだけど
A. 立ち上げるサービスに以下を追加してみてください

docker-compose.yml
command: sleep infinity

Q. Remote Containerのディレクトリ(.devcontainer)が作業環境に入って邪魔なんだけど
A. マウントするディレクトリは切り替えられます。デフォルトはプロジェクトフォルダです。
以下は作業スペースをworkspaceディレクトリに切り替えた例です（workspaceディレクトリを事前に作成しておいてください）。

.devcontainer/devcontainer.json
{
  ...
  "workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/workspace,type=bind,consistency=delegated",
  "workspaceFolder": "/workspace",
  ...
}

Q.　いい感じに名前をつけたい！
A.　どうぞ!

.devcontainer/devcontainer.json
{
  "name": "${localWorkspaceFolderBasename}",
  ...
}

Discussion