経緯

GitHubでFrontendとBackendのマルチレポ構成で開発をよく行うのですが、以下の問題がありました。

共通する.envや SQLファイルをどこに配置するか？
Docker Composeでコンテナを立てるときに1つのファイルに記述できない

モノレポにすれば上記の課題は解決しますが、

Frontendのちょっとした文言修正のCommitにBackendを巻き込みたくない
CI/CDをそれぞれで分けて実装したい

というニーズもあったのでSubmoduleを使って解決することにしました。

サンプルコード

実装

1. GitHubにFrontendリポジトリを作成

GitHubにSubmoduleとなるFrontendリポジトリを作成

poc-submodule-frontend

2. GitHubにBackendリポジトリを作成

GitHubにSubmoduleとなるBackendリポジトリを作成

poc-submodule-backend

3. GitHubに親リポジトリを作成

GitHubにSubmoduleを読み込む親リポジトリを作成

poc-submodule-parent-create

4. ローカルに親リポジトリをClone

ローカル環境に3. GitHubに親リポジトリを作成で作ったリポジトリをClone

git clone https://github.com/[親リポジトリ].git

5. ローカルで親リポジトリにSubmoduleを登録

親リポジトリに1. GitHubにFrontendリポジトリを作成と2. GitHubにBackendリポジトリを作成で作ったリポジトリをSubmoduleとして追加

git submodule add https://github.com/[Frontendリポジトリ].git
git submodule add https://github.com/[Backendリポジトリ].git

コマンドを実行すると、以下のようにSubmoduleが組み込まれます。

poc-submodule-parent-submodule

6. 親リポジトリをルートに開発

FrontendとBackend、2つをまとめるdocker-compose.ymlも疑似的に1つのリポジトリで開発できるようになりました。
親リポジトリ側にdocker-compose.ymlなど共通のファイルを配置することで、1元的に管理できます。

poc-submodule-parent-directory

Submoduleの注意点

親リポジトリのCloneでSubmoduleが読み込まれない

Submoduleを含むリポジトリではgit clone <親リポジトリのURL>を行っても、Submoduleの中のソースまで読み込まれない

(親リポジトリ)/
├── submodule-frontend/
│   └── # 中身がクローンされない！
├── submodule-backend/
│   └── # 中身がクローンされない！
└── ...

git clone --recursive <親リポジトリのURL>を実行することで、Submoduleの中身の読み込めます

(親リポジトリ)/
├── submodule-frontend/
│   └── [frontendのファイル...] # 再帰的にsubmoduleのリポジトリもCloneされる
├── submodule-backend/
│   └── [backendのファイル]
└── ...

Commitの挙動

親リポジトリではSubmoduleのコミットを参照しているため、Submoduleの修正を行った場合は以下の2回のコミットが必要です

# 1. Submoduleリポジトリのコミット
cd submodule-frontend
git add .
git commit -m "feat: 新機能を追加"
git push origin main

# 2. 親リポジトリでSubmoduleの参照を更新するコミット
cd ..
git add submodule-frontend
git commit -m "chore: frontendのSubmodule参照を更新"
git push origin main

経緯

mizuyi/poc-submodule-parent | GitHub

mizuyi/poc-submodule-frontend | GitHub

mizuyi/poc-submodule-backend | GitHub

実装