XM Cloud におけるマルチサイト構築

本記事ではSitecore XMCloudでのマルチサイト事のプロジェクト管理について紹介します。

マルチサイト構築の選択肢

XM Cloud でマルチサイトを構築する場合、同一のプロジェクトを複数サイトで共通利用するか、あるいはサイトごとにプロジェクトを分けるか、大きく2つのアプローチがあります。

■ 共通プロジェクトの場合

ソースコードやコンポーネント構成を完全に共通化できる
複数サイトで同一の実装を使い回せるため、保守性が高い

■ 個別プロジェクトの場合

サイトごとの要件を柔軟に実装できる
個別プロジェクトにサイト固有のロジックを追加することで煩雑化するリスクを避けられる

基本的には、サイト構成（コンポーネント）が似ている場合は共通化した方が実装コストが低くなるため、共通プロジェクトを採用するケースが一般的です。

一方で、サイトごとの要件が大きく異なる場合や、将来的に独立した運用を想定する場合は、プロジェクトを完全に分けた方が適しているケースもあります。

本記事では、その後者であるプロジェクトファイルを完全に別管理するパターンについて紹介します。

プロジェクトの追加

Next.jsのデフォルトプロジェクトが「headapps\nextjs-starter」にあるためこちらをコピーしてプロジェクトを2つにします。
今回は「sample-site」という名前で作成していますが、一旦はただフォルダをコピーすれば問題ないです。

※ spa-startersというプロジェクトはangular用のプロジェクトとなっているためこちらは今回無視します。

XMCloud設定の追加

リポジトリのルートに「xmcloud.build.json」というXMCloud用のビルド設定ファイルがあります。

こちらに今回追加したプロジェクトを追加することでXMCloud上で確認する際に別のWebインスタンスとして立ち上げることができるようになります。

追記したのは「sampleSite」というキーです。

pathは作成したプロジェクトパスに変更しています。

{
    "renderingHosts": {
      "nextjsstarter": {
        "path": "./headapps/nextjs-starter",
        "nodeVersion": "22.11.0",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "buildCommand": "build",
        "runCommand": "next:start"
      },
      "sampleSite": {
        "path": "./headapps/sample-site",
        "nodeVersion": "22.11.0",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "buildCommand": "build",
        "runCommand": "next:start"
      }
    }
    ...
}

XMCloudデプロイ

XMCloudへのデプロイ自体はGitの自動連携によって簡単にデプロイ可能なので手順はスキップします。

先程の設定ファイルをコミットし、XMCloud上にデプロイを行うと以下の配下に「sampleSite」というアイテムが追加されます。

「/sitecore/system/Settings/Services/Rendering Hosts」

このレンダリングアイテムのDataセクションにあるフィールド値を確認してみると、「Default」と「sampleSite」には異なるインスタンス（URL)、異なるアプリケーション名が割り当てられていると思います。このアイテムを各サイトに設定することでプロジェクトファイルの振り分けを行うことができます。