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

部署交付

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

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

1. 🚀 部署策略概述(如何分离和通信)
2. 🐍 FastAPI 后端部署(使用 Gunicorn/Uvicorn 和服务器)
3. 🖼️ Vue 3 前端部署(静态文件托管)

---

1. 🚀 部署策略概述

在开发阶段，我们使用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、负载均衡和静态文件服务。	推荐在生产环境中使用。

---

2. 🐍 FastAPI 后端部署 (生产环境)

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

A. 生产依赖安装

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

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

B. 生产运行命令

本地开发的命令是：

uvicorn main:app --reload

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

gunicorn main:app --workers4--worker-class uvicorn.workers.UvicornWorker --bind0.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 端口，以便外部访问。

C. 部署到服务器 (例如使用 Linux VM)

1. 环境准备:安装 Python、Git、并克隆你的项目代码。
2. 安装依赖:pip install -r requirements.txt
3. 使用 Systemd/Supervisor:你应该使用 Linux 的服务管理器 (如 Systemd) 来确保你的 Gunicorn 进程在服务器重启时自动启动，并且如果崩溃可以自动重启。
   • Systemd 示例 (/etc/systemd/system/fastapi.service):

     [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启动服务。

3. 🖼️ Vue 3 前端部署 (静态托管)

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

A. 构建 Vue 3 应用

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

cdvue-frontendnpmrun build

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

B. 修改 API 基础 URL (关键步骤)

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

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

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

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

C. 托管dist文件夹

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

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