Next.js Docker Images

Docker是一组平台即服务产品，可以创建用于构建、部署和测试应用程序的隔离虚拟化环境。在本教程中，我们将学习如何创建一个 Next.js 应用程序的镜像。Next.js是一个帮助构建服务器端渲染Web应用程序的React框架。

什么是 Docker 镜像？

为了运行这些应用程序，我们首先需要创建当前应用程序状态的一个镜像。镜像有时可以称为我们项目的快照。镜像是只读的，并包含了包含源代码、库、依赖项、工具和其他文件的文件，这些文件是应用程序运行所需的。

Docker镜像是一个只读模板，包含了一组用于在Docker平台上创建可以运行的容器的指令。

用一个编程类比来说，如果镜像是一个类，那么容器就是类的一个实例。容器是您使用Docker的原因。它是一个轻量级、便携的环境，用于运行我们的应用程序。

容器是Docker镜像的运行实例。容器运行实际的应用程序。

初始化NextJs Docker镜像的步骤： 按照以下步骤初始化NextJs Docker镜像:

步骤1: 初始化NextJs项目

进入您要初始化项目的目录，并使用npx下载所有所需文件。

$ npx create-next-app 

步骤2： 在您的代码编辑器上打开应用程序。我正在使用VS Code，并且在其上打开我的NextJs项目的命令将是：

$ cd my-app && code .

步骤3： 在你的Next.js应用的根目录中创建一个Dockerfile。

Dockerfile 是一个文本文档，其中包含用户可以在命令行上调用的所有命令以组装镜像。在这一步中，我们将创建两个dockerfiles。

• Dockerfile：用于生产环境的Dockerfile，或者你可以将其命名为prod.Dockerfile
• dev.Dockerfile：用于开发环境的Dockerfile

生产环境指的是应用部署供使用，开发环境指的是应用正在开发中。

这是用于生产应用的 Dockerfile：

# Dockerfile for production
# 仅在需要时安装依赖
FROM node:16-alpine AS deps

# 检查 https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926
ef50a31506c3#nodealpine 了解为什么可能需要 libc6-compat。  
RUN apk add –no-cache libc6-compat

WORKDIR /app

# 基于首选的软件包管理器安装依赖
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 yarn global add pnpm && pnpm i;   
else echo “Lockfile not found.” && exit 1;   
fi

# 仅在需要时重新构建源代码
FROM node:16-alpine AS builder  
WORKDIR /app  
COPY –from=deps /app/node_modules ./node_modules  
COPY . .

# Next.js 收集有关一般使用情况的完全匿名的遥测数据。
# 在这里了解更多：https://nextjs.org/telemetry
# 如果您想在构建过程中禁用遥测，请取消下面一行的注释。
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# 如果使用 npm，请取消上面的注释，并使用下面的命令
# RUN npm run build

# 生成镜像，复制所有文件并运行 next
FROM node:16-alpine AS runner  
WORKDIR /app

ENV NODE_ENV production  
# 如果您想在运行时禁用遥测，请取消下面一行的注释
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup –system –gid 1001 nodejs  
RUN adduser –system –uid 1001 nextjs

COPY –from=builder /app/public ./public

# 自动利用输出跟踪以减小镜像大小
# 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

CMD [“node”, “server.js”]

您可以在项目的根目录中创建一个名为 “Dockerfile” 的文件，并将这些指令粘贴到其中。

这是用于开发应用的 Dockerfile：

# dev.Dockerfile for development

FROM node:18-alpine

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 yarn global add pnpm && pnpm i; \
    else echo "Lockfile not found." && exit 1; \
    fi

COPY . .

CMD yarn dev

步骤4： 在 next.config.js 中进行修改。要为现有项目添加对 Docker 的支持，只需将 Dockerfile 复制到项目的根目录，并将以下内容添加到 next.config.js 文件中：

// next.config.js
module.exports = {
    // ... rest of the configuration.
      output: 'standalone',
}

步骤5： 构建 Dockerfile 和 dev.Dockerfile

$ docker build -t nextjs-docker .

$ docker build -t nextjs-docker-dev -f dev.Dockerfile .

通常要花时间来第一次建立图像。

步骤6： 运行你的应用程序。根据你在Dockerfile上给出的标签，你现在可以使用 docker run 命令运行它们。

# For production
$ docker run -p 3000:3000 nextjs-docker

# For development, files wont be synced until step 8
$ docker run -p 3000:3000 nextjs-docker-dev

-p 标志将容器的端口暴露给 docker 外部的服务。

步骤7： 验证我们的应用程序是否正在运行。

步骤8： 允许文件更改检测：

目前一切看起来都很好，但我们还没有解决一个小问题。我们知道图像是只读的，任何在构建文件后进行的文件更改将不会在本地主机上反映出来。为了解决这个问题，我们需要使用绑定挂载(bind mount)。通过绑定挂载，我们可以控制主机上的确切挂载点。我们可以使用它来保存数据，但它通常用于向容器提供额外的数据。

$ docker run -p 3000:3000 -v $(pwd):/app  nextjs-docker-dev

-v $(pwd):/app 指定应用程序的挂载点，以便可以检测文件的更改。

尝试对您的文件进行一些更改，并查看是否对更改进行了跟踪。这就是关于创建NextJs Docker Images的所有内容。在geeks for geeks上阅读更多关于NextJs的内容。