Docker本地部署SSR前端项目实战指南

yqzl/
├── app/                  # 应用主入口 (App Router)
│   ├── api/              # 后端 API 接口定义
│   ├── auth/             # 认证相关页面
│   ├── components/       # 公共组件 (Sidebar, ConditionalLayout 等)
│   ├── dashboard/        # 仪表盘页面
│   ├── documents/        # 文档管理模块
│   └── lib/              # 核心工具库 (如 mysql 数据库连接)
├── public/               # 静态资源
├── types/                # TypeScript 类型定义
├── Dockerfile            # Docker 构建描述文件
├── docker-compose.yml    # 容器编排配置
├── next.config.ts        # Next.js 配置文件
└── .env                  # 环境变量 (敏感信息)

# 1. 基础镜像
FROM node:20-alpine AS base
RUN npm install -g pnpm

# 2. 依赖安装阶段
FROM base AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# 3. 编译构建阶段
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
# 提示：如果 build 报错，记得在 next.config.ts 中暂时关闭 ESLint 检查
RUN pnpm build

# 4. 运行阶段
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
# 关键配置：允许从外部访问容器内的 3000 端口
ENV HOSTNAME "0.0.0.0"

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["pnpm", "start"]

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: yqzl-app
    ports:
      - "3000:3000"
    env_file:
      - .env
    environment:
      # 这里重写 MYSQL_HOST，使其指向宿主机
      # 在 Windows/Mac 的 Docker Desktop 中，host.docker.internal 指向宿主机
      - MYSQL_HOST=host.docker.internal
    extra_hosts:
      - "host.docker.internal:host-gateway"
    restart: always

networks:
  default:
    name: yqzl-network

const nextConfig: NextConfig = {
  // ...
  eslint: {
    // 忽略构建时的 ESLint 错误，确保能够生成镜像
    ignoreDuringBuilds: true
  },
  typescript: {
    ignoreBuildErrors: true
  }
};