当前位置：首页 > news >正文

将django+vue项目发布部署到服务器

news 2025/7/1 15:54:49

1.部署django后端服务

部署架构

在这里插入图片描述

1.1 下载依赖插件

pip3.8 freeze > requirements.txt

在这里插入图片描述

1.2 安装依赖插件

pip3 install -r requirements.txt

1.3 安装mysql数据库

apt install mysql-server

在这里插入图片描述
初始化数据库

CREATE USER 'admin'@'%' IDENTIFIED WITH mysql_native_password BY '123456';
GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

创建数据库

CREATE DATABASE devops_api CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

在这里插入图片描述

1.4 上传项目代码，并修改配置文件

vim devops_api/settings.py
DEBUG = False  #关闭调试模式
ALLOWED_HOSTS = [*]  #允许所有主机部署
#修改数据库的配置为本地
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'devops_api','USER': 'admin','PASSWORD': '123456','HOST': '127.0.0.1','PORT': '3306',}
}

1.4 配置启动uwsgi 服务

pip3 install uwsgi

root@devops:/home/devops/devops_api/uwsgi# cat uwsgi.ini 
[uwsgi]
#项目目录
chdir = /home/devops/devops_api
# 指定 sock 的文件路径
socket =/home/devops/devops_api/uwsgi/uwsgi.sock 
#指定监听端口
http = 0.0.0.0:8002
#静态资源
static-map=/static=/home/devops/devops_api/static
# wsgi 文件(django 入口)
wsgi-file=devops_api/wsgi.py
# 进程个数
processes = 4
# 指定项目的应用
# module = devops_api.wsgi
# 进程 pid
pidfile = /home/devops/devops_api/uwsgi/uwsgi.pid
# 日志路径
daemonize = /home/devops/devops_api/uwsgi/uwsgi.log

服务启动脚本

cat /etc/systemd/system/uwsgi.service
[Unit]
Description=HTTP Interface Server
[Service]
Type-forking
ExecStart=/usr/local/bin/uwsgi --ini /home/devops/devops_api/uwsgi/uwsgi.ini 
ExecReload=/bin/ki11-s HUP $MAINPID
Restart=always
[Install]
WantedBy=multi-user.target

在这里插入图片描述

1.5 配置启动nginx

apt -y install nginx
root@devops:/etc/nginx/conf.d# cat devops_api.conf server {listen    8001 default_server;server_name _;location / {include   uwsgi_params;        uwsgi_pass unix:/home/devops/devops_api/uwsgi/uwsgi.sock;}
}  
systemctl restart nginx

1.6 测试启动后端服务

python3 manage.py runserver 127.0.0.1:9000

如图所示证明后端服务启动正常
在这里插入图片描述

1.7 初始化后端数据库

python3  manage.py migrate   
python3  manage.py createsuperuser

在这里插入图片描述

2.部署vue前端服务

2.1 修改前端代码指向后端api地址

const instance = axios.create({baseURL: 'http://127.0.0.1:8001/api/',timeout: 10000
});

在这里插入图片描述

2.2 打包前端项目

在这里插入图片描述

将前端编译代码上传到目标服务器的指定目录

2.3 配置启动前端nginx

root@devops:/etc/nginx/conf.d# cat devops_web.conf server {listen    80;server_name _;root /home/devops/devops_web;location / {try_files $uri /index.html;}
}