# ====================== 第一阶段：构建 ======================
# 用 Node 镜像把 Vue 源码打包成静态文件
FROM node:20-alpine AS builder

WORKDIR /app

# 先只复制依赖清单并安装依赖：这样改业务代码时不会重新安装依赖，能复用缓存
COPY package*.json ./
RUN npm install --registry=https://registry.npmmirror.com

# 再复制全部源码并打包（Vite / Vue CLI 默认产物目录都是 dist）
COPY . .
RUN npm run build


# ====================== 第二阶段：运行 ======================
# 只保留打包结果，用体积小的 Nginx 托管，镜像里不含 node_modules
FROM nginx:1.27-alpine

LABEL maintainer="student-system" description="学生管理系统 - Vue 前端"

# 后端接口地址（nginx.conf.template 里会用到这两个变量做反向代理）
ENV BACKEND_HOST=fastapi \
    BACKEND_PORT=8004

# 删除 nginx 默认欢迎页
RUN rm -rf /usr/share/nginx/html/*

# nginx 官方镜像会自动把 /etc/nginx/templates/*.template 渲染成 /etc/nginx/conf.d/*.conf
COPY nginx.conf.template /etc/nginx/templates/default.conf.template

# 从构建阶段拷贝打包好的静态文件
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
