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

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

1. 服务器环境准备

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

bash 复制代码
# 更新系统软件包
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,则可以使用以下命令:

bash 复制代码
scp -r backend your_username@your_server_ip:/path/to/destination
2.2 创建虚拟环境并安装依赖
bash 复制代码
# 进入后端代码目录
cd /path/to/destination/backend

# 创建虚拟环境
python3 -m venv venv

# 激活虚拟环境
source venv/bin/activate

# 安装后端依赖
pip install -r requirements.txt
2.3 配置后端服务

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

bash 复制代码
# 安装 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 进程。

bash 复制代码
sudo nano /etc/systemd/system/gunicorn.service

在文件中添加以下内容:

ini 复制代码
[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 服务。

bash 复制代码
sudo systemctl daemon-reload
sudo systemctl start gunicorn
sudo systemctl enable gunicorn

3. 前端部署

3.1 上传前端代码

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

bash 复制代码
scp -r frontend your_username@your_server_ip:/path/to/destination
3.2 构建前端项目
bash 复制代码
# 进入前端代码目录
cd /path/to/destination/frontend

# 安装依赖
npm install

# 构建项目
npm run build

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

4. 配置 Nginx

4.1 创建 Nginx 配置文件
bash 复制代码
sudo nano /etc/nginx/sites-available/your_project

在文件中添加以下内容:

nginx 复制代码
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
bash 复制代码
sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. 防火墙设置

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

bash 复制代码
sudo ufw allow 'Nginx Full'

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

相关推荐
Simon_He4 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
汀沿河23 分钟前
8.1 prefix Tunning与Prompt Tunning模型微调方法
linux·运维·服务器·人工智能
zly350036 分钟前
centos7 ping127.0.0.1不通
linux·运维·服务器
巴巴_羊39 分钟前
React Ref使用
前端·javascript·react.js
萧鼎1 小时前
深度探索 Py2neo:用 Python 玩转图数据库 Neo4j
数据库·python·neo4j
拾光拾趣录1 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
华子w9089258591 小时前
基于 Python Django 和 Spark 的电力能耗数据分析系统设计与实现7000字论文实现
python·spark·django
轻语呢喃1 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军1 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子1 小时前
Blob 对象及 Base64 转换指南
前端