開発覚書はてな版

個人的な開発関連の備忘録

【VSCode】拡張機能:Remote - Containers で Docker Compose を使う

概要

Visual Studio Code拡張機能「Remote - Containers」で Docker Compose を使用した場合の設定方法を記載します。

code.visualstudio.com

marketplace.visualstudio.com

Remote - Containers でDockerfile使った場合の設定方法は以下の記事を参照 kakkoyakakko2.hatenablog.com

前提条件

  • Dockerfileで Remote - Containers が動作していること
  • 動作していない場合は下記の記事を参照して下さい kakkoyakakko2.hatenablog.com

検証環境

各種設定

設定概要

  • Dockerfileは変更なし。
  • .devcontainer\docker-compose.yml を新規に作成する。
  • .devcontainer\devcontainer.json を修正する。

.devcontainer\docker-compose.yml

  • ports には .devcontainer/devcontainer.jsonappPort で指定した内容を設定したます。
version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ..:/workspace:cached
    command: sleep infinity
    ports:
      - "8000:8000"

.devcontainer\devcontainer.json

  • 追加
    • dockerComposeFile: docker-compose.yml
    • workspaceFolder: /workspace
    • service: web (docker-compose.ymlで指定したサービス名)
  • 削除
    • dockerFile
    • appPort

起動方法

  • Dockerfileの時と同様にパレット上から「Remote-Containers: Open Folder in Container...」で起動できます。

感想

  • 他のサービスも同時にDocker内に構築できて、Dockerネットワーク内で作業が出来るので便利。
  • VSCodeを起動するだけでDocker Composeも起動されるため、開発手順が楽になった。

サンプルソース