后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Docker 部署的 Next.js 应用程序 - 有意义吗？
大家好，我是 Francesco Ciulla，我使用 Docker 大约 10 年，使用 Next.js 5 年以上。
在本文中，我想向您展示如何将 Next.js 应用程序 docker 化，然后我会给出一些注意事项。
如果您更喜欢视频版本：
所有代码均可在GitHub上免费获取（链接见视频描述）。
创建 Next.js 应用
要创建 Next 应用程序，请打开终端，导航到所需的任何文件夹，然后输入：
npx create-next-app@latest nextdocker
并使用以下选项创建您的应用程序
然后，您可以打开包含所需 IDE 的文件夹。
运行npm run dev以运行您的 Next.js 应用程序。
如果你访问localhost:3000，你会看到 Next.js 应用程序正在运行。
将 Next.js 应用 Docker 化
现在，我们可以将 Next.js 应用程序 docker 化。
打开所调用的文件next.config.js并将内容替换为以下内容：
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'standalone'
}
module.exports = nextConfig
.dockerignore
创建一个名为的文件.dockerignore并添加以下内容：
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git
这是为了避免将node_modules文件夹复制到 Docker 镜像。
如果您需要解释，请访问此处
Dockerfile
在项目的根目录下，创建一个名为的文件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 yarn global add 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 yarn build
# If using npm comment out above and use below instead
# RUN npm run build
# 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"]
如果您需要解释，请访问此处
Docker compose
创建一个名为的文件docker-compose.yml并添加以下内容：
version: '3.9'
services:
nextapp:
container_name: nextapp
image: nextapp
build: .
ports:
- "3000:3000"
如果您需要解释，请访问此处
构建 Docker 镜像并运行服务
构建 Docker 镜像：
docker compose build
然后运行服务
docker compose up
你应该会看到类似这样的内容
如果你访问，localhost:3000你会看到 Next.js 应用程序正在运行（但这次使用 Docker）
Livecycle
作为最后的测试，我想尝试使用 Livecycle 来部署该应用程序。
您可以在 Docker Desktop 上下载 LiveCycle 扩展
当您的应用程序在本地运行时，您只需使用 Docker Desktop 即可启动它。
超级有效！
注意事项：
- Docker 是一种可以在任何应用程序上运行的技术，当然也包括 Next.js。
- Next.js 有一种超酷的方式来部署应用程序，让 Docker 几乎毫无用处。
- 在 Docker 容器中运行 Next.js 可以提供更好的安全性和可靠性、更快、更轻松的部署程序以及更简单的应用程序管理。
- 如果您已经运行了多个 Docker 容器，则添加新容器比使用 Next.js 部署程序（Vercel）实现完整的 DevOps 控制更容易。
- 如果您只有一个 Next.js 应用程序，我建议使用 Next.js 部署程序（Vercel）。
那么，你需要将 Docker 与 Next.js 一起使用吗？通常不需要，但如果你有多个服务在运行（并且使用了像 Livecycle 这样的工具），那么 Docker 就变得有意义了。
这让我们不禁思考 Docker 的强大之处。Docker 并不关心你使用什么技术，它就是能用。有了 Docker，你可以部署任何应用程序，这真是超级强大。
感谢 Vercel 让 Next.js 应用程序部署如此简单，但我认为 Docker 仍然是一个很棒的工具。
如果您更喜欢视频版本：
所有代码均可在GitHub上免费获取（链接在视频描述中）。
如果您有任何意见或疑问，请在下面留言
再见
文章来源：https://dev.to/francescoxx/wtfnextjs-app-deployed-with-docker-4h3m