# 阶段 1: 构建 (Build Stage) FROM node:20-alpine as builder WORKDIR /app # 复制依赖定义文件 COPY package.json ./ # 安装依赖 # 注意:如果您的项目中生成了 package-lock.json,最好也复制进去以锁定版本 RUN npm install # 复制项目源代码 COPY . . # 接收构建参数 API_KEY # 因为 vite.config.ts 中配置了 define: { 'process.env.API_KEY': ... } # 所以必须在 npm run build 时提供这个变量,否则构建出的代码中 key 会是 undefined ARG API_KEY ENV API_KEY=$API_KEY # 执行构建 RUN npm run build # 阶段 2: 生产环境服务 (Production Stage) FROM nginx:alpine # 从构建阶段复制构建产物 (dist 目录) 到 Nginx 默认目录 COPY --from=builder /app/dist /usr/share/nginx/html # 配置 Nginx 以支持 SPA (单页应用) 路由 # 这行命令修改默认配置:当找不到文件时(404),重定向回 index.html,交给 React Router 处理 RUN sed -i 's/location \/ {/location \/ { try_files $uri $uri\/ \/index.html;/' /etc/nginx/conf.d/default.conf # 暴露 80 端口 EXPOSE 80 # 启动 Nginx CMD ["nginx", "-g", "daemon off;"]