Visual Studio Code Remote Container

VS Code(Visual Studio Code)には、リモート開発を行える拡張機能がいくつか存在します。

Remote - SSH
Remote - Containers
Remote - WSL
GitHub Codespaces

リモート開発を行うことにより、ローカルマシンに環境を構築せずに開発を行うことができます。

Remote - Containersでは、コンテナを使ったリモート開発を行うことが可能です。
また、開発環境のコード化・共有ができるので、誰でも素早く同じ環境で開発が行えるようになります。

Remote - Containers
1. インストール
2. 使い方
Tips
1. Tips1
2. Tips2

Remote - Containers

インストール

Docker の環境を準備します。
Docker Desktop をインストールしてください。
Windows の場合は WSL2 の環境を整えることにより Windows 10 Home でも Docker Desktop が使用可能になります。

次に VS Code の拡張機能をインストールします。

Docker
Remote - Containers

使い方

コンテナ起動・接続の開発環境設定は、プロジェクトルートの.devcontainer/devcontainer.jsonまたは.devcontainer.jsonに設定します。

簡単なサンプルで説明します。
まず、コンテナの定義をdocker-compose.ymlファイルで行います。

mkdir .devcontainer
touch .devcontainer/docker-compose.yml

version: '3'

services:

  wordpress:
    depends_on:
      - mariadb
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: mariadb
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

  mariadb:
    image: mariadb:10.4
    volumes:
      - mariadb:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

volumes:
  mariadb:
    driver: local

Docker コンテナ起動・接続の設定を行います。

{
    "name": "WordPress",

    "dockerComposeFile": [
        "docker-compose.yml"
    ],

    "service": "wordpress",
    "workspaceFolder": "/var/www/html",

    "settings": {
    },

    "extensions": [
        "bmewburn.vscode-intelephense-client"
    ]
}

dockerComposeFileで compose ファイルの場所を指定します。
serviceには、接続するサービス名を指定します。
workspaceFolderには接続時のデフォルトパスを設定します。
settingsは接続コンテナの VS Code の設定が行えます。
extensionsは、接続コンテナにインストールする拡張機能を指定できます。

これで設定完了です。

コマンドパレットもしくは、ステータスバーの左下からReopen in Containerを選択します。
VS Code が再起動されコンテナの構築が始まります。
完了後、指定のコンテナに接続した状態で再開されます。
この状態でコンテナ内での開発が行えます。

サンプルでは 8000 ポートを割り当てているので、http://localhost:8000/ からサイトにアクセス可能です。

コンテナに接続した状態から接続を終了したい場合は、コマンドパレットもしくは、ステータスバーの左下からReopen Folder Locallyを選択します。

デフォルトの設定では、接続の終了やウィンドウを閉じるなどするとコンテナは停止します。

Tips

Tips1

コマンドパレットもしくは、ステータスバーの左下からAdd Development Container Configuration Filesを選択すると、設定済の開発環境設定（devcontainer.jsonなど）を選択してダウンロードできます。

これを起点に開発環境をカスタマイズしたり、設定方法の参考にできます。

Tips2

devcontainer.jsonと同じ階層に.envファイルを設置することにより、Compose ファイルの変数を定義できます。

DB_USER=wordpress
DB_PASSWORD=wordpress

version: '3'

services:

  wordpress:
    depends_on:
      - mariadb
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: mariadb
      WORDPRESS_DB_USER: ${DB_USER}
      WORDPRESS_DB_PASSWORD: ${DB_USER}

  mariadb:
    image: mariadb:10.4
    volumes:
      - mariadb:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_USER}

volumes:
  mariadb:
    driver: local