nextjs的standalone模式

这篇文章发表于 阅读 2

由于node_modules日益增大的体积,电脑磁盘的压力与来越大,未来节约空间,在日常开发中慢慢切换为使用pnpm;

pnpm有一个全局的store,项目中的node_modules/.pnpm使用硬连接的方式指向全局store。这篇新一代包管理工具 pnpm 使用心得可以了解pnpm。

本文主要介绍在nextjs在docker中使用pnpm,官网的Dockerfile文件

FROM node:18-alpine AS base # Install dependencies only when needed FROM base AS deps # 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 WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi # Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. # ENV NEXT_TELEMETRY_DISABLED 1 RUN \ if [ -f yarn.lock ]; then yarn run build; \ elif [ -f package-lock.json ]; then npm run build; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ else echo "Lockfile not found." && exit 1; \ fi # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. # ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./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 --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 # set hostname to localhost ENV HOSTNAME "0.0.0.0" # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output CMD ["node", "server.js"]

依赖安装

使用pnpm时,通过判断pnpm-lock.yaml是否存在来执行corepack enable pnpm && pnpm i --frozen-lockfile

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi

打包

打包是将上一阶段安装的依赖复制过来

FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN \ if [ -f yarn.lock ]; then yarn run build; \ elif [ -f package-lock.json ]; then npm run build; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ else echo "Lockfile not found." && exit 1; \ fi

上面复制node_modules时,由于pnpm使用符号连接,Dockerfile中的COPY命令会复制软连接指向的文件,而不是保留软连接,这样最后得到的就是实际文件。如果软连接指向的文件在当前构建上下文之外时,COPY就不能如期复制需要的文件。

由于nextjs运行时只需要运行时的依赖就行,但是直接复制node_modules会携带构建时的依赖,无疑增大了镜像的体积。

所以nextjs提供了standalone模式来更好的解决这个问题。

standalone模式介绍

开启standalone模式,next.config.js:

/** @type {import('next').NextConfig} */ module.exports = { output: "standalone", };

构建后.next结构如下,其中standalone目录中包含运行时需要的node_modules,同时还包含一个.next目录。 其中node_modules中包含运行时需要的所有的依赖包,并且是文件的形式,不是链接。 //file.vwood.xyz/2024/02/22/upload_a8wewsjfbtp82706xvs7dc8nzkbsgud6.png

最后镜像真正需要的复制的的文件如下:

COPY --from=builder /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

注意:运行时通过node server.js命令,因为生成的node_modules中不包含.bin目录,所以没法通过pnpm run start启动(可以通过node_modules/.bin和依赖命令原理了解.bin的作用)。

最后

以上就是本次通过docker中使用pnpm安装nextjs依赖的过程。