Tailwind Logo

XM Cloud デモサイト サンプルの変更

XM Cloud

公開日: 2024-09-05

これまでこのサイトで数回にわたって Tailwind CSS を利用している Sitecore XM Cloud のサンプルを提供していました。今回はサイトのサンプルを一新して、標準の sxastarter のサンプルとこのブログで紹介しているサンプルを共存させるように変更をしました。

これまで紹介をしてきたサンプルは以下の通りです。

リポジトリの構成を変更する

今回は Tailwind CSS のサンプルのサイトに関しては引き続き変わらず利用できるように、以下のサイトに展開をしていきます。

  • src\tailwindcss

一方、もともと提供されている sxastarter のサンプルを削除していました。これに関しては最新版のサンプルから取得してきて、以下のサイトで展開するように追加をします。

  • src\sxastarter

これで２つの Next.js のプロジェクトが設定されることになるため、それぞれ別のレンダリングエンジンとして動くように設定をしたいと思います。この手順は以下のブログで紹介をしていました。

ローカル環境の整備

まずローカルの環境を整えていきます。今回、追加するホストの情報は .env.template のファイルに以下のコードを追加しました。

Plain Text 
# Configure host name for tailwindcss
TAILWINDCSS_RENDERING_HOST=tailwindcss.sxastarter.localhost

docker-compose.override.yml のファイルを変更してそれぞれ個別の Node.js のコンテナを動かします。なお、デフォルトのコンテナを今回は sxastarter のほうで利用するように記述をサンプルに合わせていきます。以下のコードの違いは、volumes 、 labels および Rendering のホストになります。

Dockerfile 
  rendering:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-rendering:${VERSION:-latest}
    build:
      context: ./docker/build/rendering
      target: ${BUILD_CONFIGURATION}
      args:
        PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
    volumes:
      - .\src\sxastarter:C:\app
    environment:
      SITECORE_API_HOST: "http://cm"
      NEXTJS_DIST_DIR: ".next-container"
      PUBLIC_URL: "https://${RENDERING_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.rendering-secure.entrypoints=websecure"
      - "traefik.http.routers.rendering-secure.rule=Host(`${RENDERING_HOST}`)"
      - "traefik.http.routers.rendering-secure.tls=true"

  tailwindcss:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-tailwindcss:${VERSION:-latest}
    build:
      context: ./docker/build/rendering
      target: ${BUILD_CONFIGURATION}
      args:
        PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
    volumes:
      - .\src\tailwindcss:C:\app
    environment:
      SITECORE_API_HOST: "http://cm"
      NEXTJS_DIST_DIR: ".next-container"
      PUBLIC_URL: "https://${TAILWINDCSS_RENDERING_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.tailwindcss-secure.entrypoints=websecure"
      - "traefik.http.routers.tailwindcss-secure.rule=Host(`${TAILWINDCSS_RENDERING_HOST}`)"
      - "traefik.http.routers.tailwindcss-secure.tls=true"

これで２つの Next.js のプロジェクトをそれぞれのコンテナで起動できるようになりました。

XM Cloud 環境の整備

XM Cloud の環境でコンテナを追加する場合、 xmcloud.build.json のファイルにて定義を追加する必要があります。今回は以下のように記述しました。

JSON 
{
  "renderingHosts": {
    "xmcloudpreview": {
      "path": "./src/sxastarter",
      "nodeVersion": "20.14.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "buildCommand": "build",
      "runCommand": "next:start"
    },
    "Tailwindcss": {
      "path": "./src/tailwindcss",
      "nodeVersion": "20.14.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "buildCommand": "build",
      "runCommand": "next:start"
    }
  },
  "postActions": {
    "actions": {
      "warmUpCm": {
        "urls": [
          "/sitecore/shell",
          "/sitecore/shell/Applications/Content%20Editor.aspx?sc_bw=1",
          "/sitecore/client/Applications/Launchpad"
        ]
      },
      "populateSchema": {
        "indexNames": []
      },
      "reindex": {
        "indexNames": []
      }
    }
  }
}

ポイントは、renderingHosts の定義に対して標準の xmcloudpreview だけではなく、Tailwindcss を追加している点です。これにより XM Cloud にプロジェクトを展開すると、Rendering Host のアイテムが個別に生成されます。

sxastarter01.png

これにより Tailwindcss のサンプルサイトがレンダリングするにあたっては、別に作成された Rendering Host を指定するだけで切り替えが完了となります。

シリアライズデータの分離

コンテンツのデータに関して、今後は別々に管理をしたいため別のリポジトリで管理をすることにしました。リポジトリは以下のようになります。

変更ポイントは以下のような形です。

  • sxastarter と tailwindcss に関してそれぞれ個別にシリアライズができるように別の json ファイルで管理をしています
  • sxastarter は Rendering Host は Default を利用するようにしているため、シリアライズ対象外にしています
  • tailwindcss は別の Rendering Host を利用しているため、シリアライズの対象にしています
    • この場合、環境によって値が変わる形となりますので都度設定の変更が必要となります

このリポジトリを利用して、ローカルの環境も含めて作業ができるようにしました。

まとめ

sxastarter を利用して紹介をしたり、Tailwind CSS でサンプルの実装をしたり、という両方の手順を別々の Project で作成するのが手間にもなってきたこともあり、今後ブログで紹介をする際に１つのリポジトリで Tips を紹介していくために、共存させる形としました。

今の段階でのリポジトリのサンプルは以下から取得することが出来ます。

関連タグ