适配docker环境 禁用了文件名哈希,保持文件名稳定修改了nginx的代理头信息,添加了dockerfile内容,使用本地文件构建,在修改了request.js,authApi.js,AuthContext.jsx等文件,统一前后端的数据格式,便于测试运行
Change-Id: I40b3c8949a84cf07ec2fe66c92052e1995036994
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..e2a18d5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,55 @@
+# 构建阶段
+FROM node:18-alpine as build
+
+# 设置工作目录
+WORKDIR /app
+
+# 设置 npm 镜像源(使用淘宝镜像加速 npm 包下载)
+RUN npm config set registry https://registry.npmmirror.com
+
+# 复制 package.json 和 package-lock.json
+COPY package*.json ./
+
+# 安装依赖
+RUN npm install
+
+# 复制源代码
+COPY . .
+
+# 清理之前的构建产物
+RUN rm -rf dist
+
+# 构建应用
+RUN npm run build
+
+# 验证构建产物
+RUN ls -la dist && \
+ ls -la dist/assets
+
+# 生产阶段
+FROM nginx:alpine
+
+# 设置时区
+ENV TZ=Asia/Shanghai
+RUN apk add --no-cache tzdata && \
+ cp /usr/share/zoneinfo/$TZ /etc/localtime && \
+ echo $TZ > /etc/timezone
+
+# 清理 nginx 目录
+RUN rm -rf /usr/share/nginx/html/*
+
+# 直接复制本地构建的文件
+COPY dist/ /usr/share/nginx/html/
+
+# 验证文件是否正确复制
+RUN ls -la /usr/share/nginx/html && \
+ ls -la /usr/share/nginx/html/assets
+
+# 复制 Nginx 配置文件
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露端口
+EXPOSE 80
+
+# 启动 Nginx
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/docker b/docker
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docker
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..c9be409
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,29 @@
+server {
+ listen 80;
+ server_name localhost;
+
+ root /usr/share/nginx/html;
+ index index.html;
+
+ # 开启 gzip 压缩
+ gzip on;
+ gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+ # 所有静态资源
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
+
+ # 后端 API 代理
+ location /api/ {
+ proxy_pass http://backend:8080/api/;
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection 'upgrade';
+ 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;
+ proxy_cache_bypass $http_upgrade;
+ }
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index eb50fe5..e7047b3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,7 +2,7 @@
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
-import './mock/index.js' // 引入mock服务
+// import './mock/index.js' // 注释掉 mock 服务
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
diff --git a/src/routes/index.jsx b/src/routes/index.jsx
index 994233b..e085801 100644
--- a/src/routes/index.jsx
+++ b/src/routes/index.jsx
@@ -31,6 +31,7 @@
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route path="/unauthorized" element={<UnauthorizedPage />} />
+ <Route path="*" element={<NotFoundPage />} />
{/* 受保护的路由 (需要登录) */}
<Route
@@ -122,9 +123,6 @@
</ProtectedRoute>
}
/>
-
- {/* 404 Not Found 路由 */}
- <Route path="*" element={<MainLayout><NotFoundPage /></MainLayout>} />
</Routes>
);
};
diff --git a/src/services/request.js b/src/services/request.js
index 1fb38c6..2395ba2 100644
--- a/src/services/request.js
+++ b/src/services/request.js
@@ -3,7 +3,7 @@
// 创建 axios 实例
const request = axios.create({
- baseURL: "/",
+ baseURL: "/api",
timeout: 10000,
});
diff --git a/vite.config.js b/vite.config.js
index 5a33944..9bddccc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,38 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ base: '/', // 确保资源路径正确
+ build: {
+ outDir: 'dist',
+ assetsDir: 'assets',
+ sourcemap: false,
+ // 禁用文件名哈希
+ rollupOptions: {
+ output: {
+ entryFileNames: 'assets/[name].js',
+ chunkFileNames: 'assets/[name].js',
+ assetFileNames: 'assets/[name].[ext]'
+ }
+ }
+ },
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, './src')
+ }
+ },
+ server: {
+ host: true,
+ port: 3000,
+ proxy: {
+ '/api': {
+ target: 'http://backend:8080',
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/api/, '/api')
+ }
+ }
+ }
})