XM Cloud で利用する Rendering を追加する

公開日 :

Sitecore のツールと Next.js のプロジェクトが連携をして、見たまま編集を実現しています。XM Cloud ではデフォルトで１つの Rendering のインスタンスを用意していますが、別途外部で用意することができます。今回は、前回作成をした別のサイトを利用して手順を確認していきます。

レンダリングの Docker を追加する

デフォルトでは rendering というコンテナを利用してローカルの環境では Experience Editor ではみたまま編集のレンダリングの処理をしています。今回は別のコンテナを利用していきます。

まず別のホストとして動かすため、.env ファイルに以下の記述をしてください。

TAILWIND_HOST=tailwind.sxastarter.localhost
TAILWIND_HOST_INTERNAL_URI=http://tailwind:3000

ホスト名などは基本大丈夫ですが、ローカルの自己証明書を利用している関係もあり、ホストとしては sxastarter.localhost のサブドメインにすることで証明書などの処理を省略することができます。

続いて、docker-compose.override.yml ファイルに以下の記述を追加してください。

  tailwind:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-tailwind:${VERSION:-latest}
    build:
      context: ./docker/build/rendering
      target: ${BUILD_CONFIGURATION}
      args:
        PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
    volumes:
      - .\src\xmc-tailwind:C:\app
    environment:
      SITECORE_API_HOST: "http://cm"
      NEXTJS_DIST_DIR: ".next-container"
      PUBLIC_URL: "https://${TAILWIND_HOST}"
      JSS_EDITING_SECRET: ${JSS_EDITING_SECRET}
      SITECORE_API_KEY: "${SITECORE_API_KEY_xmcloudpreview}"
      DISABLE_SSG_FETCH: ${DISABLE_SSG_FETCH}
    depends_on:
      - cm
      - nodejs
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.tailwind-secure.entrypoints=websecure"
      - "traefik.http.routers.tailwind-secure.rule=Host(`${TAILWIND_HOST}`)"
      - "traefik.http.routers.tailwind-secure.tls=true"

上記の記述は rendering の記述の真似をしていますが、image に関しては名前が別になるように変更をしており、またホスト名、ラベルなどを変更している形です。

変更後、docker compose build でイメージを更新して、docker compose up -d でコンテナを起動します。

動作確認

まずは元々のサイトに対して、Experience Editor を利用して画面を表示できるかの動作確認をします。ローカルの XM Cloud のインスタンスにアクセスをして、コンテンツエディターから対象のページを右クリック、Experience Editor を立ち上げます。以下のように画面が表示されれば、正しく設定ができています。

random desc

サイトのコンテンツに関しては、ローカルに対してインポートしていないため、以下のコマンドを実行してインポートしてください。

dotnet sitecore login
dotnet sitecore ser push -n default

インポートが完了したあと、コンテンツエディタを開くとサイトのツリーが完成しています。

random desc

このサイトを表示するためのレンダリングをするサイトを変更するために、/sitecore/system/Settings/Services/Rendering Hosts の下に新しいアイテムを作成します。もともとの Rendering のアイテムを複製して、名前を変更しました。

random desc

追加したサイトのレンダリングに関する設定は、/sitecore/content/xmc-tailwind/xmc-tailwind/Settings/Site Grouping/xmc-tailwind のアイテムにある Settings で Rendering host を選択することができます。

random desc

設定を変更して、Home のアイテムを表示させると以下のようにページの表示ができました。

random desc

これでローカルの環境の設定が出来ました。

作業としてはローカルの新しいレンダリングホストができたため、その部分をシリアライズしてプロジェクトに反映させてください。

XM Cloud に2つ目の Rendering host を追加する

ローカルでは上記のように追加の Docker コンテナを用意する形で対応できますが、SaaS で展開している場合はどうすればいいでしょうか？この手順は以下のページに記載されている手順です。

では実際に設定をしていきましょう。まず、xmcloud.build.json のファイルを以下のように書き換えます。

{
  "renderingHosts": {
    "xmcloudpreview": {
      "path": "./src/rendering",
      "nodeVersion": "20.9.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "lintCommand": "lint",
      "startCommand": "start:production",
      "buildCommand": "build",
      "runCommand": "next:start"
    },
    "xmc-tailwind": {
      "path": "./src/xmc-tailwind",
      "nodeVersion": "20.9.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "lintCommand": "lint",
      "startCommand": "start:production",
      "buildCommand": "build",
      "runCommand": "next:start"
    }
  },

アップロードをしたあと、XM Cloud Deploy で Build を実行します。実行後、新しく Rendering Host が追加されていることがわかります。

random desc

まとめ

Next.js で別のプロジェクトとして開発をしたい場合、今回のように Docker の環境および XM Cloud の環境で別のレンダリングホストを追加することができます。もちろん複数のサイトで同じプロジェクトを共有するということも可能ですが、そのもう一歩踏み込んだ場合には、ということで今回の手順を紹介しました。

関連情報