Zenn
💻

AIに並列で作業させるためにローカル開発環境を複数建てる【Dockerバックエンド+Next.jsフロントエンドの場合】

に公開
Docker
Git
Next.js
tech

@dyoshikawaです。

最近、AI駆動開発の文脈でローカル環境に同一プロジェクトのエディタを複数開いて並列で作業するのが流行っていますよね。Claude Codeのドキュメントでも git worktree を使って並列開発する方法が紹介されているくらいです。

https://docs.anthropic.com/ja/docs/claude-code/tutorials#gitワークツリーで並列claude-codeセッションを実行する

私もこれをやってみようと思い、プロジェクトのローカル開発サーバをホストのMac上で複数起動して、AIに並列で作業させる+それぞれの動作確認もできる環境を構築してみました。

本記事のローカル開発環境の前提は以下です（私が今こういう環境にいるので）。

  • バックエンド
    • アプリケーションサーバ on Dockerコンテナ
    • データベース on Dockerコンテナ
  • フロントエンド
    • Next.js on ホストマシン

リポジトリをローカルに複数クローンしてそれぞれの開発サーバを起動する

同じリポジトリを複数個クローンする

今回の実装では、同一リポジトリをローカルに複数個クローンすることで実現しています（git worktreeを使わない理由については後述します）。まずはディレクトリ名のsuffixとして連番（1とか2とか）を振りつつクローンしていきます。

git clone https://github.com/{user}/my-project my-project1
git clone https://github.com/{user}/my-project my-project2

Dockerバックエンドの開発サーバ起動

プロジェクトに以下のようなdocker-compose.ymlがあるとします。

docker-compose.yml
services:
  db:
    image: postgres:latest
    container_name: db
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: secret
  server:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: server
    ports:
      - "8080:8080"

複数の開発サーバを起動する場合、ポートの衝突を避ける必要があります。しかし、今回の取り組みをしたいのはチームの中で自分だけかもしれないので、git管理している設定ファイルはできるだけ変更したくありません。

そこでdocker-compose.override.ymlを使うことにしました。この設定ファイルを使うと、docker-compose.ymlの設定を上書きできます。.gitignoreにdocker-compose.override.ymlを追記しておきましょう。

my-project1/docker-compose.override.yml
services:
  db:
    container_name: db1
    ports: !reset
    ports:
      - "5432:5432"
  server:
    container_name: server1
    ports: !reset
    ports:
      - "8080:8080"
my-project2/docker-compose.override.yml
services:
  db:
    container_name: db2
    ports: !reset
    ports:
      - "5433:5432"
  server:
    container_name: server2
    ports: !reset
    ports:
      - "8081:8080"

!reset を使うと、その名の通り指定した項目の設定をリセットできます。

https://zenn.dev/iitenkida7/articles/91b88ca76e98c7

単にportsを設定するだけだと、docker-compose.ymlのPORTを完全に上書きする挙動にならず、マージされてしまいます（my-project2のホスト側のポートは8081のみになって欲しいのに、8080,8081になってしまう）。!resetを使うことで、docker-compose.ymlのPORTを完全に上書きできます。

あとはそれぞれをdocker compose up -dで起動するだけです。

# my-project1
cd my-project1
docker compose up -d

# my-project2
cd my-project2
docker compose up -d

Next.jsフロントエンドの開発サーバ起動

Next.jsについては特筆すべきことはありません。開発サーバ起動時にPORT環境変数を指定してポートが衝突しないようにするだけです。

# my-project1
cd my-project1
PORT=3000 npm run dev

# my-project2
cd my-project2
PORT=3001 npm run dev

git worktreeは？

なぜ git worktree を使わなかったのかについて触れておきます。

動作確認するにはどうしても依存関係のインストール、開発サーバの立ち上げ、DBのマイグレーションなどの「ステート」が必要であり、これらをセットアップする必要があります。git worktreeを使う場合、ブランチからワーキングディレクトリを作成するたびにこのセットアップを行う必要があるように思います。

並列開発といっても、コンテキストスイッチに耐えられるのは（私は）せいぜい2〜3並列までだと思うので、それならクローンしてそれぞれ独立してセットアップしてしまった方が楽だと判断しました。

Discussion