python后端程序部署到服务器 Ubuntu并配合 Vue 前端页面运行

将 PyCharm 研发的 Web 后端系统程序部署到 Ubuntu 24.04 服务器并配合 Vue 前端页面运行，可按以下步骤操作：

1. 服务器环境准备

在开始部署之前，需要在 Ubuntu 24.04 服务器上安装必要的软件。

# 更新系统软件包
sudo apt update
sudo apt upgrade -y# 安装 Python3 和 pip
sudo apt install python3 python3-pip -y# 安装 Node.js 和 npm（用于 Vue 前端）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install nodejs -y# 安装 Nginx（用于反向代理和静态文件服务）
sudo apt install nginx -y

2. 后端部署

2.1 上传后端代码

可以使用 scp 命令将 PyCharm 中的后端代码上传到服务器。假设你的后端代码目录为 backend，服务器 IP 为 your_server_ip，用户名为 your_username，则可以使用以下命令：

scp -r backend your_username@your_server_ip:/path/to/destination

2.2 创建虚拟环境并安装依赖

# 进入后端代码目录
cd /path/to/destination/backend# 创建虚拟环境
python3 -m venv venv# 激活虚拟环境
source venv/bin/activate# 安装后端依赖
pip install -r requirements.txt

2.3 配置后端服务

可以使用 Gunicorn 作为 WSGI 服务器来运行 Django 应用。

# 安装 Gunicorn
pip install gunicorn# 测试 Gunicorn 是否可以正常启动应用
gunicorn your_project.wsgi:application --bind 0.0.0.0:8000

这里的 your_project 要替换为你的 Django 项目名称。如果一切正常，按 Ctrl+C 停止 Gunicorn。

2.4 创建 Systemd 服务文件

创建一个 Systemd 服务文件来管理 Gunicorn 进程。

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

在文件中添加以下内容：

[Unit]
Description=Gunicorn instance to serve your_project
After=network.target[Service]
User=your_username
Group=www-data
WorkingDirectory=/path/to/destination/backend
Environment="PATH=/path/to/destination/backend/venv/bin"
ExecStart=/path/to/destination/backend/venv/bin/gunicorn --workers 3 --bind unix:/path/to/destination/backend/your_project.sock your_project.wsgi:application[Install]
WantedBy=multi-user.target

保存并退出文件，然后重新加载 Systemd 管理器配置并启动 Gunicorn 服务。

sudo systemctl daemon-reload
sudo systemctl start gunicorn
sudo systemctl enable gunicorn

3. 前端部署

3.1 上传前端代码

同样使用 scp 命令将 Vue 前端代码上传到服务器。

scp -r frontend your_username@your_server_ip:/path/to/destination

3.2 构建前端项目

# 进入前端代码目录
cd /path/to/destination/frontend# 安装依赖
npm install# 构建项目
npm run build

构建完成后，会在 dist 目录下生成静态文件。

4. 配置 Nginx

4.1 创建 Nginx 配置文件

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

在文件中添加以下内容：

server {listen 80;server_name your_domain_or_ip;location / {root /path/to/destination/frontend/dist;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://unix:/path/to/destination/backend/your_project.sock;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

这里的 /api/ 是后端 API 的前缀，根据实际情况修改。

4.2 启用配置文件并重启 Nginx

sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. 防火墙设置

如果服务器启用了防火墙，需要开放相应的端口。

sudo ufw allow 'Nginx Full'

通过以上步骤，你就可以将 PyCharm 研发的 Web 后端系统程序部署到 Ubuntu 24.04 服务器并配合 Vue 前端页面运行了。