💭

Next.jsをDockerで動かす

2023/08/27に公開

今後チームで作業することも考慮して開発環境を整備する。第一弾としてDockerファイルに整理する。本番環境ではK8sを使わない想定なのでパフォーマンスの観点やリソースの有効活用という意味でもDockerなどコンテナ仮想は利用しない想定です。しかし開発環境では利用した方が環境整備の時間短縮できるので整備していく。

以下の記事を参考にさせていただきました

最新のDockerイメージは以下を使います

node:18.17-alpine

Dockerfileの作成

先日の記事で作成したアプリをとりあえず動かす目的で必要最低限の記載にする。

FROM node:18.17-alpine
WORKDIR /app/
COPY ./package.json ./
RUN npm install

docker-composeの作成

リッスンするポートは5556にする（特に深い意味はありません)。

services:
  app:
    build:
      context: .
    ports:
      - "5556:5556"
    volumes:
      - .:/app
      - node_modules:/app/node_modules
    command: sh -c "npm run dev -- -p 5556"
volumes:
  node_modules:

ビルドと起動

$ docker build -t next .
$ docker image ls
REPOSITORY               TAG       IMAGE ID       CREATED          SIZE
next                     latest    71dca483cd55   15 minutes ago   750MB

$ docker-compose up

想定通り起動して http://localhost:5556 にアクセスすれば画面が確認できました。本日はDockerでNext.jsが動かせたので目的は達成しました。しかし、イメージファイルが750MBあったり、rootユーザーで実行していたり、npmからstartしていたり、node_modulesはおそらくビルド時にだけ必要だと思いますのでProdで動かす際の知識を勉強して少しずつ設定を固めていきたい。

Dockerfileの作成

docker-composeの作成

ビルドと起動

Discussion