diff --git a/web/group-site/README.md b/web/group-site/README.md new file mode 100644 index 0000000..28b4b0a --- /dev/null +++ b/web/group-site/README.md @@ -0,0 +1,202 @@ +# 科研课题组展示网站 + +## 📍 访问地址 + +``` +https://amiap.hzau.edu.cn/group/ +``` + +## 🎨 Vue 项目配置（重要！） + +### 1. Vue Router 配置 + +```javascript +// router/index.js +import { createRouter, createWebHistory } from 'vue-router' + +const router = createRouter({ + // ⚠️ 重要：base 设置为 /group/ + history: createWebHistory('/group/'), + routes: [ + { + path: '/', // 实际访问: https://amiap.hzau.edu.cn/group/ + name: 'Home', + component: () => import('@/views/Home.vue') + }, + { + path: '/members', // 实际访问: https://amiap.hzau.edu.cn/group/members + name: 'Members', + component: () => import('@/views/Members.vue') + } + ] +}) + +export default router +``` + +### 2. Vite 配置 + +```javascript +// vite.config.js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + // ⚠️ 重要：base 设置为 /group/ + base: '/group/', + build: { + outDir: 'dist', + assetsDir: 'assets' + } +}) +``` + +### 3. Vue CLI 配置（如果使用 Vue CLI） + +```javascript +// vue.config.js +module.exports = { + publicPath: process.env.NODE_ENV === 'production' ? '/group/' : '/', + outputDir: 'dist' +} +``` + +## 🚀 部署步骤 + +### 1. 构建 Vue 项目 + +```bash +# 在你的 Vue 项目根目录 +cd your-vue-project + +# 确保已配置 base: '/group/' +# 然后构建 +npm run build + +# 或 +pnpm build +``` + +### 2. 复制构建产物 + +```bash +# 复制 dist 目录到部署位置 +cp -r dist /vol1/1000/docker_server/traefik/web/group-site/ +``` + +### 3. 启动服务 + +```bash +cd /vol1/1000/docker_server/traefik/web/group-site + +# 启动 +docker compose up -d + +# 查看日志 +docker compose logs -f +``` + +### 4. 访问网站 + +``` +https://amiap.hzau.edu.cn/group/ +``` + +## 📊 完整路由规划 + +``` +https://amiap.hzau.edu.cn/ +├── / → MinIO S3 API + 控制台（根路径） +│ ├── /stub/ → S3 bucket 访问 +│ ├── /api/v1/ → MinIO Console API +│ └── /static/ → MinIO Console 静态资源 +│ +├── /group/ → 科研课题组网站（你的 Vue 项目） +│ ├── /group/ → 首页 +│ ├── /group/members → 成员介绍 +│ ├── /group/research → 研究方向 +│ └── /group/... → 其他页面 +│ +├── /supa/ → Supabase API +└── /ABM/ → ABM 数据库 +``` + +## 🔧 开发调试 + +### 本地开发 + +```bash +# 在 Vue 项目中本地运行 +npm run dev + +# Vite 会自动处理 /group/ base path +# 访问: http://localhost:5173/group/ +``` + +### 生产环境测试 + +```bash +# 构建生产版本 +npm run build + +# 预览 +npm run preview +# 访问: http://localhost:4173/group/ +``` + +## �� 示例项目结构 + +```javascript +// App.vue + + +// 图片引用示例 + +``` + +## ⚠️ 常见问题 + +### Q: 刷新页面出现 404 +A: 已在 nginx.conf 中配置 `try_files`，支持 Vue Router History 模式 + +### Q: 静态资源加载失败 +A: 确保 Vite/Vue CLI 配置了正确的 `base: '/group/'` + +### Q: 路由跳转到根路径 +A: 检查 Vue Router 的 `history: createWebHistory('/group/')` + +### Q: API 请求路径错误 +A: 使用绝对路径或相对路径，例如： +```javascript +// 调用 Supabase API +fetch('https://amiap.hzau.edu.cn/supa/rest/v1/...') + +// 或使用环境变量 +const API_BASE = import.meta.env.VITE_API_URL +``` + +## 🔗 相关资源 + +- [Vue Router Base 配置](https://router.vuejs.org/guide/essentials/history-mode.html#html5-mode) +- [Vite Base 配置](https://vitejs.dev/config/shared-options.html#base) +- [主项目文档](../../README.md) + +--- + +**部署路径**: `/group/` +**优先级**: 80（高于 MinIO S3 的 50） +**维护者**: Lab Admin diff --git a/web/group-site/dist/index.html b/web/group-site/dist/index.html new file mode 100755 index 0000000..dd7e036 --- /dev/null +++ b/web/group-site/dist/index.html @@ -0,0 +1,203 @@ + + + + + + 实验室服务导航 - HZAU Lab + + + +
+
+

🔬 实验室服务导航

+

华中农业大学 · Lab Services Portal

+
+ +
+ + +
📦
+
+

MinIO 对象存储

+

S3 兼容对象存储管理控制台

+
+ 内网访问 + + + + +
🗄️
+
+

Supabase Dashboard

+

数据库管理和 API 配置面板

+
+ 内网访问 + + + + +
🌐
+
+

ABM 数据库

+

WebSocket 实时数据服务

+
+ 公网访问 + +
+ +
+

⚠️ 这是临时导航页面

+

+ 后续将替换为 Vue 课题组网站 +

+
+
+ + diff --git a/web/group-site/docker-compose.yml b/web/group-site/docker-compose.yml new file mode 100644 index 0000000..21ad7d6 --- /dev/null +++ b/web/group-site/docker-compose.yml @@ -0,0 +1,39 @@ +# Vue 科研课题组展示网站 +# 部署路径：https://amiap.hzau.edu.cn/group/ + +services: + group-site: + image: nginx:alpine + container_name: group-site + volumes: + # Vue 构建产物 + - ./dist:/usr/share/nginx/html:ro + # Nginx 配置 + - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro + networks: + - frontend + labels: + - "traefik.enable=true" + + # ====================================== + # 课题组网站路由 - /group/ 子路径 + # ====================================== + - "traefik.http.routers.group-site.rule=Host(`amiap.hzau.edu.cn`) && PathPrefix(`/group`)" + - "traefik.http.routers.group-site.priority=80" # 高于 MinIO S3 (50) + - "traefik.http.routers.group-site.entrypoints=websecure" + - "traefik.http.routers.group-site.tls.certresolver=myresolver" + + # StripPrefix 中间件 - 去除 /group 前缀 + - "traefik.http.middlewares.group-stripprefix.stripprefix.prefixes=/group" + + # 压缩中间件 + - "traefik.http.middlewares.group-compress.compress=true" + + # 应用中间件 + - "traefik.http.routers.group-site.middlewares=group-stripprefix,group-compress" + + - "traefik.http.services.group-site-svc.loadbalancer.server.port=80" + +networks: + frontend: + external: true diff --git a/web/group-site/nginx.conf b/web/group-site/nginx.conf new file mode 100644 index 0000000..7e47b57 --- /dev/null +++ b/web/group-site/nginx.conf @@ -0,0 +1,30 @@ +# Nginx 配置 - Vue Router History 模式 + 子路径 + +server { + listen 80; + server_name _; + 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 image/svg+xml; + gzip_min_length 1000; + + # Vue Router history 模式支持 + # 重要：因为 Traefik 已经去除了 /group 前缀，这里直接处理根路径 + location / { + try_files $uri $uri/ /index.html; + } + + # 静态资源缓存 + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } + + # 安全头 + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header X-XSS-Protection "1; mode=block" always; +}