Zenn
🪓

【tRPCプロジェクト】Git submoduleでサーバー側、クライアント側のプロジェクトを分けて管理する

2023/02/13に公開
Git
tRPC
tech

概略

tRPC プロジェクトで「サーバー側、クライアント側を分けてプロジェクトを Git 管理したい！」と思ったことはありませんか？
そんなときにはGit Submoduleを使用しましょう。
本記事では Git Submodule を使用した管理環境の構築方法を簡単にまとめておきます。
また、自分が本管理環境構築中に色々とハマった際の解決方法も Tips として共有します。
なお、tRPC や Git Submodule については説明しませんので、ご了承下さい。

管理環境構築

それでは簡単に管理環境構築を説明します。
といっても、サブモジュールの基本的な導入方法と大きく変わることはありません。

前提として、サーバー側プロジェクトもクライアント側プロジェクトとも tRPC が導入済みであるとします。

  1. サーバー側プロジェクトを作成し、Git 管理下に置く。
  2. GitHub 等でサーバー側プロジェクトのリモートリポジトリを作成し、サーバー側プロジェクトをプッシュする。
  3. クライアント側プロジェクトを作成する。
  4. サーバ側プロジェクトをサブモジュールとして、クライアント側リポジトリに追加。

クライアント側プロジェクトのディレクトリ構造例は以下となります。

.
├── client/
│   └── src
└── server  # サブモジュール（サーバー側）
    └── src

Tips

サーバー側プロジェクトでパスエイリアスを指定している場合はクライアント側プロジェクトでも指定する

サーバー側プロジェクトでパスエイリアスを指定している場合はクライアント側プロジェクトのtsconfig.jsonでも指定しましょう。

以下はtsconfig.jsonにて@でエイリアスを指定している場合のパスエイリアス例です。
ディレクトリ構造は以下のようなディレクトリ構造とします。

.
├── client/
│   ├── src
│   └── tsconfig.json
└── server  # サーバー側プロジェクトのサブモジュール
    ├── src
    └── tsconfig.json

クライアント側のtsconfig.jsonの例は以下です。

{
  // 中略
  "baseUrl": "./",
  "paths": {
    "@/*": ["../server/src/*"], // サーバー側
    "@@/*": ["./src/*"] // クライアント側
  }
}

サブモジュール（サーバー側プロジェクト）の tRPC パッケージのインストールを行う

クライアント側ではサブモジュールであるサーバー側の tRPC 関連のモジュールimportするため、クライアント側のコンパイル時にはサーバー側のモジュールに加え、サーバー側でimportしている tRPC パッケージが必要になります。
そのため、サブモジュール（サーバー側）で tRPC パッケージをインストールしましょう（サブモジュール側もpackage.jsonあるでしょうし、npm install --productionでいいかと思います）。
GitHub Actions 等で CI/CD 回している場合は上記フローを入れることを忘れずに…。

参考文献

Discussion