【本地开发必备】Ubuntu 虚拟机部署 FastAPI+Vue 前后端分离项目超详细步骤-CSDN博客

2.2 使用 FileZilla 传输文件

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

引言

在开发阶段，使用 Ubuntu 虚拟机部署前后端分离项目是高效且经济的选择。本文将详细介绍如何在本地 Ubuntu 虚拟机中部署 FastAPI 后端与 Vue 前端，适合开发者进行功能测试和调试。

一、虚拟机与项目准备

1.1 配置 Ubuntu 虚拟机

推荐系统版本：Ubuntu 20.04/22.04（LTS 版本稳定性更佳）。
网络配置：确保虚拟机联网，记录局域网 IP（终端执行ip addr查看，如192.168.1.100）。

安装 SSH 服务（用于远程连接）：

sudo apt update
sudo apt install -y openssh-server
sudo systemctl start ssh
sudo systemctl enable ssh  # 开机自启

1.2 本地项目打包

前端（Vue）：同阿里云部署，执行npm run build生成dist文件夹。
后端（FastAPI）：准备requirements.txt和入口文件main.py（同上一篇）。

二、远程连接 Ubuntu 虚拟机

2.1 使用 PowerShell 连接

ssh ubuntu@192.168.1.100  # 替换为虚拟机IP和用户名

输入密码后成功连接，终端显示：

ubuntu@ubuntu:~$  # 虚拟机命令行界面

2.2 使用 FileZilla 传输文件

主机填写sftp://192.168.1.100，输入用户名和密码，连接后即可拖拽文件。

三、安装依赖环境

在虚拟机终端执行：

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装Python3及虚拟环境
sudo apt install -y python3 python3-pip python3-venv

# 安装Nginx
sudo apt install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx

验证 Nginx：本地浏览器访问http://192.168.1.100，看到 Nginx 欢迎页即为成功。

四、部署后端（FastAPI）

4.1 上传代码与创建虚拟环境

创建目录并上传文件：
```
mkdir -p ~/www/backend  # 后端目录
cd ~/www/backend
```
通过 FileZilla 将后端文件上传到该目录。

创建并激活虚拟环境：

python3 -m venv venv  # 创建虚拟环境
source venv/bin/activate  # 激活（终端显示(venv)）
pip install -r requirements.txt  # 安装依赖

4.2 配置系统服务

创建服务文件：

sudo nano /etc/systemd/system/fastapi.service

输入配置（注意虚拟环境路径）：

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

[Service]
User=ubuntu  # 你的用户名
WorkingDirectory=/home/ubuntu/www/backend
ExecStart=/home/ubuntu/www/backend/venv/bin/uvicorn main:app --host 0.0.0.0 --port 8000 --workers 4
Restart=always

[Install]
WantedBy=multi-user.target

启动服务：

sudo systemctl daemon-reload
sudo systemctl start fastapi
sudo systemctl enable fastapi

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

5.1 上传前端文件

将本地dist文件夹内容通过 FileZilla 上传到虚拟机的/var/www/html目录。
若权限不足，先授权：
```
sudo chmod 777 /var/www/html
```

5.2 配置 Nginx

编辑配置文件：

sudo nano /etc/nginx/sites-available/default

替换配置：

server {
    listen 80;
    server_name 192.168.1.100;  # 虚拟机IP

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8000/api/;
    }
}

重启 Nginx：

sudo nginx -t
sudo systemctl restart nginx

六、测试与权限问题解决

访问项目：局域网内设备访问http://192.168.1.100即可打开前端页面。
权限问题：
- 后端文件无法访问：sudo chown -R ubuntu:ubuntu ~/www/backend
- Nginx 403 错误：sudo chmod -R 755 /var/www/html