Nextjs(custom server)をDocker化する

前提

• Nextjs(custom server)プロジェクトが作成されている

やりたいこと

Nextjs(custom server)をDocker化してデプロイできる状態にします。

手順

Dockerfile作成

custom serverのビルドは2つのassetで出来ています。

• dist：nodejs×expressのビルドファイル
• .next：nextjsのビルドファイル

こちらを両方ともビルドしつつnodejsからnextjsを起動できるようにします。

Dockerfile

#### ビルドステージ #######################################
FROM node:20-alpine3.19 as builder
WORKDIR /work
# 依存パッケージをインストール
COPY package*.json ./
RUN npm ci
# ビルド
COPY . ./
RUN npm run build
##########################################################

#### 実行用イメージの作成 ##################################
FROM node:20-alpine3.19  as runner
WORKDIR /work
EXPOSE 8080
# 本番環境用のパッケージをインストール
COPY package*.json ./
RUN npm ci && npm cache clean --force
##########################################################

#### ビルド結果コピー #####################################
COPY --from=builder /work/dist ./dist
COPY --from=builder /work/tsconfig.build.json ./tsconfig.build.json
COPY --from=builder /work/tsconfig.json ./tsconfig.json
COPY --from=builder /work/public ./public
COPY --from=builder /work/.next ./.next
RUN chmod 777 tsconfig.build.json
RUN chmod 777 tsconfig.json
##########################################################

#### 起動 ################################################
CMD ["npm", "run", "start"]
##########################################################

#### コマンド #############################################
# docker build ./ -t nextjs
# docker run -e DATABASE_URL=**** -p 8080:8080 nextjs
##########################################################

package.json

  "scripts": {
    "dev": "ts-node --project tsconfig.build.json server/index.ts",
    "build:server": "tsc --project tsconfig.build.json",
    "build:next": "next build",
    "build": "npm run build:server && npm run build:next",
    "local": "NODE_ENV=development ts-node --project tsconfig.build.json dist/index.js",
    "start": "NODE_ENV=production ts-node --project tsconfig.build.json dist/index.js",
    "lint": "next lint",
    "drizzle:generate": "drizzle-kit generate --config=./drizzle.config.ts",
    "drizzle:push": "drizzle-kit push --config=./drizzle.config.ts",
    "drizzle:introspect": "drizzle-kit introspect --config=./drizzle.config.ts",
    "codegen": "graphql-codegen --config codegen.ts"
  },

以下コマンドで起動
※-eは環境変数（postgresqlの接続文字列）

docker build ./ -t nextjs
docker run -e DATABASE_URL=**** -p 8080:8080 nextjs

参考

https://zenn.dev/webshoten/articles/103b69650b007d

https://zenn.dev/webshoten/articles/cf32f5aa915964

リポジトリ

リポジトリ
https://github.com/webshoten/nextjs_customserver_graphql