添加docker构建配置

SmyWorkCollect-Frontend/.env.local

@@ -1 +1,4 @@
-REACT_APP_API_URL=http://127.0.0.1:5000/api
+REACT_APP_API_URL=/api
+# 保持开发环境通过 package.json 的 proxy 转发到后端
+DANGEROUSLY_DISABLE_HOST_CHECK=true
+WDS_SOCKET_HOST=localhost

SmyWorkCollect-Frontend/Dockerfile

@@ -0,0 +1,29 @@
+# 前端构建阶段
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+# 复制 package 文件
+COPY package*.json ./
+
+# 安装依赖
+RUN npm install
+
+# 复制源代码
+COPY . .
+
+# 构建前端
+RUN npm run build
+
+# Nginx 运行阶段
+FROM nginx:alpine
+
+# 复制构建产物到 nginx
+COPY --from=builder /app/build /usr/share/nginx/html
+
+# 复制 nginx 配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

SmyWorkCollect-Frontend/nginx.conf

@@ -0,0 +1,33 @@
+server {
+    listen 80;
+    server_name localhost;
+    
+    # 前端静态文件
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # 代理后端 API 请求
+    location /api/ {
+        proxy_pass http://backend:5000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # 大文件上传配置
+        client_max_body_size 5000M;
+        proxy_connect_timeout 600;
+        proxy_send_timeout 600;
+        proxy_read_timeout 600;
+        send_timeout 600;
+    }
+    
+    # 错误页面
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

SmyWorkCollect-Frontend/package.json

@@ -6,11 +6,11 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "axios": "^1.4.0",
     "react-router-dom": "^6.8.0",
+    "react-scripts": "5.0.1",
     "styled-components": "^5.3.9",
     "web-vitals": "^2.1.4"
   },

SmyWorkCollect-Frontend/start_frontend.bat

@@ -1,5 +1,5 @@
 @echo off
 echo 正在启动树萌芽の作品集前端...
-npm start
+npm run dev
 pause
 npm install