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

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;
        }
}   

2.验证登录

使用刚才创建的系统管理员账号登录

至此完成项目的前后端部署