fastapi vue前后端分离项目部署

### 部署 FastAPI 和 Vue.js 构建的前后端分离项目

#### 一、准备阶段

对于部署基于 FastAPI 的后端服务以及由 Vue.js 开发的前端应用，需先确保开发环境已配置完毕并测试通过。这包括确认 FastAPI API 接口能够正常响应请求[^1]。

#### 二、构建与打包前端资源

在完成前端应用程序编写之后，应当利用 npm 或 yarn 工具执行 `npm run build` 命令来编译生产版本的静态文件。这些文件通常会被放置于项目的 dist 文件夹内[^2]。

#### 三、设置反向代理服务器

为了使同一域名下的不同路径分别指向前端和后端的服务地址，在此推荐采用 Nginx 来作为反向代理服务器。Nginx 可以轻松处理来自客户端的所有 HTTP 请求并将它们分发给相应的服务实例。

以下是简单的 Nginx 配置示例：

server {
    listen       80;
    server_name  localhost;

    location /api/ {
        proxy_pass http://localhost:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root   /path/to/vue/dist;
        try_files $uri $uri/ /index.html;
    }
}

上述配置中 `/api/` 路径下所有的请求都会被转发到运行着 FastAPI 应用程序的地方；而其他任何 URL 则会尝试匹配本地磁盘上的静态文件，如果找不到则返回 index.html 页面以便支持 HTML5 History Mode 下路由功能[^3]。

#### 四、启动后台进程管理工具

考虑到长时间稳定运行的需求，建议使用 Gunicorn 这样的 WSGI 容器配合 Uvicorn 启动 FastAPI 应用，并借助 Supervisord 等守护进程监控其状态变化情况。这样即使遇到意外崩溃也能自动重启恢复工作。

安装命令如下所示：

pip install gunicorn uvicorn[standard]
sudo apt-get install supervisor

编辑 supervisord.conf 添加如下内容用于定义 fastapi 服务：

[program:fastapi]
command=/usr/local/bin/gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app -b unix:/tmp/fastapi.sock
directory=/var/www/html/backend/
autostart=true
autorestart=true
stderr_logfile=/var/log/fasapi.err.log
stdout_logfile=/var/log/fastapi.out.log
environment=PATH="/home/user/.local/bin:%(ENV_PATH)s"
user=nobody
group=nogroup

最后更新 Supervisor 并开启新加入的任务即可让 FastAPI 处于随时待命的状态等待接收来自外部世界的访问请求。