前回はローカルの Docker イメージを LTSC2022 を利用するかたちに切り替えましたが、もう少し環境に関して確認をしていきます。今回は、レンダリングの環境を変更していきます。

レンダリングの設定を確認する

レンダリングに関しては、docker-compose.override.yml のファイルに定義されている通り、Windows Nano Server のイメージを利用して、node.js をインストール、そのイメージを利用して rendering が動くようになっています。この nodejs をビルドしているファイルは docker\build\nodejs\Dockerfile として用意されています。

ARG PARENT_IMAGE
FROM $PARENT_IMAGE

ARG NODEJS_VERSION

USER ContainerAdministrator
WORKDIR c:\build
RUN curl.exe -sS -L -o node.zip https://nodejs.org/dist/v%NODEJS_VERSION%/node-v%NODEJS_VERSION%-win-x64.zip
RUN tar.exe -xf node.zip -C C:\
RUN move C:\node-v%NODEJS_VERSION%-win-x64 c:\node
RUN del node.zip

RUN SETX /M PATH "%PATH%;C:\node\"
RUN icacls.exe C:\node\ /grant "Authenticated Users":(F) /t

USER ContainerUser

ここで Node.js のバージョンに関しては、.env のファイルの値を見ていることがわかります。今回は以下のように変更します。

NODEJS_VERSION=20.9.0

続いて、xmcloud.build.json ファイルにもバージョンが記載されています。このファイルは、XM Cloud の SaaS 版を展開するときに参照しているファイルになります。このファイルの nodeVersion に関しても 20.9.0 に変更します。

Next.js のパスを変更する

標準のプロジェクトで動いている場合、src\sxastarter のフォルダにプロジェクトを展開しています。これを今回 src\rendering に変更します。

変更をした後、以下の2か所変更をすることで新しいディレクトリで動作するようになります。

まずは xmcloud.build.json に記載している path を変更してください。node.js のバージョン変更と合わせて、以下のようになっています。

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

続いて docker-compose.override.yml で定義している rendering の build - context の設定を以下のように変更してください。

  rendering:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-rendering:${VERSION:-latest}
    build:
      context: ./docker/build/rendering

これで一通り設定完了となります。

イメージをビルドする

上記の変更を行ったあと、イメージとしては nodejs および rendering のイメージのみビルドしなおすことで利用できるようになります。

docker compose build nodejs rendering

しばらくすると新しいイメージが完成して、全体を起動してください。新しい rendering のイメージに対して、バージョンを確認すると以下のように 20.9.0 になっていることがわかります。

エクスペリエンスエディターも問題なく動作します。

Vercel の変更

上記の変更をした後、GitHub にコードをアップロードする前に、連携している Vercel の設定を変更してください。ルートディレクトリの設定を変更します。

XM Cloud のインスタンスおよび公開側の変更ができました。GitHub にコードを反映させます。以下の画面は XM Cloud Deploy で新しい環境に切り替わっているのを確認している画面です。

しばらくすると、新しい環境の CMS が起動します。Pages で正しくデータが表示されているのがわかります。

まとめ

今回はレンダリングの環境が動いている部分を、設定変更を通じて紹介していきました。基本的には Node.js のイメージを利用して Next.js のプロジェクトと連携して動作する形となっている形です。