Docker Compose × Git Submodules で FE/BE 分離プロジェクトを簡単に管理する方法

概要

　昨今の開発プロジェクトでは、フロントエンド（FE）とバックエンド（BE）でリポジトリを分けるケースが多い印象です。これによってコードベースの独立性を保ち、チームごとに作業を分担しやすくなる認識ですが以下のような問題も出てくると思っています。

• ローカル環境で動作確認を行う際に手間がかかること
• 複数のリポジトリをクローンして、各リポジトリで必要な初期設定を行い、さらにDocker Composeを用いて連携させる必要がある

　この記事では、この課題を解決する方法として、Docker ComposeとGit Submodulesを活用して統合リポジトリを構築し、簡単に管理できる仕組みをまとめてみました。

統合リポジトリの概要

統合リポジトリの役割

　統合リポジトリには以下のような役割を持たせます。

• FE と BE を 1 つの統合リポジトリでまとめることで、ローカルでの開発環境構築が簡単に。
• Git Submodules を活用して、分散管理のメリットを保ちつつ統合。
• 場合によってはnginxなどのインフラに関わる実装もここに含まれるかも

統合リポジトリのディレクトリ構成イメージ

　統合リポジトリのディレクトリ構造は次のようなイメージです👀

project-root/
├── docker-compose.yml
├── .gitmodules # git submoduleコマンドによって自動生成されるファイル 
├── frontend/   # Git Submodule: フロントエンドのリポジトリ
├── backend/    # Git Submodule: バックエンドのリポジトリ
├── nginx/

サブモジュールを利用することで、FE/BE のリポジトリを統合リポジトリの一部として取り扱えるようになります。

Git Submodules を使って統合リポジトリを構築する

　ここからサブモジュールを使用してどのようにリポジトリを連携していくかの手順を紹介します。

1. サブモジュールを登録する

　最初に各環境の作業用のリポジトリをsubmoduleコマンドを使用してサブモジュール登録してあげる必要があります。

git submodule add <FEリポジトリURL> frontend
git submodule add <BEリポジトリURL> backend

このコマンドが問題なく実行されると以下のような.gitmodulesファイルが自動で生成されます👀

[submodule "frontend"]
  path = frontend
  url = <FEリポジトリURL>
[submodule "backend"]
  path = backend
  url = <BEリポジトリURL>

※ FEリポジトリURLとかは例えばgit@github.com:<githubアカウント名>/<githubでのリポジトリ名>.gitみたいなやつのことです！

2.サブモジュールを編集して更新する

　サブモジュールのリポジトリで作業を行い、その変更をコミットする手順は通常のリポジトリでの作業と全く変わりません。

# サブモジュール内で変更をコミット
cd frontend
git add .
git commit -m "サブモジュールの変更内容"
git push

　しかし、統合リポジトリ内ではサブモジュールの「特定のコミット」を対象に連携しているので、その「特定のコミット」を最新のものにしてあげる必要があります👀

# 統合リポジトリでサブモジュールの変更をステージング
cd ..
git submodule update --remote

3. 他の開発者が統合リポジトリをクローンして開発に入る

　他の開発者が統合リポジトリをクローンするときは、ただgit cloneするだけだとダメです🙅‍♂️

git clone <統合リポジトリURL>
git submodule update --init --recursive

上記のコマンドによってサブモジュール登録ができます🙌

統合リポジトリさえクローンしてしまえば関連するリポジトリもまるまるクローンできちゃうので楽ですね！！

Docker Compose の設定を書く

　統合リポジトリでは、Docker Compose を用いて FE と BE を一括で起動・管理します。以下の例は、FE と BE がそれぞれ独立した Docker コンテナとして動作する設定例です。

※ 実際動かす場合、これだけでは起動できないです。frontendやbackend内にDockerfileでコンテナの設定を書く必要がありますがこの記事では割愛させていただきます🙇‍♂️

version: '3.8'
services:
  frontend:
    build:
      context: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app

  backend:
    build:
      context: ./backend
    ports:
      - "8080:8080"
    volumes:
      - ./backend:/app

  nginx:
    build:
      context: ./nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/logs:/var/log/nginx
    depends_on:
      - backenddocker-compose.yml

おわりに

　Docker Compose と Git Submodules を活用することで、FE/BE 分離プロジェクトを簡単に管理できる仕組みを作ることができます。実際にこれらの設定を駆使して作ったリポジトリがあるのでよかったら覗いてみてください👀

• 実際のリポジトリ

　また、以下のような一工夫を加えることで、開発環境構築から運用までのワークフローを大幅に効率化することができます。

• 統合リポジトリにインフラや自動デプロイの設定を組み込む
• 統合リポジトリにDBのマイグレーションやシーダーの実行コマンドをまとめたshファイルを置く

　ぜひこの記事を参考に、プロジェクトでの活用をご検討ください！

参考文献

• Git submodule の基礎