前に 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>
|
こんな感じでローカルでビルドしてブラウザから確認していました。
参考
amazon.co.jp