FastAPI+VUE3创建一个项目的步骤模板(三)-尧图网站建设

📅 发布时间：2026/6/20 4:30:35

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目录下，记录所有依赖 (生产环境需要)：

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

本地开发的命令是：

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 端口，以便外部访问。

环境准备:安装 Python、Git、并克隆你的项目代码。
安装依赖:pip install -r requirements.txt
使用 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启动服务。

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

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

cdvue-frontendnpmrun build

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

在部署前，需要在 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 地址。

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

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

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