saas

Docker 部署 React 与 Next.js：开发环境到生产上线的完整流程

详解如何用 Docker 容器化 React SPA 和 Next.js 应用：开发环境热重载配置、Nginx 静态文件托管、Next.js standalone 输出优化、多阶段构建减小镜像、docker-compose 编排全栈部署。

Leeting Yan 2025-11-22 1 分钟阅读 463 字

将 React SPA 和 Next.js 应用 Docker 化是生产部署的标准做法：它保证开发、测试、生产环境完全一致，支持一键部署到任何支持 Docker 的服务器。本文覆盖从开发热重载到生产 Nginx 反向代理的完整配置。

一、React SPA（Vite / CRA）的 Docker 化

1.1 Dockerfile

# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段：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;"]

1.2 Nginx 配置

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # SPA 路由回退
    }

    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

1.3 docker-compose.yml

version: '3.8'
services:
  web:
    build: .
    ports:
      - "3000:80"

二、Next.js 的 Docker 化

2.1 next.config.js

module.exports = {
  output: 'standalone',
};

2.2 Dockerfile

# 依赖安装
FROM node:20-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci

# 构建
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# 运行
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
EXPOSE 3000
ENV PORT 3000

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
CMD ["node", "server.js"]

2.3 带数据库的 docker-compose.yml

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgres://postgres:${DB_PASSWORD}@db:5432/myapp
    depends_on:
      - db

  db:
    image: postgres:15-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}

volumes:
  postgres_data:

三、开发 vs 生产配置

维度	开发	生产
构建命令	`next dev`	`next build`
热重载	✅ 开启	❌ 关闭
源码映射	✅ 开启	❌ 关闭
体积	大（含 dev deps）	小（standalone）
Nginx	不需要	✅ 推荐
HTTPS	不需要	✅ 必须

探索更多技术文章

浏览归档，发现更多关于系统设计、工具链和工程实践的内容。

全部文章返回首页