Next.jsのstand alone buildを利用したdocker imageのbuild

Next.jsのstand alone buildとは

公式

• 要約すると最小限のファイル出力できるよ

これにより、.next/standaloneにフォルダが作成され、node_modulesをインストールすることなく単独でデプロイできるようになります。`

さらに、next startの代わりに使用できる最小限のserver.jsファイルも出力されます。これらのフォルダは手動でstandalone/publicフォルダとstandalone/.next/staticフォルダにコピーすることができ、その後server.jsファイルが自動的にこれらのフォルダを提供します。

Docker image作成

開発で作成するDocker imageは極力軽くしたいため、Next.jsのstand alone buildを実行してbuildする

Dockerfile

monorepoで「client」と「packages/trpc」があると仮定したときのサンプル

解説

1. マルチステージのbuilder側にpackage.jsonをコピーしpackageをインストール
2. コードをコピーしbuildを実行
3. マルチステージのproduction側に「next.config.js」と「public」をコピー
4. build結果の「.next/static」と「.next/standalone/」が最小限必要なフォルダーになるため、コピーする
5. 起動コマンドをnode server.jsにする

Dockerfile

FROM node:18-alpine as builder

WORKDIR /app

COPY package.json yarn.lock ./
COPY client/package.json ./client/package.json
COPY packages/trpc/package.json ./packages/trpc/package.json
RUN yarn install --non-interactive

COPY . .
RUN yarn build && yarn cache clean

FROM node:18-slim as production
ENV NODE_ENV=production
WORKDIR /app

COPY client/next.config.js ./client/
COPY client/public/ ./client/public/
COPY --from=builder /app/client/.next/static ./client/.next/static
COPY --from=builder /app/client/.next/standalone/ ./

CMD ["node", "./client/server.js"]