【保姆级教程】阿里云 ECS 服务器部署 FastAPI+Vue 前后端分离项目完整指南

Python智慧行囊

于 2025-07-31 10:22:00 发布

阅读量1.4k

点赞数 31

CC 4.0 BY-SA版权

分类专栏：项目部署文章标签：阿里云服务器 fastapi

本文链接：https://blog.csdn.net/2201_75786273/article/details/149799032

项目部署专栏收录该内容

2 篇文章

订阅专栏

2.1 使用 CMD/PowerShell 连接

2.2 使用 FileZilla 传输文件

五、部署前端（Vue）与 Nginx 配置

引言

随着前后端分离架构的普及，将 FastAPI 后端与 Vue 前端部署到云服务器成为开发者的必备技能。本文将以阿里云 ECS 为例，从服务器购买到项目上线，手把手教你完成全流程部署，即使是新手也能轻松掌握。

一、准备工作：服务器与项目打包

1.1 购买阿里云 ECS 服务器

进入阿里云官网，注册并登录账号。
选择「云服务器 ECS」，配置推荐：
- 操作系统：CentOS 7.9（稳定性强，兼容性好）
- 实例规格：2 核 4G（入门级足够小型项目使用）
- 带宽：1-2M（满足基础访问需求，可按需升级）
购买后记录关键信息：公网 IP（如123.45.67.89）、登录用户名（默认root）、密码或密钥对。
关键操作：在 ECS 控制台的「安全组」中开放端口：
- 80（HTTP）、443（HTTPS）：用于前端访问
- 8000（FastAPI 默认端口）：后端服务端口
- 22（SSH）：远程连接服务器

1.2 本地项目准备

前端（Vue）：
在本地项目根目录执行打包命令，生成生产环境文件：
```
npm run build  # 生成dist文件夹，内含静态资源
```

后端（FastAPI）：

确保项目根目录包含requirements.txt，列出所有依赖：

fastapi==0.104.1
uvicorn==0.24.0
python-multipart==0.0.6
# 其他项目依赖（如pandas、sqlalchemy等）

确认入口文件（如main.py）可正常运行，示例：

from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "FastAPI部署成功"}

二、远程连接服务器：两种常用方式

2.1 使用 CMD/PowerShell 连接

打开终端，输入连接命令：

ssh root@123.45.67.89  # 替换为你的公网IP

首次连接提示Are you sure you want to continue?，输入yes。
输入服务器密码（输入时无显示，输完回车），成功后显示：
```
[root@iZ2ze ~]#  # 服务器命令行界面
```

2.2 使用 FileZilla 传输文件

下载并打开 FileZilla，点击「站点管理器」，配置：
- 主机：公网 IP
- 协议：SFTP
- 登录类型：正常
- 用户名：root
- 密码：服务器密码
连接后，左侧为本地文件，右侧为服务器文件，可直接拖拽传输。

三、服务器环境配置：安装依赖

在服务器终端依次执行以下命令：

# 更新系统
yum update -y

# 安装Python3和pip
yum install -y python3 python3-pip

# 安装Nginx（用于前端部署和反向代理）
yum install -y nginx

# 启动Nginx并设置开机自启
systemctl start nginx
systemctl enable nginx

验证 Nginx：本地浏览器访问http://123.45.67.89，看到 Nginx 默认页面即为成功。

四、部署后端（FastAPI）

4.1 上传代码并安装依赖

创建后端目录：

mkdir -p /www/backend  # 项目存放路径
cd /www/backend

通过 FileZilla 将本地后端文件（main.py、requirements.txt等）上传到/www/backend。
安装依赖：
```
pip3 install -r requirements.txt
```

4.2 配置系统服务（开机自启）

创建服务文件：
```
vi /etc/systemd/system/fastapi.service
```

按i进入编辑模式，粘贴以下内容（修改路径为实际路径）：

[Unit]
Description=FastAPI Service
After=network.target

[Service]
User=root
WorkingDirectory=/www/backend
ExecStart=/usr/bin/uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4
Restart=always

[Install]
WantedBy=multi-user.target

按Esc，输入:wq保存，执行以下命令启动服务：

systemctl daemon-reload  # 重新加载配置
systemctl start fastapi  # 启动服务
systemctl enable fastapi  # 开机自启

验证后端：服务器内执行curl http://127.0.0.1:8000，返回 JSON 即为成功。

五、部署前端（Vue）与 Nginx 配置

5.1 上传前端文件

通过 FileZilla 将本地dist文件夹内的所有文件上传到服务器的/usr/share/nginx/html目录（Nginx 默认静态文件路径）。

5.2 配置 Nginx 反向代理

编辑 Nginx 配置文件：
```
vi /etc/nginx/conf.d/default.conf
```

替换为以下配置（解决跨域和路由问题）：

server {
    listen 80;
    server_name 123.45.67.89;  # 替换为你的公网IP

    root /usr/share/nginx/html;
    index index.html;

    # 处理Vue路由刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端API（解决跨域）
    location /api/ {
        proxy_pass http://127.0.0.1:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

检查配置并重启 Nginx：

nginx -t  # 验证配置是否正确
systemctl restart nginx  # 重启服务

六、测试与问题排查

访问项目：本地浏览器输入http://123.45.67.89，查看前端页面是否正常加载，后端接口是否可调用。
常见问题：
- 前端空白：检查 Nginx 的root路径是否正确，dist文件是否完整上传。
- 后端接口不通：执行systemctl status fastapi查看服务状态，或journalctl -u fastapi -f查看日志。
- 跨域错误：确认 Nginx 反向代理的location路径与后端接口前缀一致（如均为/api/）。