---
title: Cloudflare PagesでGitサブモジュールを使う方法
url: https://roboin.io/article/2024/04/25/how-to-use-git-submodules-with-cloudflare-pages/
description: Cloudflare Pagesでサブモジュールを使う方法についての記事があまり見当たらなかったので、今回はその方法を詳しく解説します。
publishedDate: 2024-04-25T00:33:36.000Z
modifiedDate: 2024-05-12T15:41:40.000Z
thumbnail: https://roboin.io/api/og/2024/04/25/how-to-use-git-submodules-with-cloudflare-pages/
thumbnailAlt: 記事のサムネイル画像
thumbnailCaption: N/A
---

# Cloudflare PagesでGitサブモジュールを使う方法

この記事では、Cloudflare PagesでGitサブモジュールを使う方法について、具体的な設定方法とともに解説します。

## はじめに

これまで、このブログのソースコードと記事をすべてひとつのリポジトリーにまとめて公開していたのですが、最近、ソースコードと記事を別のリポジトリーに分けて管理するようにしました。

- ソースコードと記事のリポジトリーが分かれていた方が管理しやすい
- 記事のリポジトリーは非公開にしたい
- 記事内で画像を引用することがあるが、リポジトリーが公開状態になっていると、画像が単体で公開されてしまうため

といった理由があります。このようにリポジトリーを分ける場合、記事のリポジトリーをソースコードのリポジトリーにサブモジュールとして追加すると便利です。

このブログで利用しているCloudflare Pagesでサブモジュールを使う方法についての記事があまり見当たらなかったので、今回はその方法を詳しく解説します。

## 1. サブモジュールを追加する

まずは、通常どおりにサブモジュールを追加します。

```bash
git submodule add <リポジトリーのURL> <ディレクトリー名>
```

## 2. サブモジュールの参照をSSH経由に変更する

Cloudflare Pagesでは、サブモジュールをSSH経由で参照する必要があります。HTTPS経由で参照しようとすると、認証エラーが発生します。

```bash
16:24:52.348  Cloning into '/opt/buildhome/clone/src/content/article'...
16:24:52.349  fatal: could not read Username for 'https://github.com': Input/output error
16:24:52.349  fatal: clone of 'https://github.com/Robot-Inventor/blog-article.git' into submodule path '/opt/buildhome/clone/src/content/article' failed
16:24:52.349  Failed to clone 'src/content/article'. Retry scheduled
```

認証エラーを回避するには、`.gitmodules`を編集してサブモジュールの参照をSSH経由に変更します。

```diff
[submodule "<ディレクトリー名>"]
path = <ディレクトリー名>
-url = https://github.com/[org]/[repository].git
+url = git@github.com:[org]/[repository].git
```

ただし、SSH経由に変更したあと、新たにリポジトリーをローカルのPC上にクローンしようとすると、認証エラーが発生することがあります。参照先の書き換えに使ったPCでは、おそらく問題なく動作しますが、他のPCでは認証エラーになる可能性が高いです。ローカルでSSHの設定をしていない場合は、`.git/config`を編集することで、そのPCでのみサブモジュールをHTTPS経由に上書きできます。

```diff
[submodule "<ディレクトリー名>"]
-	url = git@github.com:[org]/[repository].git
+	url = https://github.com/[org]/[repository].git
	active = true
```

## 3. Cloudflareにリポジトリーへのアクセス権限を付与する

Cloudflare Pagesでサブモジュールを利用するには、サブモジュールとして追加したリポジトリーへのアクセス権限をCloudflareに付与する必要があります。

Cloudflare Pagesの新規プロジェクトの作成画面を開き、［Gitに接続］をクリックします。

![Cloudflare Pagesのプロジェクトの新規作成画面](https://roboin.io/api/media/file/image-1631.png)

リポジトリーの選択画面が表示されます。サブモジュールとして追加したリポジトリーがここに表示されていない場合は、［リポジトリが表示されていない場合は、GitHub のCloudflare Pagesのアプリに対するリポジトリ アクセスを構成します。］というリンクをクリックします。GitHubの認証画面が表示されるので、サブモジュールとして利用したいリポジトリーへのアクセス権限を追加します。

![リポジトリーの選択画面のスクリーンショット](https://roboin.io/api/media/file/image-1632.png)

アクセス権限を追加したら、新しいCloudflare Pagesプロジェクトを作成せずに画面を閉じてしまって問題ありません。

## 4. ビルド時にサブモジュールを更新するコマンドを追加する

さて、ここまでの設定でCloudflare Pagesでサブモジュールを利用できるようになりました。しかし、サブモジュールを更新するには、手動で`git submodule update --remote`を実行する必要があります。

Cloudflare Pagesでビルド時に自動的にサブモジュールを更新するには、ビルドスクリプトに`git submodule update --remote`を追加します。たとえば、私のリポジトリーでは[Astro](https://astro.build/)を利用しており、`npm run build`でビルドできるようにしているので、`build`スクリプトを次のように変更しました。

```diff
{
  "scripts": {
-    "build": "astro build",
+    "build": "git submodule update --remote && astro build",
  }
}
```

## 5. サブモジュールの更新時に自動でビルドする

私の場合は、ブログのソースコードのリポジトリーに、記事のリポジトリーをサブモジュールとして追加しました。この場合、記事のリポジトリーが更新されたら自動的にビルドしてほしいので、GitHub Actionsとdeploy hookを利用します。

まずは、Cloudflare Pagesのプロジェクトの設定画面を開き、deploy hookのURLを作成します。プロジェクトの設定の［ビルド＆デプロイ］タブを開き、［デプロイフック］セクションで［デプロイ フックを追加します］からdeploy hookを作成します。

![deploy hookの設定画面](https://roboin.io/api/media/file/image-1633.png)

次に、サブモジュールとして利用しているリポジトリーにGitHub Actionsの構成ファイルを追加します。ただし、ブランチ名とdeploy hookのURLは適切なものに変更してください。

:::danger
deploy hookのURLを知っている人は誰でも、そのURLを使ってビルドをトリガーできます。そのため、公開リポジトリーでは、シークレットを使ってdeploy hookのURLを隠すようにしてください。
:::

```yaml
name: Deploy Hook

on:
    push:
        branches:
            - master

jobs:
    deploy:
        runs-on: ubuntu-latest

        steps:
            - name: Checkout code
              uses: actions/checkout@v2

            - name: Deploy to Cloudflare Pages
              run: curl -X POST "<deploy hookのURL>"
```

これで、サブモジュールとして利用しているリポジトリーが更新されたら、自動的にビルドされるようになりました。

## まとめ

Cloudflare Pagesでサブモジュールを利用する方法について解説しました。サブモジュールを利用することで、複数のリポジトリーを組み合わせて管理できるため、大規模なプロジェクトを管理する際に便利です。

Cloudflare Pagesでサブモジュールを利用するには、SSH経由でサブモジュールを参照する必要があることに注意してください。

## 参考

- [github - Deploying repos with submodules using cloudflare pages - Stack Overflow](https://stackoverflow.com/questions/72786625/deploying-repos-with-submodules-using-cloudflare-pages/78291745#78291745)