Django + Vue 项目部署(1panel + openresty)

前言

复制代码
大家好,我是绿藻头,一名全栈工程师,目前专注于Python的开发,以及Vue和微信小程序的开发。写博客的原因有两个:一是方便将自己的笔记保存下来,二是给自己找些小事做,总比下班后躺在床上玩手机好。

准备工作

在开始之前,请确保你已经完成以下准备工作:

  • 一个你自己定义好的Python项目(比如,已经写好几个接口)。
  • 一个配置好的Vue项目,记得配置好网址。
  • 一台已经安装好1Panel的服务器。
  • 在服务器中安装了OpenResty。

Python项目

首先,创建一个Python项目并编写一些接口(这部分内容不重点讨论)。

常见问题

作为初学者,我常常思考一些问题,比如:

如何将项目上传到自己的服务器?

如何更新项目?

相信很多人都有类似的疑问,针对这些问题,我目前有两种方案:

上传源码到服务器 如果你的项目接口较少,或者接口已经基本开发完成,那么可以直接将源码上传到服务器。

你可以使用xftp或SSH(在Mac上我用的是SSH)将文件传输到服务器上,注意:不要上传虚拟环境(.venv文件夹)。

使用Git进行管理 如果你希望能够方便地更新项目代码,并且使用版本控制,可以考虑使用Git。举个例子,这是我的一个GitHub仓库:JobSubmissionPlatform。 在服务器上执行以下命令:

git init # 初始化本地Git仓库

复制代码
git remote add origin https://github.com/duasong111/JobSubmissionPlatform.git  # 添加远程仓库
git remote -v  # 查看远程仓库
git pull origin main  # 拉取远程仓库的代码

这样,代码就成功下载到服务器上,后续你可以通过git pull来拉取更新的代码。

创建并激活Python虚拟环境

在服务器上,你需要创建一个虚拟环境来隔离项目的依赖。操作步骤如下:

创建虚拟环境(假设环境名称为myenv):

python -m venv myenv # 创建虚拟环境

激活虚拟环境:

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

如果命令行前缀变成(myenv),说明虚拟环境已经激活成功。

安装依赖并启动项目

安装项目的依赖:

pip install -r requirements.txt # 安装依赖

启动项目:

python manage.py runserver 0.0.0.0:8000 # 启动项目,使用0.0.0.0表示允许所有IP访问

为什么使用0.0.0.0? 这是一个回环地址,意味着项目可以通过所有IP进行访问,直到没有报错为止。

使用uWSGI进行生产环境部署

我们不希望每次手动启动项目,使用uWSGI可以在生产环境中方便地部署Django应用。

首先安装uWSGI:

bash 复制代码
pip install uwsgi

创建uwsgi.ini配置文件:

bash 复制代码
[uwsgi]
chdir = /home/Web_python/JobSubmissionPlatform  # 项目路径
module = wsgi:application  # 入口模块
master = true  # 启动master进程
processes = 2  # 启动2个worker进程
socket = 127.0.0.1:8000  # 设置监听端口
vacuum = true  # 清理进程
env = DJANGO_SETTINGS_MODULE=JobSubmissionPlatform.settings  # 环境变量
daemonize = /home/Web_python/uwsgi.log  # 日志文件路径

查看进程是否启动:

bash 复制代码
启动uWSGI:
uwsgi --ini uwsgi.ini  # 启动uWSGI进程
bash 复制代码
ps aux | grep uwsgi  # 查看uWSGI进程是否存在
netstat -tnlp | grep 9000  # 检查端口是否监听

配置Shell脚本用于启动与关闭uWSGI

为了方便管理uWSGI进程,我们可以配置两个Shell脚本来启动和停止uWSGI进程。

停止的脚本

bash 复制代码
#!/usr/bin/env bash

echo -e "\033[34m----------------wsgi process--------\033[0m"

# 获取 uWSGI 进程的 PID
PIDS=$(ps -ef | grep '[u]wsgi.*uwsgi.ini' | awk '{print $2}')

if [ -z "$PIDS" ]; then
    echo -e "\033[31mNo uWSGI processes found for uwsgi.ini\033[0m"
    exit 1
fi

echo -e "\n-----------going to close ----------------"
for PID in $PIDS; do
    echo "Stopping uWSGI process with PID: $PID"
    kill -15 "$PID"  # 使用 SIGTERM 优雅终止
    sleep 1
    # 检查进程是否仍在运行
    if ps -p "$PID" > /dev/null; then
        echo -e "\033[31mProcess $PID did not terminate, forcing kill...\033[0m"
        kill -9 "$PID"  # 如果 SIGTERM 失败,强制终止
    fi
done

echo -e "\033[32mAll uWSGI processes stopped\033[0m"

重启的脚本

bash 复制代码
#!/usr/bin/env bash

echo -e "\033[34m----------------wsgi process--------\033[0m"

# 获取 uWSGI 进程的 PID
PIDS=$(ps -ef | grep '[u]wsgi.*uwsgi.ini' | awk '{print $2}')

if [ -n "$PIDS" ]; then
    echo -e "\n-----------going to close ----------------"
    for PID in $PIDS; do
        echo "Stopping uWSGI process with PID: $PID"
        kill -15 "$PID"  # 使用 SIGTERM 优雅终止
        sleep 1
        # 检查进程是否仍在运行
        if ps -p "$PID" > /dev/null; then
            echo -e "\033[31mProcess $PID did not terminate, forcing kill...\033[0m"
            kill -9 "$PID"  # 如果 SIGTERM 失败,强制终止
        fi
    done
else
    echo -e "\033[31mNo uWSGI processes found for uwsgi.ini\033[0m"
fi

echo -e "\n-------starting uWSGI---------"
# 使用虚拟环境中的 uwsgi,确保路径可移植
UWSGI_BIN=$(command -v uwsgi)
if [ -z "$UWSGI_BIN" ]; then
    echo -e "\033[31mError: uwsgi not found in PATH\033[0m"
    exit 1
fi

$UWSGI_BIN --ini uwsgi.ini &

sleep 1

echo -e "\033[34m----------------wsgi process--------\033[0m"
ps -ef | grep '[u]wsgi.*uwsgi.ini'

if [ $? -eq 0 ]; then
    echo -e "\033[32muWSGI restarted successfully\033[0m"
else
    echo -e "\033[31mFailed to start uWSGI\033[0m"
    exit 1
fi

哎呦,这个csdn的内容展示不行,不能达到很好的效果啊

相关推荐
前端开发爱好者1 小时前
Vue3 "抛弃" Axios !用上了 专属请求库!
前端·javascript·vue.js
前端开发爱好者1 小时前
TanStack:不止于 Vue!一个库,真·通杀所有框架!
前端·javascript·vue.js
用户3802258598242 小时前
vue3源码解析:编译之编译器代码生成过程
前端·vue.js·源码阅读
2025年一定要上岸2 小时前
【Django】-10- 单元测试和集成测试(下)
数据库·后端·python·单元测试·django·集成测试
鹏北海2 小时前
vue-route-query-hook:一个用于 Vue 3 的 Composable,提供响应式参数与 URL 查询参数之间的双向同步功能
前端·javascript·vue.js
2025年一定要上岸2 小时前
【Django】-3- 处理HTTP响应
http·django
尖椒土豆sss4 小时前
关于vue3 项目中使用 eslint-plugin-vue 报错踩坑记录
vue.js·代码规范·eslint
江城开朗的豌豆4 小时前
5招轻松搞定Element-UI样式定制,让你的项目与众不同!
前端·javascript·vue.js
前端小巷子4 小时前
Vue内置动画组件 Transition
前端·vue.js·面试