🙌

Cloudflare Pages がモノレポをサポートしました!

2024/05/13に公開

Cloudflare Pages はJAMStackホスティングのサービスです。Workersと連携しサーバサイドのJavaScriptを実行が可能であり、さらに様々なデータソースとの連携もサポートしておりフルスタックなホスティング基盤への進化しつつあります。
https://blog.cloudflare.com/pages-workers-integrations-monorepos-nextjs-wrangler

この記事では新たにサポートされたモノレポの設定手順をまとめます。
そのまえに・・

モノレポとポリレポ

従来 Pages のプロジェクトはGit レポジトリと1対1の関係を持っていました。Gitへの変更をリアルタイムに検知しDeployを実行させます。
これに対して一つのGitレポジトリを複数のProjectで連携させるのがモノレポです。対して一つのProjectで複数のGitレポジトリを持てるのがポリレポです。
Pagesは両方に対応していませんでしたが、新たにモノレポに対応するようになりました。

この図でいうとGitのecommerce-appレポジトリへの繁栄はdesign-libraryプロジェクトとpackageプロジェクト双方のデプロイをトリガーしますが、marketing-appレポジトリへの変更はdesign-libraryプロジェクトへのデプロイのみをトリガーします。これによりレポジトリの共通化による重複作業を排除することが可能で、ソースコード管理を一括化させセキュリティの向上やレビュープロセスの簡素化、等のメリットが期待できます。

やってみる

まずとても単純な以下のGitレポジトリを準備しました。
https://github.com/harunobukameda/pages/tree/main
https://zenn.dev/kameoncloud/articles/38459d60d56284
に従って2つのプロジェクトを作成します。
projectaprojectbとします。

過去のブログ執筆時点で少し画面の流れが変わっていますので以下にスクショを張っておきます。割と直感的に作業できるはずなので手順は割愛します。









この作業をprojectaprojectbの2回分繰り返します。2つとも同じレポジトリをベースとします。


例えばprojectbのデプロイ履歴はこうなっています。

以下のようにGitのindex.htmlを少し書き換えます。

abともに変更を検知してDeployが行われます。

では次にGitレポジトリの/sub/index.htmlを修正してみますがその前にprojectaから/subフォルダを除外します。これによりprojectbのみ/sub/index.htmlの変更が反映されるようになります。

Settingsタブをクリックします。

Builds & deploymentsをクリックします。

Build watch pathsAdd pathsボタンを押します。

このようにExcludesub/*と設定するとprojectaではGitレポジトリのsubフォルダへの変更はSkipされます。Saveをクリックします。

ではこの状態でGitレポジトリの/sub/index.htmlを修正します。
projectaは以下の通りskipとなっています。

projectbは以下の通りデプロイが完了しています。

Discussion