🙆‍♀️

複数のリポジトリを単一のdevcontainerで開発する

2022/12/02に公開

背景と目的

以下のような2つのリポジトリそれぞれがdevcontainer化されているという前提

  1. api-repo
  2. ui-repo

この場合、それぞれのリポジトリでVSCode + devcontainerを稼働させる・・・とやればdockerネットワーク内で通信は完結する。
一方で以下が課題として存在すると考えている。

  1. 複数のリポジトリそれぞれでVSCodeを立ち上げるの面倒 / 見通し悪い
  2. CodeSpacesを使うことを考えた時に、取り回しが悪そう

そこで、別のリポジトリを用意し、 api-repo / ui-repoをsubmoduleで扱えば良いのでは?と考え試してみた結果を記載することにする。

前提

統合前のリポジトリ構成は以下の通り
なお、ui-repoはapi-repo側と通信を行うコンポーネントであるため、api-repoのようにdocker-compose.ymlは現時点では利用していない。

- api-repo
 - .devcontainer
   - devcontainer.json
   - 
 - docker-compose.yml
   - このdocker-compose設定により、DBやその他必要なコンテナが稼働する

- ui-repo
  - .devcontainer/devcontainer.json

ui-repo -> api-repo( api <-> db ) のような通信が発生する

導入

構成

以下のような構成にする

  • dev-repo(new!)
    • api-reop(git submodule)
    • ui-repo(git submodule)

設定

dev-repo内

dev-repo/.devcontainer/devcontainer.json は以下の通り

### コメントやExtensionの設定などは削除した
{
	"name": "dev-repo",
	"dockerComposeFile": ["../api-repo/docker-compose.yml", "./docker-compose.devcontainer.yml"],
	"service": "workspace",
	"workspaceFolder": "/workspace",
	"shutdownAction": "stopCompose",
	"customizations": {
		"vscode": {
			"settings": {},
			"extensions": []
		}
	},
	"remoteUser": "vscode"
}

dev-repo/.devcontainer/docker-compose.devcontainer.yml は以下の通り

version: '3'
services:
  workspace:
    build: 
      context: '..'
      dockerfile: .devcontainer/Dockerfile
    volumes: 
      - ..:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

dev-repo/.devcontainer/Dockerfile については、 Add Devcontainer configuration files... をVSCode選択した際に生成されるものを使うと動いた。

また、dev-repo内でapi-repo / ui-repo をgit submoduleを使い追加しておくこと。

結果

この状態で、VSCodeを稼働させ、Devcontainerとして稼働させると現時点では稼働することを確認した。

Discussion