テンプレートを利用してリポジトリを作成する

XM Cloud 向けに提供されているテンプレートは、以下のリポジトリで公開されています。

• https://github.com/sitecorelabs/xmcloud-foundation-head

上記の画面の右上に、Use this template というボタンが用意されており、これをクリックすると Create a new repository を選択することができます。

クリックをすると新しい名前を作成してリポジトリを作成することができます。この際、Private か Public かを選択することが可能です。基本的には Private を選択するといいです。しばらくすると、上記のテンプレートを利用したリポジトリが作成されます。

ローカルで起動できるようにする

作成したリポジトリのクローンを手元に作成をします。この際、main ブランチではなく development ブランチを作成して作業を進めていきます。

ローカルで作成をする Docker イメージのバージョンを新しいものにしたいため、init.ps1 のファイルで baseOs のデフォルトの値を lts2022 に変更します。

    [Parameter(Mandatory = $false, HelpMessage = "Specifies os version of the base image.")]
    [ValidateSet("ltsc2019", "ltsc2022")]
    [string]$baseOs = "ltsc2022"
)

またホスト名に関しては、sxastarter ではなく tailwindcss に変更します。3か所記載されているので変更をしてください。

この後、ターミナルを管理者権限で起動して、以下のコマンドを実行して初期化します。

.\init.ps1 -InitEnv -LicenseXmlPath "C:\path\to\license.xml" -AdminPassword "DesiredAdminPassword"

上記のコマンドを実行すると、.env の値が更新され、また必要なホスト名などが追加されます。

.env に関しては以下の２点を更新してください。

COMPOSE_PROJECT_NAME=tailwindcss
NODEJS_PARENT_IMAGE=mcr.microsoft.com/windows/nanoserver:ltsc2022

これでローカルの Docker の環境が立ち上がるようになります。以下のコマンドで起動することを確認してください。

続いて証明書に関して調整をします。 docker\traefik\config\dynamic\certs_config.yaml のファイルを以下のように書き換えてください。

tls:
  certificates:
    - certFile: C:\etc\traefik\certs\_wildcard.tailwindcss.localhost.pem
      keyFile: C:\etc\traefik\certs\_wildcard.tailwindcss.localhost-key.pem
    - certFile: C:\etc\traefik\certs\xmcloudcm.localhost.pem
      keyFile: C:\etc\traefik\certs\xmcloudcm.localhost-key.pem

これで準備が整いました。以下のコマンドを実行します。

.\up.ps1

XM Cloud のローカルのインスタンスが起動しました。

新しいプロジェクトの追加

今回は既存の sxastarter のコードではなく、新しい JSS のプロジェクトを作成するようにします。プロジェクトを追加するコマンドは、以下のコマンドを実行する形です。

cd src
npx create-sitecore-jss

まず最初にプロジェクトのテンプレート選択の画面になります。

今回は以下のように選択していきます。

• Which template would you like to create? nextjs
• Where would you like your new app created? tailwindcss
• Would you like to use the pre-push hook for linting check? Y
• Which template would you like to create? tailwindcss
• What is your Sitecore hostname (used if deployed to Sitecore)? ( default )
• How would you like to fetch Layout and Dictionary data? GraphQL
• How would you like to prerender your application? SSG
• Are you building for Sitecore XM Cloud? Y
• Would you like to include any add-on initializers? nextjs-sxa と nextjs-multisite をチェック

しばらく新しいプロジェクトの追加作業が走ります。

このコマンドの最後のステップで git で個別管理をする形でディレクトリ作成が完了してしまいます。これを回避するために、 .git のフォルダが隠しフォルダを削除しましょう。エクスプローラーで隠しファイルを表示するようにして削除をしてしまいます。

もともと作成されていた sxastarter のフォルダは不要になるので、削除します。結果、ディレクトリ構成は以下のように変わります。

Next.js のパスを反映させる

デフォルトでは sxastarter を読み込む形としていましたので、今回は新しいパスを利用して XM Cloud が起動できるように変更していきます。まず、docker-compose.override.yml ファイルに記載されているパスを変更します。

  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\tailwindcss:C:\app

src\sxastarter を src\tailwindcss にしました。続いて、XM Cloud が展開する際に利用する xmcloud.build.json のファイルに記載されているパスを変更します。

{
    "renderingHosts": {
      "xmcloudpreview": {
        "path": "./src/tailwindcss",
        "nodeVersion": "20.14.0",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "buildCommand": "build",
        "runCommand": "next:start"
      }
    },

新しいパスで起動するかを確認するためには、すでに作成したデータを削除しましょう。まず前回起動時に作成されたデータを削除します。

cd docker
.\clean.ps1

改めて .\up.ps1 を実行してください。しばらくすると XM Cloud が起動します。

動作確認

コンテンツエディターを立ち上げて、Headless Site を追加します。作成をしたサイトの Home を利用してエクスペリエンスエディターを起動するとページの編集画面となります。

Title のコンポーネントを配置してトップページのタイトルが表示されることを確認することができました。これで、ローカルでの動作確認は完了となります。

まとめ

今回はテンプレートで用意されている sxastarter ではなく新しい Next.js のプロジェクトを追加して動くようにしました。ここまで作成をしたコードは、以下で公開をしています。

• https://github.com/haramizu/sitecoredemo-jp/tree/part-1

参考情報

• Headless SXA の新規プロジェクトを作成する

関連タグ

• XM Cloud
• Headless SXA