これまで作成してきたサンプルのアプリを Docker で動作するように設定をしていきます。特に凝った話ではなく、一般的な Docker の手順を紹介するだけでsう。
Dockerfile の作成
まずはベースになるコンテナイメージを作成できるように、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 をそのまま実行します。しばらくするとイメージが出来上がります。
作成したコンテナを実行します。
PowerShell
docker run -p 3000:3000 -d sitecoresearchnextjssampleコンテナが起動して、3000 ポートにアクセスするとサンプルのアプリにアクセスすることができます。
docker-compose ファイルの作成
続いて build や起動を手っ取り早くするために、docker-compose.yml ファイルを作成して、docker compose で動作するようにしていきます。
まず、.env の定義にイメージファイルやプロジェクトに関する情報を追加します。
Plain Text
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 ファイルを以下のように作成します。
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 を、環境設定ファイルからイメージの情報を取得するように以下のように書き換えます。
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 を利用することが可能になりました。ローカルでの動作環境を用意しておくことで、動作確認も含めて手軽にできるため、今回はコンテナ化して動作する手順を紹介しました。