backstage / wutong

同站点部署说明.md 5.2 KB

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

📋 部署方案

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

优势：

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

🚀 部署步骤

1. 打包前端

cd frontend
npm run build

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

2. 创建 wwwroot 目录

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

cd DouyinLogistics.API/publish
mkdir wwwroot

3. 复制前端文件到 wwwroot

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

# 复制所有前端文件
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 启动服务：

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：

#!/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 中设置：

VITE_API_BASE_URL=/api

2. Swagger 访问

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

3. 静态文件缓存

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

4. 文件权限

确保 wwwroot 目录有读取权限：

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！ ✅