【Dev Container】Dockerコンテナをあたかもホスト環境のようにVSCodeを開く

VSCodeの拡張機能「Dev Container」を使うことで、Dockerコンテナをあたかもホスト環境かのように作業することが可能。
当記事で使用方法を簡単に紹介。

事前準備

Dev Container拡張機能インストール

Docker環境用意(Docker-Compose使用)

次のような構成のDocker-Compose環境を用意しておく (ただのnode.js環境…)

docker-compose.yml

version: "3.8"

services:
  app:
    build:
      context: ./app
      dockerfile: Dockerfile
    tty: true
    stdin_open: true
    volumes:
      - .:/workspace
      - app_store:/workspace/app/node_modules
    command: >
      sh -c 
        "tail -f /dev/null"

volumes:
  app_store:

app/Dockerfile

FROM node:20-alpine
WORKDIR "/workspace/app"
RUN apk update && apk upgrade

実際にやってみる

devcontainer.jsonの作成

コンテナにアタッチする作業用ディレクトリ(今回の場合だとapp/)に、.devcontainerディレクトリを作成。その中にdevcontainerの設定ファイル作成する

app/.devcontainer/devcontainer.json

{
  "dockerComposeFile": "../../docker-compose.yml", //docker-compose.ymlの相対パス
  "service": "app", //docker-compose.ymlに指定したサービス名
  "workspaceFolder": "/workspace/app", //コンテナ内の作業ディレクトリ
  "shutdownAction": "none" //未指定だとVSCodeを閉じた際コンテナが停止してしまう。自分は、noneを指定して停止しないようにしている。
}

実行してみる

1. Docker-Composeを立ち上げる

   $ docker-compose up
   

2. コンテナにアタッチする作業用ディレクトリに移動し、VSCodeを開く。そうすると、右下にポップアップが出てくるため「コンテナーで再度開く」をクリック。
   
3. すると、コンテナにアタッチした状態のVSCodeが開く。
   
   • 当然、ターミナルはコンテナ内のものを開くことができる
     
   • また、拡張機能をコンテナ内にのみ設定することも可能 (ホスト側の拡張機能を汚さず済む)
     app/.devcontainer/devcontainer.json

     {
       ︙
       "customizations": {
         "vscode": {
           "extensions": ["Prisma.prisma"]
         }
       }
     }
     

     

参照

公式ドキュメント
https://code.visualstudio.com/docs/devcontainers/containers