当前位置：首页 > 文章列表 > 文章 > 前端 > 使用独立构建对 Nextjs 应用程序进行 Docker 化

使用独立构建对 Nextjs 应用程序进行 Docker 化

来源：dev.to 2024-12-20 10:52:07 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

大家好，我们又见面了啊~本文《使用独立构建对 Nextjs 应用程序进行 Docker 化》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

介绍

docker 近年来因允许将应用程序放置在容器内而受到欢迎。这些容器可以部署到任何环境，并且在所有环境中都以相同的方式工作，无论应用程序运行的平台如何，都提供统一行为。这些容器使用图像，它们是应用程序的副本或压缩快照。通过将它们放置在容器中，它们将完全按原样显示。这是一些人迫切需要的技术之一，而另一些人直到听说它才意识到他们需要它。

就其本身而言，next.js 是最流行的 react 框架。与使用 webpack 或 vite 等捆绑器的任何其他 javascript 应用程序一样，使用项目的编译版本进行生产。这称为构建。构建旨在提供应用程序所需的最少量代码，使其与开发中的功能相同。这确保了 javascript 文件非常轻量级，允许浏览器在尽可能短的时间内获取和解释它们，以呈现用户界面或执行应用程序所需的任何任务。”

next.js 特别提供了一个进一步减小构建大小的版本：独立构建。如果我们使用 docker 为 next.js 应用程序创建映像，我们可以轻松地将我们构建的出色应用程序部署到任何环境，而无需担心兼容性或其他配置。在本文中，我们将了解如何实现它。

包管理器

就我而言，我喜欢使用 pnpm 来减少 node_modules 文件夹的磁盘大小。因此，next.js docker 镜像的示例使用了这个包管理器，但如果您愿意，您可以稍作调整以使用 npm 或 yarn。

next.js 配置

在 next.config.js 文件中，我们必须指定当应用程序编译用于生产时，生成的构建类型将是独立的。为此，我们需要包括以下内容：

/** @type {import('next').nextconfig} */
const nextconfig = {
  output: "standalone"
};

export default nextconfig;

这样，应用程序的输出将是独立类型。

dockerfile

代表我们的 docker 镜像的文件是 dockerfile。通常该文件放置在项目的根目录中。让我们一步一步来创建它。

基础镜像

每个 docker 镜像都从基础镜像开始。在这种情况下，任何运行服务器的 javascript 项目都需要像 node.js 这样的运行时。我们将以与我们的项目兼容的 node.js 版本的 docker 镜像为基础。就我而言，我喜欢使用 alpine 版本的图像，因为它更轻量。但是，我们在构建镜像时必须检查是否存在兼容性问题，否则，我们必须使用“非alpine”版本的镜像。对于此示例，我使用 node:22.6.0-alpine3.19 图像作为基础。

from node:22.6.0-alpine3.19 as base

我们放置一个别名以在图像的不同步骤或阶段回收它。

系统和 pnpm 依赖项

下一阶段是安装依赖项。在这种情况下，只需要一个系统依赖项：libc6-compat。这里提到了原因。

from base as build-deps
run apk add --no-cache libc6-compat

由于 node.js 默认不包含 pnpm，因此需要激活它并设置环境变量，以便缓存已安装的包。

env pnpm_home="/pnpm"
env path="$pnpm_home:$path"

run corepack enable
run corepack prepare pnpm@latest --activate

然后，我们必须设置工作目录，以明确区分系统文件夹和应用程序文件夹。在本例中，我们使用 /app。

workdir /app

现在我们必须复制包含项目依赖信息的文件并安装它们。

copy package.json pnpm-lock.yaml ./

run pnpm install --frozen-lockfile --prefer-frozen-lockfile

--frozen-lockfile 和 --prefer-frozen-lockfile 参数用于遵守 pnpm 锁定文件中指定的版本。

为了完成此阶段，添加了 sharp 库。这是在 next.js 的生产环境中优化图像所必需的。

run pnpm add sharp

整个舞台是这样的：

from base as build-deps
run apk add --no-cache libc6-compat

env pnpm_home="/pnpm"
env path="$pnpm_home:$path"

run corepack enable
run corepack prepare pnpm@latest --activate

workdir /app

copy package.json pnpm-lock.yaml ./

run pnpm install --frozen-lockfile --prefer-frozen-lockfile

run pnpm add sharp

构建应用程序

下一阶段是编译 next.js 应用程序。这是使映像正常工作的关键所在，因为 dockerfile 的其余部分没有任何不同，或者您在任何其他示例中找不到。在此阶段，需要将项目中使用的环境变量作为构建参数传递，并在生成构建之前设置它们。

这是因为，由于应用程序有两个工作时间，即构建时间和运行时间，如果环境变量在运行时不可用，则所有使用它们的静态资源都不会具有它们的值并且该应用程序将无法正常工作。在此示例中，使用了三个环境变量：next_public_backend_url、frontend_url 和 jwt_secret。

from base as builder

arg next_public_backend_url
env next_public_backend_url=$next_public_backend_url

arg frontend_url
env frontend_url=$frontend_url

arg jwt_secret
env jwt_secret=$jwt_secret

然后，pnpm 被激活，工作目录被设置，所有应用程序文件被复制并生成构建。

run corepack enable
run corepack prepare pnpm@latest --activate

workdir /app

copy --from=build-deps /app/node_modules ./node_modules

copy . .

run pnpm build

整个舞台是这样的：

from base as builder

arg next_public_backend_url
env next_public_backend_url=$next_public_backend_url

arg frontend_url
env frontend_url=$frontend_url

arg jwt_secret
env jwt_secret=$jwt_secret

run corepack enable
run corepack prepare pnpm@latest --activate

workdir /app

copy --from=build-deps /app/node_modules ./node_modules

copy . .

run pnpm build

运行应用程序

最后一个阶段是运行应用程序。为此，我们首先设置 node 生产环境：

from base as runner

env node_env=production

根据个人喜好，next.js 遥测被禁用。也就是说，我们基本上不会将应用程序数据发送到 vercel 来通过错误诊断和使用指标来改进 next.js。

env next_telemetry_disabled=1

此外，作为一个好的实践，建议在 docker 镜像中使用非 root 用户。例如，这可以避免容器有权访问主机网络时出现安全漏洞。为此，需要添加一个 nodejs 组和一个 nextjs 用户并分配 .next 文件夹属性。

run addgroup --system --gid 1001 nodejs
run adduser --system --uid 1001 nextjs
run mkdir .next
run chown nextjs:nodejs .next

然后，复制独立构建生成的文件以创建与 next.js 默认构建相同的结构。

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

由于我们创建了 nextjs 用户，我们需要指定这将是要使用的用户。

user nextjs

同样，需要指定容器暴露的端口，以及将使用的节点端口和主机名，由于我们不知道确切的地址，因此主机名将为 0.0.0.0。

expose 3000
env port=3000
env hostname="0.0.0.0"

然后，从构建参数中指定应用程序运行时的环境变量。

arg next_public_backend_url
env next_public_backend_url=$next_public_backend_url

arg frontend_url
env frontend_url=$frontend_url

arg jwt_secret
env jwt_secret=$jwt_secret

可以使用 docker-compose.yml 文件中指定的环境变量，以及运行容器时，但是，在此上下文中的环境变量在构建时和运行时不同是没有意义的.

最后，我们运行服务器。

cmd ["node", "server.js"]

完整文件

完整的 dockerfile 如下所示：

FROM node:22.6.0-alpine3.19 AS base

FROM base AS build-deps
RUN apk add --no-cache libc6-compat

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile

RUN pnpm add sharp

FROM base AS builder

ARG NEXT_PUBLIC_BACKEND_URL
ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL

ARG FRONTEND_URL
ENV FRONTEND_URL=$FRONTEND_URL

ARG JWT_SECRET
ENV JWT_SECRET=$JWT_SECRET

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

WORKDIR /app

COPY --from=build-deps /app/node_modules ./node_modules

COPY . .

RUN pnpm build

FROM base AS runner

ENV NODE_ENV=production

ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
RUN mkdir .next
RUN chown nextjs:nodejs .next

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

USER nextjs

EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

ARG NEXT_PUBLIC_BACKEND_URL
ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL

ARG FRONTEND_URL
ENV FRONTEND_URL=$FRONTEND_URL

ARG JWT_SECRET
ENV JWT_SECRET=$JWT_SECRET

CMD ["node", "server.js"]

您还可以在此要点中找到该文件。