Visual Studio Code Remote Container

コンピュータ
コンピュータ

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

  • Remote - SSH
  • Remote - Containers
  • Remote - WSL
  • Visual Studio Codespaces(GitHub Codespaces)

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

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

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 project
cd project
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": {
        "terminal.integrated.shell.linux": null
    },

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

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

これで設定完了です。

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

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

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

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

Tips

Tips1

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

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

Tips2

プロジェクトルートに.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

コメント

タイトルとURLをコピーしました