template
This commit is contained in:
zly
202
web/group-site/README.md
Normal file
202
web/group-site/README.md
Normal file
@@ -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/
|
||||||
|
```
|
||||||
|
|
||||||
|
## <20><> 示例项目结构
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// App.vue
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<nav>
|
||||||
|
<\!-- 路由链接会自动加上 /group/ 前缀 -->
|
||||||
|
<router-link to="/">首页</router-link>
|
||||||
|
<router-link to="/members">团队成员</router-link>
|
||||||
|
<router-link to="/research">研究方向</router-link>
|
||||||
|
</nav>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
// 图片引用示例
|
||||||
|
<template>
|
||||||
|
<img src="@/assets/logo.png" alt="Logo">
|
||||||
|
<\!-- Vite 会自动处理为: /group/assets/logo-xxx.png -->
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## ⚠️ 常见问题
|
||||||
|
|
||||||
|
### 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
|
||||||
203
web/group-site/dist/index.html
vendored
Executable file
203
web/group-site/dist/index.html
vendored
Executable file
@@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>实验室服务导航 - HZAU Lab</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 24px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
padding: 3rem;
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: #718096;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-minio { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); }
|
||||||
|
.icon-supabase { background: linear-gradient(135deg, #3ecf8e 0%, #2eb77a 100%); }
|
||||||
|
.icon-abm { background: linear-gradient(135deg, #4facfe 0%, #00a8ff 100%); }
|
||||||
|
|
||||||
|
.service-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-info h3 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-info p {
|
||||||
|
color: #718096;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-badge {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-internal {
|
||||||
|
background: #fef5e7;
|
||||||
|
color: #d68910;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-public {
|
||||||
|
background: #eaf7f0;
|
||||||
|
color: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
color: #a0aec0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer strong {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.container {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>🔬 实验室服务导航</h1>
|
||||||
|
<p>华中农业大学 · Lab Services Portal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services">
|
||||||
|
<!-- MinIO 对象存储 -->
|
||||||
|
<a href="http://100.64.0.2:9001" class="service-card" target="_blank">
|
||||||
|
<div class="service-icon icon-minio">📦</div>
|
||||||
|
<div class="service-info">
|
||||||
|
<h3>MinIO 对象存储</h3>
|
||||||
|
<p>S3 兼容对象存储管理控制台</p>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge badge-internal">内网访问</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Supabase Dashboard -->
|
||||||
|
<a href="http://100.64.0.2:18000" class="service-card" target="_blank">
|
||||||
|
<div class="service-icon icon-supabase">🗄️</div>
|
||||||
|
<div class="service-info">
|
||||||
|
<h3>Supabase Dashboard</h3>
|
||||||
|
<p>数据库管理和 API 配置面板</p>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge badge-internal">内网访问</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- ABM 数据库 -->
|
||||||
|
<a href="https://amiap.hzau.edu.cn/ABM/" class="service-card" target="_blank">
|
||||||
|
<div class="service-icon icon-abm">🌐</div>
|
||||||
|
<div class="service-info">
|
||||||
|
<h3>ABM 数据库</h3>
|
||||||
|
<p>WebSocket 实时数据服务</p>
|
||||||
|
</div>
|
||||||
|
<span class="service-badge badge-public">公网访问</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>⚠️ 这是临时导航页面</p>
|
||||||
|
<p style="margin-top: 0.5rem;">
|
||||||
|
后续将替换为 <strong>Vue 课题组网站</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
web/group-site/docker-compose.yml
Normal file
39
web/group-site/docker-compose.yml
Normal file
@@ -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
|
||||||
30
web/group-site/nginx.conf
Normal file
30
web/group-site/nginx.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user