如何编写适配React JS、Next.js npm项目且可配置.npmrc的精简可用Dockerfile

原有Dockerfile的核心问题 #

• 敏感认证token硬编码在Dockerfile中，存在严重泄露风险，任何能拿到镜像的人都可以读取你的npm权限token
• 生产环境配置了NODE_ENV=production但使用开发模式启动命令，会导致不必要的性能损耗和调试信息泄露
• 将.npmrc写入用户根目录，不同运行环境的用户差异可能导致配置读取失败
• 多阶段构建存在冗余COPY逻辑，可进一步精简缩小镜像体积

精简可用的优化版Dockerfile #

FROM node:lts-alpine AS base
WORKDIR /emercore-arg-manager
# 声明构建参数，token不会留存到最终生产镜像
ARG GITHUB_NPM_TOKEN
ARG NPMJS_TOKEN

# 依赖安装阶段
FROM base AS deps
COPY package.json yarn.lock ./
# 临时生成.npmrc，安装完成后直接删除避免token泄露
RUN echo "@lala-lalal:registry=https://npm.pkg.github.com/" >> .npmrc \
    && echo "//npm.pkg.github.com/:_authToken=${GITHUB_NPM_TOKEN}" >> .npmrc \
    && echo "//registry.npmjs.org/:_authToken=${NPMJS_TOKEN}" >> .npmrc \
    && yarn install --frozen-lockfile \
    && rm .npmrc

# 构建阶段
FROM base AS builder
COPY --from=deps /emercore-arg-manager/node_modules ./node_modules
COPY . .
RUN yarn build

# 生产运行阶段
FROM base AS runner
ENV NODE_ENV production
# 仅复制运行必要文件，最小化镜像体积
# 开启Next.js standalone模式（12.2+支持，需在next.config.js添加output: 'standalone'）用以下配置
COPY --from=builder /emercore-arg-manager/public ./public
COPY --from=builder /emercore-arg-manager/.next/standalone ./
COPY --from=builder /emercore-arg-manager/.next/static ./.next/static

# 未开启standalone模式请替换为以下配置
# COPY --from=builder /emercore-arg-manager/public ./public
# COPY --from=builder /emercore-arg-manager/.next ./.next
# COPY --from=builder /emercore-arg-manager/node_modules ./node_modules
# COPY --from=builder /emercore-arg-manager/package.json ./package.json

EXPOSE 3000
# 若你的start:dev为自定义生产启动命令可保留，标准Next.js生产环境建议替换为 ["node", "server.js"] 或 ["yarn", "start"]
CMD ["yarn", "start:dev"]

构建使用说明 #

执行构建命令时通过构建参数传入token，不要修改Dockerfile写入固定token：

docker build --build-arg GITHUB_NPM_TOKEN=你的GitHub npm权限token --build-arg NPMJS_TOKEN=你的npmjs权限token -t 镜像名称 .

额外优化建议 #

• 开启Next.js的standalone输出模式后，最终镜像体积可从数百M缩小到几十M，大幅降低分发和部署成本
• 如果你的项目没有特殊需要，建议把生产启动命令替换为标准生产启动脚本，避免开发模式的额外开销

内容的提问来源于stack exchange，提问作者jlemosmusi