VScodeのDevContainerってなんぞや

今回は、VisualStudioCodeのDevContainerについて紹介していきます。

DevContainerとは

一言で言うと、開発用にサクッと建てられるコンテナです。
vscodeの標準機能で備わっていて、Dockerで建てることができます。

DevContainerのここがすごい！

DockerComposeが使える

プロダクション用のDockerComposeファイルをそのまま使えるので、動作確認も楽々ですね。
これはどういうことか？

私はDBを使うアプリケーションでよくこれを使います。
開発用にわざわざDBを立てるの正直クソだるいです。
そんな時、VScodeからワンクリックでサクッとアプリケーションもDBも立てられたら、こんなに楽なことはありません。

リモートホストが使える

たとえば、クラウドのサーバーにコンテナを立てて、ノートパソコンでは処理できないような重たいアプリの検証環境をサクッと立てる、ということもできます。
リモートホストを使う際も、Dockerをインストールするだけなので、とても簡単です。

コンテナ内でGitが使える

DevContainer定義ファイルが含まれたリポジトリをGit 認証情報マネージャーを用いてクローンすると、コンテナ内でもgitが使えます。

簡単な使い方

今回は簡単な使い方として、DBとPHPのアプリが入ったDevContainerを作成してみます。

DockerComposeを作成する

DockerComposeファイルを作成します。
ここに関する説明は今回は割愛しますが、phpにはPHPのDockerfileが割り当たっているものとします。
何も気にせずにDockerfileを作成して構いません。

docker-compose.yaml

version: '3'
services:
  php:
    container_name: php_container
    build:
      context: './'
    ports:
      - "8080:80"
    environment:
      TZ: Asia/Tokyo
      DB_HOST: db
      DB_USER: root
      DB_PASSWORD: rootpass
  db:
    image: mariadb
    ports:
      - '3306:3306'
    environment:
      MARIADB_DATABASE: ysmfilm
      MARIADB_USER: dbuser
      MARIADB_PASSWORD: dbpass
      MARIADB_ROOT_PASSWORD: rootpass
      TZ: Asia/Tokyo
    volumes:
      - ./initsql:/docker-entrypoint-initdb.d
      - ./conf.d:/etc/mysql/conf.d
#      - db-volume:/var/lib/mysql
volumes:
  db-volume:
    name: mariadb-data
    driver: local

これで、DBとPHPが立つはずですね。

.devcontainerディレクトリ内の整備

さて、ここからが本題です。
.devcontainerというディレクトリを作成します。
この中に設定ファイルやらを作成します。

先ほど作ったディレクトリ内に、devcontainer.jsonというファイルを作成します。
この中に、どのコンテナを起動するかなどを記述します。

devcontainer.json

{
  "name": "PHP and MariaDB Devcontainer",
  "dockerComposeFile": "../docker-compose.yaml",
  "service": "php",
  "workspaceFolder": "/var/www/html",
  "postCreateCommand": "composer install",
  "remoteEnv": {
    "TZ": "Asia/Tokyo"
  },
  "portsAttributes": {
    "80": {
      "label": "Web App"
    }
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "github.vscode-github-actions",
        "GitHub.copilot-chat",
        "GitHub.copilot",
        "GitHub.vscode-pull-request-github",
        "eamodio.gitlens",
        "mhutchie.git-graph"
      ],
    }
  }
}

各項目の説明です。

• name: 名前ですが、適当で構いません。
• dockerComposeFile: どのcomposeファイルを使用するかを記述します。
• service: どのサービスをvscodeで表示するかを書きます。このサービスのコンテナ内がvscodeのターミナルやエクスプローラで表示されます。
• workspaceFolder: どのディレクトリをターミナルやエクスプローラのワーキングディレクトリにするかを記述します。
• postCreateCommand: コンテナ作成時に実行するべきコマンドです。
• remoteEnv: コンテナの環境変数を定義します。
• portsAttributes: ポート転送ウィンドウに表示するポートを記述します。
• customizations: vscodeのカスタマイズに関する記述です。
• extensions: コンテナにインストールするタイプの拡張機能です。git系の拡張機能によく見られます。

これで、左下のボタンから、コンテナを起動してみましょう。

うまくいけば、コンテナの中をvscodeで開くことができます。

最後に

DevContainerの機能はこれだけではありません。
他にもいじってみたい方は、このサイトから学んでみると面白いでしょう。