これまで作成してきたサンプルのアプリを Docker で動作するように設定をしていきます。特に凝った話ではなく、一般的な Docker の手順を紹介するだけでsう。

Dockerfile の作成

まずはベースになるコンテナイメージを作成できるように、dockerfile を作成します。今回は以下のように設定をしました。

FROM node:20-bullseye

WORKDIR /usr/app
COPY . /usr/app

RUN cd /usr/app \
    && npm install \
    && npm run build

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

Node.js のコンテナイメージに、サンプルをコピーして動かすだけのシンプルなコンテナイメージとなります。このイメージを実際に build する際には、コマンドを利用するといいのですが、Visual Studio Code の画面で Dockerfile を右クリック、Build をそのまま実行します。しばらくするとイメージが出来上がります。

作成したコンテナを実行します。

docker run -p 3000:3000 -d sitecoresearchnextjssample

コンテナが起動して、3000 ポートにアクセスするとサンプルのアプリにアクセスすることができます。

docker-compose ファイルの作成

続いて build や起動を手っ取り早くするために、docker-compose.yml ファイルを作成して、docker compose で動作するようにしていきます。

まず、.env の定義にイメージファイルやプロジェクトに関する情報を追加します。

COMPOSE_PROJECT_NAME=search-nextjs
PROJECT_VERSION=0.3.0

NODEJS_PARENT_IMAGE=node:20-bullseye

NEXT_PUBLIC_SEARCH_ENV=
NEXT_PUBLIC_SEARCH_CUSTOMER_KEY=
NEXT_PUBLIC_SEARCH_API_KEY=
NEXT_PUBLIC_SEARCH_PATH=/

続いて、docker-compose.yaml ファイルを以下のように作成します。

services:
  nextsearch:
    image: ${COMPOSE_PROJECT_NAME}:${PROJECT_VERSION}
    platform: linux/amd64
    build:
      context: .
      args:
        PARENT_IMAGE: ${NODEJS_PARENT_IMAGE}
    environment:
      NEXT_PUBLIC_SEARCH_ENV: ${NEXT_PUBLIC_SEARCH_ENV}
      NEXT_PUBLIC_SEARCH_CUSTOMER_KEY: ${NEXT_PUBLIC_SEARCH_CUSTOMER_KEY}
      NEXT_PUBLIC_SEARCH_API_KEY: ${NEXT_PUBLIC_SEARCH_API_KEY}
      NEXT_PUBLIC_SEARCH_PATH=: ${NEXT_PUBLIC_SEARCH_PATH}
    ports:
      - "3000:3000"
    networks:
      - default

最後に Dockerfile を、環境設定ファイルからイメージの情報を取得するように以下のように書き換えます。

ARG PARENT_IMAGE

FROM ${PARENT_IMAGE}

WORKDIR /usr/app
COPY . /usr/app

RUN cd /usr/app \
    && npm install \
    && npm run build

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

これで準備が整いました。docker compose build を実行してイメージを作成、docker compose up -d でコンテナを起動すると、最初のコンテナの起動と同じくアプリにアクセスすることができました。

まとめ

開発中、また vercel に展開する前の動作確認として、Docker を利用することが可能になりました。ローカルでの動作環境を用意しておくことで、動作確認も含めて手軽にできるため、今回はコンテナ化して動作する手順を紹介しました。