Add Docker support and runtime configuration for frontend application

HuanCheng65 · HuanCheng65 · commit 22d22cb7fdd2 · 2025-08-19T21:47:07.000+08:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,59 @@
+name: Build and Push Frontend
+
+on:
+  # 在推送到 main 或 dev 分支时触发
+  push:
+    branches: ["main", "dev"]
+  # 在向 main 或 dev 分支发起 Pull Request 时触发
+  pull_request:
+    branches: ["main", "dev"]
+  # 允许手动触发
+  workflow_dispatch:
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write # 需要写权限来推送镜像到 ghcr.io
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm" # 为 pnpm 设置缓存
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Docker meta for frontend
+        id: meta_frontend
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}/snake-frontend
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: ./frontend # Dockerfile 所在的上下文路径
+          file: ./frontend/Dockerfile # Dockerfile 的具体路径
+          push: ${{ github.event_name == 'push' }} # 仅在 push 事件时推送到 ghcr.io
+          tags: ${{ steps.meta_frontend.outputs.tags }}
+          labels: ${{ steps.meta_frontend.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,18 @@
+# ---- Stage 1: Build Stage ----
+FROM node:22-alpine AS builder
+WORKDIR /app
+RUN npm install -g pnpm@9.12.2
+COPY package.json pnpm-lock.yaml* ./
+RUN pnpm install --frozen-lockfile
+COPY . .
+RUN pnpm build
+
+# ---- Stage 2: Production Stage ----
+FROM nginx:stable-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY entrypoint.sh /usr/local/bin/entrypoint.sh
+RUN chmod +x /usr/local/bin/entrypoint.sh
+COPY --from=builder /app/dist /usr/share/nginx/html
+EXPOSE 80
+ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -0,0 +1,9 @@
+#!/bin/sh
+ROOT_DIR=/usr/share/nginx/html
+VITE_API_URL=${VITE_API_URL:-"http://localhost:8080/api/cheese-auth"}
+VITE_SANDBOX_URL=${VITE_SANDBOX_URL:-"http://localhost:8080/api/sandbox"}
+
+echo "window.runtimeConfig = { VITE_API_URL: '${VITE_API_URL}', VITE_SANDBOX_URL: '${VITE_SANDBOX_URL}' };" > ${ROOT_DIR}/config.js
+echo "Generated ${ROOT_DIR}/config.js with API URL: ${VITE_API_URL}"
+
+exec "$@"
diff --git a/index.html b/index.html
@@ -3,9 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>蛇王争霸 - 中国人民大学信息学院</title>
+    <script src="/config.js"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,28 @@
+server {
+    # 监听 80 端口
+    listen 80;
+
+    # 设置网站的根目录，指向我们从构建阶段复制过来的文件
+    root /usr/share/nginx/html;
+
+    # 默认首页文件
+    index index.html;
+
+    # 核心配置：处理所有请求
+    location / {
+        # try_files 会按顺序尝试查找文件:
+        # 1. $uri: 查找与请求 URI 完全匹配的文件 (例如 /assets/logo.png)
+        # 2. $uri/: 查找与请求 URI 匹配的目录 (例如 /admin/)
+        # 3. /index.html: 如果上面都找不到，就返回根目录下的 index.html 文件
+        #
+        # 这一行是实现前端路由（History模式）的关键。
+        # 它确保了所有未匹配到静态资源的请求都由 Vue 应用来接管处理。
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 可选：为静态资源添加更长的浏览器缓存，提升性能
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+}
diff --git a/public/config.js b/public/config.js
diff --git a/src/runtime-config.d.ts b/src/runtime-config.d.ts
@@ -0,0 +1,15 @@
+// src/runtime-config.d.ts
+
+// 扩展全局的 Window 接口
+declare global {
+  interface Window {
+    // 定义 runtimeConfig 对象的结构和类型
+    runtimeConfig: {
+      VITE_API_URL: string;
+      VITE_SANDBOX_URL: string;
+    };
+  }
+}
+
+// 导出一个空对象以确保该文件被视为一个模块
+export {};
diff --git a/src/services/httpClient.ts b/src/services/httpClient.ts
@@ -1,12 +1,15 @@
 import axios, { AxiosInstance, InternalAxiosRequestConfig } from "axios";
 import router from "../router";
 
-// 基础API URL
-const API_URL =
-  import.meta.env.VITE_API_URL || "http://localhost:8080/api/cheese-auth";
-// 沙盒API URL
-const SANDBOX_URL =
-  import.meta.env.VITE_SANDBOX_URL || "http://localhost:8080/api/sandbox";
+const runtimeConfig = window.runtimeConfig || {
+  VITE_API_URL:
+    import.meta.env.VITE_API_URL || "http://localhost:8080/api/cheese-auth",
+  VITE_SANDBOX_URL:
+    import.meta.env.VITE_SANDBOX_URL || "http://localhost:8080/api/sandbox",
+};
+
+const API_URL = runtimeConfig.VITE_API_URL;
+const SANDBOX_URL = runtimeConfig.VITE_SANDBOX_URL;
 
 // 创建主API客户端实例
 export const apiClient = axios.create({
