FastAPI+VUE3创建一个项目的步骤模板(三)

FastAPI 和 Vue 3 的部署通常遵循前后端分离的原则，各自独立部署，通过域名和端口进行通信。

我们将把部署分为以下三个主要部分讲解：

在开发阶段，我们使用 http://localhost:8000 (FastAPI) 和 http://localhost:5173 (Vue) 进行本地调试。部署后，我们需要一个更稳定的方案。

组件	部署方式	角色	关键点
FastAPI (后端)	部署到云服务器（如 DigitalOcean/AWS/阿里云）或 PaaS 平台（如 Render/Fly.io）。	负责 API 逻辑和数据。	必须使用 Gunicorn 或类似工具作为进程管理器，不能只用 `uvicorn main:app`。
Vue 3 (前端)	打包成静态文件（HTML/CSS/JS），托管到 CDN 或 Nginx/Apache 服务器。	负责用户界面和 HTTP 请求。	必须修改前端代码中的 API 地址。
Nginx (可选)	作为反向代理，位于前端和后端之间。	处理 HTTPS、负载均衡和静态文件服务。	推荐在生产环境中使用。

FastAPI 使用 Uvicorn ，但 Uvicorn 默认是单进程的，不适合生产环境。生产环境需要一个 WSGI/ASGI 进程管理器 来管理多个工作进程，实现稳定性和并发性。最常见的方式是结合 Gunicorn 来管理 Uvicorn。

首先，在 fastvue-todo 目录下，记录所有依赖 (生产环境需要)：

bash 复制代码

# 假设你还在虚拟环境中 (venv)
pip install gunicorn
pip freeze > requirements.txt

本地开发的命令是：

bash 复制代码

uvicorn main:app --reload

生产环境的推荐命令是（使用 Gunicorn 管理多个 Uvicorn Worker）：

bash 复制代码

gunicorn main:app --workers 4 --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000

--workers 4 : 启动 4 个工作进程，通常是 CPU 核心数的 2×N+12 \times N + 12×N+1 或 NNN 个。
--worker-class uvicorn.workers.UvicornWorker: 指定 Gunicorn 使用 Uvicorn 来处理 ASGI 请求。
--bind 0.0.0.0:8000: 绑定到所有网络接口和 8000 端口，以便外部访问。

环境准备: 安装 Python、Git、并克隆你的项目代码。
安装依赖: pip install -r requirements.txt
使用 Systemd/Supervisor: 你应该使用 Linux 的服务管理器 (如 Systemd) 来确保你的 Gunicorn 进程在服务器重启时自动启动，并且如果崩溃可以自动重启。
- Systemd 示例 (/etc/systemd/system/fastapi.service):
  ini 复制代码
```
[Unit]
Description=Gunicorn instance to serve FastAPI
After=network.target

[Service]
User=your_user_name
WorkingDirectory=/path/to/your/fastvue-todo
ExecStart=/path/to/venv/bin/gunicorn main:app --workers 4 --worker-class uvicorn.workers.UvicornWorker --bind 0.0.0.0:8000

[Install]
WantedBy=multi-user.target
```
- 然后使用 sudo systemctl start fastapi 和 sudo systemctl enable fastapi 启动服务。

前端只需要构建一次，然后将生成的静态文件托管起来。

在 vue-frontend 目录下运行构建命令：

bash 复制代码

cd vue-frontend
npm run build

这个命令会在项目根目录生成一个名为 dist 的文件夹。这个文件夹包含了所有优化后的 HTML, CSS 和 JavaScript 文件。

在部署前，需要在 Vue 代码中将 API 地址从本地 http://127.0.0.1:8000 更改为实际生产环境域名。

例如，如果 FastAPI 后端部署在 api.mytodomain.com 上，需要修改 App.vue 中的：

javascript 复制代码

// vue-frontend/src/App.vue
const apiBaseUrl = 'http://127.0.0.1:8000'; // 修改前
// 生产环境应该修改为:
const apiBaseUrl = 'https://api.mytodomain.com'; // 修改后

提示: 更优雅的做法是使用 Vite 的环境变量 (VITE_APP_API_URL) 来根据环境自动切换 API 地址。

你可以选择以下几种方式托管 dist 文件夹的内容：

静态主机 (最简单): 使用 Netlify, Vercel, 或 GitHub Pages。这些服务专门用于托管静态文件，提供 CDN 加速和 SSL/TLS (HTTPS)。
Web 服务器: 将 dist 文件夹的内容上传到你的 Web 服务器（如 Nginx 或 Apache）的根目录。
云存储: 将文件上传到 AWS S3 或 Azure Blob Storage，并配合 CDN 服务。