Turborepo + PNPM + Nextで構成されたアプリケーションをFly.ioにデプロイする

前に Turborepo + PNPM + Remixで構成されたアプリケーションをFly.ioにデプロイするという記事を書きました。
今回はその続きというかNextで動かす場合に苦労したのでここに記録を残していきます。

Dockefileを自分で作る必要がある

flyctl launchでNextをビルドするためのDockerfileを生成してくれますが、pnpmだったりturborepoに対応していないので自分で書く必要があります。

standaloneビルドするとよい

// next.config.js
module.exports = {
  output: 'standalone',
}

このように設定しておくことにより、デプロイ(実行時)に必要なファイルのみを .next/standalone ディレクトリに出力されるようになります。 node_modulesとかも必要な文だけしか入らないのでかなり軽くなります。

今回作ったDockerfileはこのようになりました。

# Install dependencies only when needed
FROM node:18-alpine AS base
ARG SCOPE
ENV SCOPE_ENV ${SCOPE}

##
# Setup用
##
FROM base AS setup
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
RUN apk update

# PNPMの環境変数、パスの設定
ENV PNPM_HOME="/root/.local/share/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

# PNPMのインストールとturobrepoのインストール
RUN npm i -g [email protected]
RUN pnpm add turbo -g

##
# prune用
##
FROM setup AS prune
WORKDIR /app
COPY . .

RUN turbo prune --scope=${SCOPE} --docker

###
# install
###
FROM setup AS installer 
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
ENV NODE_ENV production

COPY .gitignore .gitignore
COPY --from=prune /app/out/json/ .
COPY --from=prune /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
COPY --from=prune /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
RUN pnpm install --prod --frozen-lockfile --ignore-scripts

# Build project
COPY --from=prune /app/out/full/ .
RUN pnpm run build --filter=${SCOPE}

###
# 実行環境用のステージ
###
FROM base as runner
WORKDIR /app
ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs

COPY --from=installer /app/apps/${SCOPE}/next.config.js .
COPY --from=installer /app/apps/${SCOPE}/package.json .

COPY --from=installer --chown=nextjs:nodejs /app/apps/${SCOPE}/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/apps/${SCOPE}/.next/static ./apps/${SCOPE}/.next/static
COPY --from=installer --chown=nextjs:nodejs /app/apps/${SCOPE}/public ./apps/${SCOPE}/public

CMD node /app/apps/${SCOPE_ENV}/server.js

ステージについて

ステージ	内容
base	全体のイメージ共通での設定
setup	prune, installerのステージで共通で必要なものを用意するためのステージ
prune	turbo prune用のステージ
installer	パッケージインストール、ビルド
runner	実行環境

こんな感じでマルチステージビルドな構成にしています。これで大体イメージサイズが200MBぐらいなのでいいのかなと。

ビルド変数について

今回は複数nextアプリが存在する可能性もあるので依存する部分をSCOPE という変数で指定することによって再利用性を高めています。

fly deploy --build-arg SCOPE=webapp

みたいにコマンドで指定するか fly.tomlで指定すればいいかと思います。

[build]
  [build.args]
    SCOPE = "webapp"

デバッグについて

毎回flyioにデプロイして確認していると時間がかかるので手元のDockerでずっと検証してました。

$ docker build -f flyio/Dockerfile.next -t flyio/next . --build-arg SCOPE=webapp
$ docker run -it -p 3000:3000 <image id>

こんな感じでローカルでビルドしてブラウザから確認していました。