multiple dev containerですぐに立ち上げられるモノレポなローカル開発環境を作るぞ！

はじめに

勉強するときに可搬性のある開発環境が欲しい！
いわゆるモノレポ環境をdevcontainerでやってみたい！

ということで、今回はdevcontainerとdocker-compose.yamlを使ってmultiple dev containerな環境を作っていこうと思います！

できたもの

コマンドパレットからDev Containers: Open Folder in Containerコマンドを実行すると2種類のdevcontainerが選べます

devcontainerの中ではそれぞれfrontend/配下とbackend/配下のファイルしか見えないようになっています。設定次第ではルートディレクトリ配下を見ることもできます！

これはbackendのdevcontainerを開いたときのフォルダ

作成方法

プロジェクトの.devcontainer/の下にディレクトリを作成して、各ディレクトリの中でdevcontainer.jsonを作るだけ！
簡単ですねーーー

devcontainer.jsonの中でdocker-compose.ymlの中のコンテナを指定しているので、どちらか片方のdevcontainerを立ち上げるとフロント・バック・DBが同じネットワークで立ち上がるようになっています。

ルートのdocker-compose.ymlの中で.devcontainer配下のDockerfileを読み込んでいます。理由として、devcontainerを使うときはdevcontainer用のイメージを使わないといけないので、将来的にプロダクトをデプロイする時用のコンテナイメージと分けたいなーなんて妄想をしたためです。（意味あるかな？）

./devcontainer/backend/devcontainer.json

{
  "name": "Backend Container",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "backend",
  "workspaceFolder": "/workspace/backend"
}

docker-compose.yml

services:
  db:
    image: postgres:14
    container_name: db
    environment:
      POSTGRES_USER: local_user
      POSTGRES_PASSWORD: local_password
      POSTGRES_DB: local_db
    networks:
      - app-network

  backend:
    build:
      context: .devcontainer
      dockerfile: backend/Dockerfile
    volumes:
      - .:/workspace:cached
    command: sleep infinity
    environment:
      DATABASE_URL: postgres://local_user:local_password@db:5432/local_db
    depends_on:
      - db
    networks:
      - app-network
    ports:
      - "8000:8000"

  frontend:
    build:
      context: .devcontainer
      dockerfile: frontend/Dockerfile
    volumes:
      - .:/workspace:cached
    command: sleep infinity
    depends_on:
      - backend
    networks:
      - app-network
    ports:
      - "3000:3000"

networks:
  app-network:
    driver: bridge

ディレクトリ構造

/
├── .devcontainer
│   ├── backend
│   │   ├── Dockerfile
│   │   └── devcontainer.json
│   └── frontend
│       ├── Dockerfile
│       └── devcontainer.json
├── .git/
├── .gitignore
├── README.md
├── backend
│   └── hello.py
├── docker-compose.yml
└── frontend
    └── hello.js

リポジトリ

githubに設定まとめてみたのでよかったら見てみてください！

• フロントエンドコンテナ：TypeScript
• バックエンドコンテナ：Python

こだわりポイントとして、各devcontainerでgitを使えるようになっています！gitの設定はリポジトリしているのでのREADME.mdに記載しているので見てみてください！
試行錯誤した時の記事

まとめ

devcontainerを開発用途によって使い分けるとフォルダのスコープが狭まって個人的には結構使い勝手がいいです！
特に、コマンドパレットでDev Containers: Switch Containerを使ってフロントコンテナとバックエンドコンテナを行き来するのが楽しい...！
multiple dev containerぜひ試してみてください！

参考記事