如何使用 Docker 自动化部署的 NextJS 镜像大小优化

这篇文章我们将以官方的配置文件作为基础二次修改，将应用的构建过程放在当前系统环境来完成，最后将产物打包成 Docker 镜像，以实现大小优化。

修改配置

想着之前自己部署 NuxtJS 的时候发现它在生产环境下最终运行的是一个 server.mjs 文件，这意味着我或许并不需要安装一大堆 node_modules 依赖，然后再执行 pnpm build && pnpm start 的方式来启动服务。这些最终构建好的代码，小到不足 50MB。

那么 NextJS 可以吗，简单搜索看了下，它是可以做到的。我是从它们官方提供的 Dockerfile 里面找到的这个设置项 output，比较隐蔽。

Next.js can automatically create a standalone folder that copies only the necessary files for a production deployment including select files in node_modules.

To leverage this automatic copying you can enable it in your next.config.js:

module.exports = {
  output: "standalone",
}

修改成这种模式后，意味着项目生产环境的启动方式不再是 pnpm start 了，继续这样操作的时候 NextJS 的命令行工具也会对此进行提示。

"next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead.

旧版 Dockerfile

那么在此之前我是怎么做的呢，这是项目之前的 Dockerfile，可以看到构建、运行应用的过程均在里面完成（并非阶段构建），也因此导致最后的镜像略大。

FROM node:20.15-alpine AS runner
# 定义一个名为 ENV 的参数，默认值为 dev
ARG BUILD_ENV=prod
# Create app directory
WORKDIR /app
RUN addgroup --system --gid 941 nodejs
RUN adduser --system --uid 941 nextjs
COPY . ./
WORKDIR ./
# 如果 BUILD_ENV 为 dev，则复制 .env.dev 到 .env.local
RUN if [ "$BUILD_ENV" = "dev" ]; then cp .env.dev .env.local; fi
RUN chmod 0777 .
RUN npx --yes pnpm install
RUN npx pnpm build
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["npm", "start"]

调整后的 Dockerfile

考虑到我司已经在使用 CircleCI 负责构建应用，K8S 只负责打包并运行构建结果即可，我根据官方的 Dockerfile 最终整理出了一份自己的，供各位参考：

FROM node:20.15-alpine AS runner
ENV NODE_ENV production
# Create app directory
WORKDIR /app
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY public /app/public
# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --chown=nextjs:nodejs .next/standalone ./
COPY --chown=nextjs:nodejs .next/static .next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["ls", "-l"]
# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

这份 Dockerfile 相较于前面的版本，他多出了一个复制 static（位于项目内 .next/static）和 public（位于项目内 /public）文件的步骤，据官方描述说是这些文件应由 CDN 处理，但实际情况我们用的 CDN 属于融合 CDN（不知道是不是这么说，类似 CloudFlare 那种自动缓存和回源的），因此不需要额外处理单独托管的静态文件。

因为没有在 Dockerfile 里面安装依赖和构建应用了，因此需要在当前的系统环境下，已经通过 pnpm build 完成 NextJS 的构建过程。

使用 Jenkins 或其他方式

我自己的服务器并没有强大的资源和性能，只有一个机器跑多个服务的使用场景。如果改用传统 Jenkins + SSH + PM2 的部署方式，也是一样轻松了不少，以往需要在运行机器上执行极其缓慢的 pnpm build 也将提前在 Jenkins 机器上完成。通过 SCP 的方式传输构建产物，到运行机器上只需替换掉对应的资源，重启 PM2 就能完成，这里就不再具体提供实现过程了，有需要建议自行尝试摸索。

本文作者：Paul

如何使用 Docker 自动化部署的 NextJS 镜像大小优化

修改配置

旧版 Dockerfile

调整后的 Dockerfile

使用 Jenkins 或其他方式

如何利用 Termux 让安卓手机成为专属家庭服务器

如何快速切换 caddy 代理服务器

评论列表 (0条)：

延伸阅读: