nextjs的standalone模式

更新于 阅读 877

由于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依赖的过程。

标签:standalonenextjsdocker