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

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

Twitter ツイート Hatena Bookmark ブックマーク

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

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

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

standaloneビルドするとよい

1
2
3
4
// next.config.js
module.exports = {
  output: 'standalone',
}

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# 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 という変数で指定することによって再利用性を高めています。

1
fly deploy --build-arg SCOPE=webapp

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

1
2
3
[build]
  [build.args]
    SCOPE = "webapp"

デバッグについて

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

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

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

参考

comments powered by Disqus
Built with Hugo
テーマ StackJimmy によって設計されています。