0Pricing
React Academy · 课时

将 React/Next.js 应用容器化

为 Next.js 应用编写多阶段 Dockerfile，并使用 Docker Compose 在本地运行。

将 React/Next.js 应用容器化 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

为什么使用 Docker

Docker 容器会将应用及其依赖打包在一起，确保应用在开发、预发布和生产环境中的行为一致。同一个镜像可以在任何地方运行。

用于基础 React SPA 的 Dockerfile

两阶段构建：使用 Node.js 进行构建，使用 Nginx 提供静态构建产物。

# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

SPA 路由的 Nginx 配置

配置 Nginx 为所有路由提供 index.html（支持客户端路由）。

# nginx.conf
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html; # SPA routing
  }

  location ~* \.(js|css|png|jpg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Next.js 独立模式 Dockerfile

Next.js 12+ 支持 output: 'standalone'，它只会复制所需文件，从而生成精简的生产镜像。

// next.config.js
module.exports = { output: 'standalone' };

# Dockerfile (Next.js standalone)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

.dockerignore

从 Docker 构建上下文中排除不必要的文件，以加快构建速度并减小镜像大小。

node_modules
.next
dist
.env*
.git
README.md
*.test.ts

构建与运行

构建镜像并在本地运行。

# Build:
docker build -t my-next-app .

# Run:
docker run -p 3000:3000 -e DATABASE_URL=postgres://... my-next-app

# Check size:
docker images my-next-app

用于本地开发的 Docker Compose

使用 Docker Compose 通过一条命令让应用与其依赖项（数据库、Redis）一起运行。

# docker-compose.yml
services:
  web:
    build: .
    ports: ['3000:3000']
    environment:
      DATABASE_URL: postgresql://postgres:password@db:5432/myapp
    depends_on: [db]
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

健康检查

在 Dockerfile 中添加健康检查，以便编排器知道容器何时已准备就绪。

HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost:3000/api/health || exit 1

运行时环境变量

在 docker run 时传入环境变量，或通过 --env-file 传入。切勿将密钥打包进镜像。

docker run -p 3000:3000 \
  --env-file .env.production \
  my-next-app

多平台构建

使用 Docker Buildx 为多种 CPU 架构构建镜像（M1 Mac 和云虚拟机使用 ARM64，大多数服务器使用 AMD64）。

docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -t myregistry/my-next-app:latest \
  --push .

快速检查

对 React/Next.js 应用使用多阶段 Docker 构建有什么好处？

回顾

使用多阶段 Dockerfile：使用 Node.js 构建，使用 Nginx 或 node:alpine 提供服务。在 Next.js 配置中添加 output: 'standalone' 以生成精简镜像。在本地开发中使用 Docker Compose，在运行时通过环境变量传入密钥，并使用 Buildx 构建多平台镜像，以兼容 ARM 和 AMD64。

常见问题解答

「将 React/Next.js 应用容器化」课时是免费的吗？

是的 — 「将 React/Next.js 应用容器化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「将 React/Next.js 应用容器化」这节课中我会学到什么？

为 Next.js 应用编写多阶段 Dockerfile，并使用 Docker Compose 在本地运行。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「将 React/Next.js 应用容器化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 部署到 Vercel：零配置与预览 URL
  2. 在 AWS S3 与 CloudFront 上托管 React SPA
  3. 将 React/Next.js 应用容器化
  4. React 的 GitHub Actions CI/CD
← 返回 React Academy