Tailwind Logo

XM Cloud Next.js Starter Kit 変更点に関して

Headless SXAXM Cloud

公開日: 2024-10-01

XM Cloud のスターターキットに関して、ヘッドレスファーストの構成に代わるという情報が出てきました。今回はその情報を参照しながら、リポジトリの構成を変更したいと思います。

コンテンツ更新

以下のページで最新の情報を確認してください

Rob のブログで大きく取り上げており、元ネタに関しては以下のソースを参照してください。

なお、YouTube の動画も上がっていてこのあたりがポイントです。

大きな変更点

これまで docker を利用して開発環境を手元で動かすのが前提となっていましたが、Headless での開発がやりやすくなります。

authoring フォルダ

ここにはシリアライズをするデータ、また編集環境で必要なツールなどが含まれています。従来の src の下にあった platform の位置がこことなります。

headapps フォルダ

この中には、これまでの sxastarter のサンプルが入っていますが、フォルダの名前が nextjs-starter と変更されています。これは今後、Nuxt や astro も含めて様々なレンダリングに対応をしていくための最初のステップという感じでしょうか。

local-containers フォルダ

ここに Docker に関するファイルがすべて収録されています。ルートレベルに Docker 関連のファイルが数多くあったのが集約されている分、やりやすくなりますね。

もちろん、ローカルで利用する Docker は強力なツールですが、私自身も XM Cloud のインスタンスにつなげて作ったりすることもあり、この変更をまず手元のデモ環境用に整えたいと思います。

新しいファイルを一式反映させる

一時的に重複する形となりますが、新しく提供されているテンプレートから auhtoring、 headapps および local-containers をコピーします。

xmdev01.png

Docker の整理

私のデモ環境として提供しているリポジトリの Docker には cm インスタンスに対して以下のカスタマイズを行っています。

  • Content Hub DAM を有効にするための xdt ファイルの適用
  • 日本語リソースをコピー
  • langagefallback に関する設定の追加

フォルダの階層としては以下のようになっています。

xmdev02.png

上記のファイルを新しいフォルダにコピーをして、local-containers\docker\build\cm\Dockerfile のファイルを以下のように書き換えました。

Dockerfile 
# escape=`

ARG PARENT_IMAGE
ARG SOLUTION_IMAGE
ARG TOOLS_IMAGE

FROM ${TOOLS_IMAGE} as tools
FROM ${PARENT_IMAGE}

SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]

WORKDIR C:\inetpub\wwwroot

# Copy developer tools and entrypoint
COPY --from=tools C:\tools C:\tools

# Copy Localization Files
COPY .\App_Data \inetpub\wwwroot\App_Data

# Copy Config files - language fallback
COPY .\App_Config \inetpub\wwwroot\App_Config

# Copy Xdts
COPY .\Xdts\ .\Xdts

# Perform transforms
RUN (Get-ChildItem -Path 'C:\\inetpub\\wwwroot\\xdts\\web*.xdt' -Recurse ) | `
    ForEach-Object { & 'C:\\tools\\scripts\\Invoke-XdtTransform.ps1' -Path 'C:\\inetpub\\wwwroot\\web.config' -XdtPath $_.FullName `
    -XdtDllPath 'C:\\tools\\bin\\Microsoft.Web.XmlTransform.dll'; };

続いてこれまでルートにあった docker-compose.yml および docker-compose.override.yml には Tailwind CSS の Next.js のプロジェクトを追加する際にレンダリングを追加していました。今回はシンプルにするために、追加した部分は反映させずそのままとします。

Docker 周りでカスタマイズをしているのは、.env ファイルを template とし、 init.ps1 でテンプレートから生成する部分になります。この手順は以下のブログの記事を参考にして実施します。

上記の作業が終わったところで、不要になった以下のファイルを削除します。

  • .env.template
  • docker-compose.override.yml
  • docker-compose.yml
  • down.ps1
  • init.ps1
  • New-EdgeToken.ps1
  • up.ps1
  • upFunctions.ps1
  • docker フォルダ一式

最後に、初回起動時には Rendering ホストのアイテムを Sitecore CLI を利用してインポートをしますが、今回シリアライズに関連するパスが変更されています。この設定ファイルは、sitecore.json になりますので、パスを変更してください。

JSON 
{
  "$schema": "./.sitecore/schemas/RootConfigurationFile.schema.json",
  "modules": [
    "authoring/items/**/*.module.json"
  ],

これで一通り新しい環境に設定を反映できました。それでは実際に起動してみましょう。

PowerShell 
.\local-containers\scripts\init.ps1 -InitEnv -LicenseXmlPath "C:\projects\license\license.xml" -AdminPassword "DesiredAdminPassword"

無事、.env ファイルが作成されました。続いてコンテナで動作する XM Cloud を初回ですので以下のコマンドで実行します。

PowerShell 
.\local-containers\scripts\up.ps1

しばらくすると、XM Cloud のコンテナがローカルで動作しました。

xmdev03.png

sxastarter のサンプルページを Experience Editor で開くことができました。

xmdev04.png

authoring フォルダの整理

まずフォルダの構造を参照すると、従来の src\platform およびシリアライズに関するデータが含まれているのが分かります。

xmdev05.png

手持ちのサンプルは、まさに Docker コンテナの CM に対して変更している内容が含まれているため、該当するファイルをコピーします。またファイルを置いているだけでは build の際に反映されるわけではありませんので、authoring\platform\Platform.csproj のファイルに該当するファイルを追加していきます。

以下は今回追加した項目です。

XML 
  <ItemGroup>
    <Content Include="App_Config\Include\zzz\languagefallback.config" />
    <Content Include="App_Data\items\core\localization\cmp.items.core.ja-JP.dat" />
    <Content Include="App_Data\items\core\localization\dam.items.core.ja-JP.dat" />
    <Content Include="App_Data\items\core\localization\items.core.ja-JP.dat" />
    <Content Include="App_Data\items\core\localization\items.core.jss.ja-JP.dat" />
    <Content Include="App_Data\items\core\localization\items.core.sxa.ja-JP.dat" />
    <Content Include="App_Data\items\master\localization\cmp.items.master.ja-JP.dat" />
    <Content Include="App_Data\items\master\localization\dam.items.master.ja-JP.dat" />
    <Content Include="App_Data\items\master\localization\items.master.ja-JP.dat" />
    <Content Include="App_Data\items\master\localization\items.master.jss.ja-JP.dat" />
    <Content Include="App_Data\items\master\localization\items.master.sxa.ja-JP.dat" />
    <Content Include="App_Data\localization\cmp.texts.ja-JP.xml" />
    <Content Include="App_Data\localization\dam.texts.ja-JP.xml" />
    <Content Include="App_Data\localization\texts.ja-JP.xml" />
    <Content Include="App_Data\localization\texts.jss.ja-JP.xml" />
    <Content Include="App_Data\localization\texts.sxa.ja-JP.xml" />
    <Content Include="xdts\Web.config.xdt" />
    <None Include="Platform.wpp.targets" />
    <None Include="Properties\PublishProfiles\Local.pubxml" />
    <None Include="README.md" />
    <None Include="web.config" />
  </ItemGroup>

これで必要なデータを反映させました。古いファイルを削除していきます。

  • src\platform 一式
  • XmCloudSXAStarter.sln
  • Packages.props
  • Directory.Build.targets

最後に、xsdt のフォルダのデータを XM Cloud に反映させるために、xmcloud.build.json のファイルに以下の部分を追加します。

JSON 
  "transforms": [
    {
      "xdtPath": "/xdts/",
      "targetPath": "/"
    }
  ],

このファイルは CORS の設定を追加することで Content Hub DAM との連携ができるようになりました。Platform 関連の準備は終了です。

手持ちのリポジトリで紹介しているサイトに関しては、多言語でデモが含まれているため、設定として日本語に関するアイテムを必ず作成する形となっています。そこで今回は、authoring\items\sites-init.module.json というファイルを以下のように作成しました。

JSON 
{
  "$schema": "../../.sitecore/schemas/ModuleFile.schema.json",
  "namespace": "sites-init",
  "items": {
    "includes": [
      {
        "name": "SystemLanguages",
        "path": "/sitecore/system/Languages/ja-JP",
        "scope": "singleItem"
      },
      {
        "name": "SystemLanguagesEnUs",
        "path": "/sitecore/system/Languages/en-US",
        "scope": "singleItem"
      },
      {
        "name": "core-SystemLanguages",
        "path": "/sitecore/system/Languages/ja-JP",
        "scope": "singleItem",
        "database": "core"
      },
      {
        "name": "StandardWorkflow",
        "path": "/sitecore/system/Workflows/Standard Workflow"
      }
    ]
  }
}

必須のアイテムを作成して、改めてシリアライズをしてアイテムのデータも作成しました。

xmdev06.png

サンプルプログラムの変更

最後に、これまで作成してきた tailwindcss のフォルダを headapps のフォルダに移動します。また、sxastarter のフォルダは不要となりますので、src フォルダごと削除しても問題ありません。

ここで rendering の利用先が変更となるため、以下の２点を変更します。Docker の rendering のコンテナが利用するパスを変更します。local-containers\docker-compose.override.yml のファイルの volumes を変更してください。

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

続いて XM Cloud に展開したときも同様に利用できるように、xmcloud.build.json のファイルの path を書き換えます。

JSON 
{
  "renderingHosts": {
    "xmcloudpreview": {
      "path": "./headapps/tailwindcss",
      "nodeVersion": "20.14.0",

これで変更は完了となります。Docker の環境、XM Cloud の環境のどちらでも動作するか確認をしてください。

まとめ

今回は既存のサンプルに関して、新しいプロジェクトの形式に変更するところにフォーカスを絞って紹介をしました。新しくなったプロジェクトの使い方はまた別途紹介します。

関連タグ