Blog

Introduction

SXA Starter Kit XM Cloud can be a valuable tool for organizations that want to quickly and easily build a Sitecore website that is optimized for the Sitecore XM Cloud platform.

Currently Front-end solution is configured to run on Window based node js container. But in this document we will configure it to run on Linux based containers.

Docker container running locally is configured to mount the Project code from local into the container. This approach is very useful for local development because it allows you to make changes to the code on your local machine and see the results immediately in the container without having to rebuild the container image. But if we need to deploy the same build on Kubernetes container then it will not work because Kubernetes run already created image.

This document will require a basic knowledge of how to build and compose application within docker containers.

Lets Start to configure

If you will look into current docker-compose.override.yml and Docker file.

services:

  # A Windows-based nodejs base image

  nodejs:

    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}

    build:

      context: ./docker/build/nodejs

      args:

        PARENT_IMAGE: ${NODEJS_PARENT_IMAGE}

        NODEJS_VERSION: ${NODEJS_VERSION}

    scale: 0



  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

If we see rendering services, it is dependent on node js service so we need 2 services  to be running on docker.

nextjs – windows base image to run node.js server.

rendering – local code gets mounted on docker as image.

Below are the docker files for node js and rendering code

Rendering Dockerfile file on right column in above table only runs “npm run start:connected” when the container is mounted assuming that Next.js rendering host source is mounted to c:\app. We can not run the same image in Kubernetes as Kubernetes only runs images and does not perform builds. So in our case we will create one Linux based image for our code and will push it to a container registry and then we will mount that image on AKS.

Since we are using a Linux based containers, we do not need a docker-compose file so we will write just one docker file to create image for rendering solution. You can place this docker file in root or in rendering folder.

Docker file for creating an image :

Docker image can be built and pushed to container registry using any CI/CD process. I personally used Azure Pipeline to push docker image to container registry using two script commands

1) Build an image 

FROM node:lts as dependencies

WORKDIR /app

COPY package*.json ./

RUN npm install

FROM node:lts as builder

WORKDIR /app

COPY . .

COPY --from=dependencies /app/node_modules ./node_modules

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

 

FROM node:lts as runner

WORKDIR /app

ENV NODE_ENV production

 

COPY --from=builder /app/next.config.js ./next.config.js

COPY --from=builder /app/tsconfig.scripts.json ./tsconfig.scripts.json

COPY --from=builder /app/tsconfig.json ./tsconfig.json

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/scripts ./scripts

COPY --from=builder /app/src ./src

COPY --from=builder /app/package.json ./package.json

COPY --from=builder /app/.graphql-let.yml ./.graphql-let.yml

 

EXPOSE 80

EXPOSE 443

CMD ["npm", "run", "start:production"]

2) Push an image. 

Make sure to use Linux based agent for the job.

Once you have pushed docker image to container, you need to mount this image on AKS.