# ==========================================
# 阶段 1: 构建环境 (Builder)
# ==========================================
# 使用指定的 Node 22.22.0 版本
FROM node:22.22.0-alpine AS builder

# 设置工作目录
WORKDIR /app

# 安装 pnpm
# Alpine 镜像通常没有 pnpm，需要通过 corepack 启用或 npm 全局安装
# Node 22 默认内置 corepack，推荐以下方式启用 pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate

# 复制 package.json 和 pnpm-lock.yaml (利用 Docker 缓存层)
COPY package.json pnpm-lock.yaml ./

# 安装依赖
# --frozen-lockfile 确保安装版本与锁文件严格一致，适合生产环境
RUN pnpm install --frozen-lockfile

# 复制所有源代码
COPY . .

# 执行构建命令 (假设你的构建脚本是 build，输出到 dist 目录)
ARG BUILD_MODE=production
RUN pnpm run build:${BUILD_MODE}

# ==========================================
# 阶段 2: 生产环境 (Production)
# ==========================================
# 使用轻量级 Nginx 镜像
FROM nginx:alpine AS production

# 设置工作目录
WORKDIR /usr/share/nginx/html

# 从 builder 阶段复制构建好的 dist 目录内容到 Nginx 静态目录
# 注意：Vue 3 + Vite 默认输出到 dist/，如果是 webpack 可能是 dist/ 或其他
COPY --from=builder /app/dist .

# 复制自定义的 Nginx 配置文件 (可选，但推荐用于解决 Vue Router History 模式刷新 404 问题)
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 8052

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
