# 同站点部署说明（前端 + API 部署在一起）

## 📋 部署方案

将前端静态文件放在 `.NET API` 的 `wwwroot` 目录下，由 ASP.NET Core 统一提供静态文件和 API 服务。

**优势：**

- ✅ 只需要一个服务，简化部署
- ✅ 不需要配置 CORS（同源）
- ✅ 统一域名和端口
- ✅ 更简单的 Nginx 配置

---

## 🚀 部署步骤

### 1. 打包前端

```bash
cd frontend
npm run build
```

前端会打包到 `frontend/dist/` 目录。

### 2. 创建 wwwroot 目录

在 `DouyinLogistics.API/publish/` 目录下创建 `wwwroot` 目录：

```bash
cd DouyinLogistics.API/publish
mkdir wwwroot
```

### 3. 复制前端文件到 wwwroot

将前端打包后的文件复制到 `wwwroot` 目录：

```bash
# 复制所有前端文件
cp -r frontend/dist/* DouyinLogistics.API/publish/wwwroot/
```

### 4. 上传到服务器

将整个 `publish` 目录上传到服务器，例如：

```
/www/wwwroot/douyin-api/
```

**目录结构应该是：**

```
/www/wwwroot/douyin-api/
├── DouyinLogistics.API.dll
├── appsettings.json
├── wwwroot/              ← 前端文件在这里
│   ├── index.html
│   ├── assets/
│   │   ├── index-xxx.css
│   │   └── index-xxx.js
│   └── favicon.ico
└── ... (其他 DLL 文件)
```

### 5. 配置 Nginx

在宝塔面板 → 网站 → `douyin.ponggame.cn` → 设置 → 反向代理，配置：

- **目标URL**: `http://127.0.0.1:5000`
- **发送域名**: `$host`
- **已启用**: ✅

**不需要配置静态文件路径**，所有请求都转发给 .NET API，由 API 处理静态文件和 API 请求。

### 6. 启动服务

使用 systemd 或 Supervisor 启动服务：

```bash
dotnet DouyinLogistics.API.dll --urls http://127.0.0.1:5000
```

### 7. 测试访问

- **前端页面**: `https://douyin.ponggame.cn/`
- **API 接口**: `https://douyin.ponggame.cn/api/orders`
- **Swagger**: `https://douyin.ponggame.cn/swagger`

---

## 🔧 路由规则

### API 路由

- 所有 `/api/`* 请求 → 由 `Controllers` 处理
- 例如：`/api/orders`, `/api/auth/authorize`

### 静态文件路由

- 所有 `/assets/*` 请求 → 从 `wwwroot/assets/` 提供
- 例如：`/assets/index-xxx.js`, `/assets/index-xxx.css`

### 前端路由（Vue Router）

- 所有其他请求 → 返回 `wwwroot/index.html`
- 例如：`/`, `/orders`, `/about`
- Vue Router 会在前端处理这些路由

---

## 📝 自动化脚本

### 创建部署包脚本（同站点）

创建 `创建同站点部署包.sh`：

```bash
#!/bin/bash

echo "=========================================="
echo "创建同站点部署包（前端 + API）..."
echo "=========================================="

# 1. 打包前端
echo "📦 打包前端..."
cd frontend
npm run build
cd ..

# 2. 打包后端
echo "📦 打包后端..."
cd DouyinLogistics.API
dotnet publish -c Release -o ./publish --self-contained false
cd ..

# 3. 创建 wwwroot 目录
echo "📁 创建 wwwroot 目录..."
mkdir -p DouyinLogistics.API/publish/wwwroot

# 4. 复制前端文件到 wwwroot
echo "📋 复制前端文件到 wwwroot..."
cp -r frontend/dist/* DouyinLogistics.API/publish/wwwroot/

# 5. 创建部署包
DEPLOY_DIR="deploy_single_site_$(date +%Y%m%d_%H%M%S)"
mkdir -p "$DEPLOY_DIR"
cp -r DouyinLogistics.API/publish/* "$DEPLOY_DIR/"

echo "✅ 部署包创建完成！"
echo ""
echo "部署包位置: $DEPLOY_DIR"
echo ""
echo "目录结构:"
echo "  $DEPLOY_DIR/"
echo "  ├── DouyinLogistics.API.dll"
echo "  ├── appsettings.json"
echo "  ├── wwwroot/          ← 前端文件"
echo "  │   ├── index.html"
echo "  │   └── assets/"
echo "  └── ... (其他文件)"
echo ""
echo "请将 $DEPLOY_DIR 目录上传到服务器！"
```

---

## ⚠️ 注意事项

### 1. 前端 API 地址

前端已配置为使用相对路径 `/api`，会自动适配当前域名。

如果需要修改，可以在 `frontend/.env.production` 中设置：

```bash
VITE_API_BASE_URL=/api
```

### 2. Swagger 访问

Swagger 仍然可以通过 `/swagger` 访问，但建议在生产环境关闭。

### 3. 静态文件缓存

浏览器可能会缓存静态文件，更新前端后需要清除缓存或使用版本号。

### 4. 文件权限

确保 `wwwroot` 目录有读取权限：

```bash
chmod -R 755 /www/wwwroot/douyin-api/wwwroot
```

---

## 🔄 更新部署

### 更新前端

1. 重新打包：`npm run build`
2. 复制文件：`cp -r frontend/dist/* DouyinLogistics.API/publish/wwwroot/`
3. 上传到服务器（覆盖旧文件）
4. 重启服务：`sudo systemctl restart douyin-api`

### 更新后端

1. 重新打包：`dotnet publish -c Release -o ./publish`
2. 复制前端文件到新的 publish/wwwroot
3. 上传到服务器（覆盖旧文件）
4. 重启服务：`sudo systemctl restart douyin-api`

---

## 🧪 验证部署

1. **访问首页**: `https://douyin.ponggame.cn/` 应该显示前端页面
2. **访问 API**: `https://douyin.ponggame.cn/api/orders` 应该返回 JSON 数据
3. **前端路由**: `https://douyin.ponggame.cn/orders` 应该显示订单列表页面
4. **静态资源**: 浏览器开发者工具 → Network，检查 CSS/JS 文件是否正常加载

---

**部署完成后，前端和 API 都在同一个站点下，无需配置 CORS！** ✅