ろぼいんブログ
更新：

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

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

はじめに

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

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

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

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

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

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

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
Terminal window
git submodule add <リポジトリーのURL> <ディレクトリー名>

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

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

Terminal window
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経由に変更します。

.gitmodules
[submodule "<ディレクトリー名>"]
path = <ディレクトリー名>
url = https://github.com/[org]/[repository].git
url = [email protected]:[org]/[repository].git

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

.git/config
[submodule "<ディレクトリー名>"]
  url = [email protected]:[org]/[repository].git
  url = https://github.com/[org]/[repository].git
  active = true

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

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

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

Cloudflare Pagesのプロジェクトの新規作成画面

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

リポジトリーの選択画面のスクリーンショット

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

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

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

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

package.json
{
  "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の設定画面

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

.github/workflows/deploy-hook.yml
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#Cloudflare#Git#プログラミング#Web開発#Astro#Node.js

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事