web创建和部署

Web框架

WEB使用Vue作为前端框架，Django则作为服务端提供api接口，使得前后端实现完全分离，Mysql作为数据库。

Django是Python体系下最成熟的web框架之一, 自带的admin管理后台，仅仅需要几行代码就可以做一个功能齐全的管理后台。使用Django Admin可以快速对数据库的各个数据表进行增删查改。

目前用xadmin管理后台，具体教程可以参考：

（python框架Django使用xadmin管理后台数据）https://blog.csdn.net/lm_is_dc/article/details/80677622

使用Vue渲染后台数据到前端页面，在样式组件上使用了element-ui，这是一套专门匹配 Vue.js框架的功能样式组件库。

Python 3.7.3Django 2.2.10 (通过./pip_requirements.txt可以全部安装用到的第三方库，包括Django)Mysql 5.7.19  (本地未安装Mysql，直接用的server上的Mysql数据库)node v14.17.0

–Django项目文件夹

----settings.py 配置文件（django暴露给用户可以自定义配置的文件）

----urls.py 存放路由（路径）与函数（视图函数）对应关系(路由层)

----wsgi.py wsgiref模块的socket(不考虑)

–manage.py django的入口启动文件

–Common文件夹为例

----admin.py django自带的后台管理功能 (目前没用)

----adminx.py xadmin后台管理功能

----apps.py 注册使用 （目前没用）

----migrations文件夹 里面存放ORM针对数据库相关的记录

----models.py 数据库相关的文件 模型类(orm)

----tests.py 自带的测试文件（目前没用）

----views.py 该app对应的主体功能（函数， 类）(视图层)

–templatew文件夹

----build文件夹 项目构建(webpack)相关代码

----config文件夹 配置目录，包括端口号等

----dist文件夹 项目依赖文件

----node_modules文件夹 项目依赖文件

----src文件夹 程序源代码文件夹

-------- api 放置axios请求接口信息

-------- assets文件夹 放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资源当成模块打包到JS文件中

-------- components 正常应该放置一些全局组件，但是现在存放了页面（视图）组件

-------- mock 用来模拟出接口从后台返回的数据(目前没用)

-------- router 配置路由文件，实现前台页面跳转

-------- store 配置vuex的持久化插件，实现用户信息的本地存储

-------- APP.vue 代表父组件，Vue页面入口(进入项目的初始页面)，唯一的根组件

-------- main.js 程序入口文件，整个程序中最先执行的文件

----static文件夹 放置静态资源（图片），webpack在打包时会原封不动的打包到dist文件夹中

----editorconfig：定义代码格式

----gitignore：git上传时需要忽略的文件

----package-lock.json：项目依赖包版本，锁定文件

----package.json：项目基本信息

----README.md：项目说明文件（markdown语法）

3.数据库维护

一般修改数据库的表结构，用Django的migrations进行数据迁移。

修改表中的数据，用xadmin后台或者直接进行sql操作。

工程setting.py中的数据库mysql配置：

DATABASES = {    'default': {        'ENGINE': 'django.db.backends.mysql',        'NAME': 'ats_web_vue_new',        'USER': 'root',        'PASSWORD': 'root',        'HOST': '172.28.137.66',        'OPTIONS': {'charset': 'utf8mb4'}  # 字符集为utf8mb4    }}

使用的66server上的数据库：

zhangxia@S20A017837-MAC ~ % ssh root@172.28.137.66root@172.28.137.66's password: Welcome to Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-96-generic x86_64) * Documentation:  https://help.ubuntu.com * Management:     https://landscape.canonical.com * Support:        https://ubuntu.com/advantageLast login: Wed Feb 21 15:55:42 2024 from 172.28.141.8root@psh-ats-02:~# mysql -u root -pEnter password: Welcome to the MySQL monitor.  Commands end with ; or \g.Your MySQL connection id is 1119350Server version: 5.7.19-0ubuntu0.16.04.1-log (Ubuntu)Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.Oracle is a registered trademark of Oracle Corporation and/or itsaffiliates. Other names may be trademarks of their respectiveowners.Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.mysql> show databases;mysql> use ats_web_vue_new;mysql> show tables;mysql> desc Common_project;mysql> select * from Common_project;mysql> quit

更新数据库表结构步骤：

1.新建或修改模型 （Model）

2.生成迁移文件（该文件中有实际执行的 SQL 操作）

python3 manage.py makemigrations Tools

3.迁移文件应用到数据库（数据库中的django_migrations表记录了迁移操作）

python3 manage.py migrate

4.确认表结构是否改成功

参考文档：

https://zhuanlan.zhihu.com/p/142787995

数据库定时备份：

使用的Django crontab,每天0点0分备份数据库, 备份路径/data/backup/mysql/ats_web_vue

(‘0 0 * * *’, ‘Common.commonFun.mysqldumpbackup’)

root@psh-ats-02:~# cd /data/backup/mysql/ats_web_vueroot@psh-ats-02:/data/backup/mysql/ats_web_vue# lsats_web_vue_20240214_000003.sql.gz  ats_web_vue_20240216_000003.sql.gz  ats_web_vue_20240218_000003.sql.gz  ats_web_vue_20240220_000003.sql.gz  ats_web_vue_20240222_000003.sql.gzats_web_vue_20240215_000003.sql.gz  ats_web_vue_20240217_000004.sql.gz  ats_web_vue_20240219_000004.sql.gz  ats_web_vue_20240221_000003.sql.gz

4.定时任务

工程setting.py中的定时任务配置：

CRONTAB_COMMAND_PREFIX = 'LANG_ALL=zh_cn.UTF-8'    #支持中文CRONJOBS_DIR = "/data/cronjobs_log/"CRONJOBS_FILE_NAME = "ats_web_vue.log"         #定时任务的log路径CRONJOBS = [    ('*/1 * * * *', 'OverlayList.autoTask.autoModifyTasks',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    ('*/1 * * * *', 'OverlayList.autoTask.checkBuildVersionTask',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    ('05 17 * * *', 'OverlayList.autoTask.checkLasterOverlayTask',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    ('1 */2 * * *', 'OverlayList.autoTask.checkOverlayDateTask',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    ('5 */2 * * *', 'OverlayList.autoTask.checkOverlayDelaydTask',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    # ('*/1 * * * *', 'OverlayList.autoTask.checkOnlineOverlay',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),    ('00 8 * * *', 'Common.views.tcRadrask',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'), #每天8点通知    ('0 0 * * *', 'Common.commonFun.mysqldumpbackup'),           #每天0点0分备份数据库    ('*/30 * * * *', 'Tools.RadarQuery.radarQuery.runMain',  '>>'+CRONJOBS_DIR+CRONJOBS_FILE_NAME + ' 2>&1'),]

在66server上可以用如下命令开启定时任务：

cd /data/django/ATS_Web_Vuepython3 manage.py crontab add    #添加定时任务到系统中python3 manage.py crontab show      #显示已经激活的定时任务python3 manage.py crontab remove    #移除定时任务

参考文档：https://blog.csdn.net/qq_44718932/article/details/126129948

4.log检查

定时任务的log路径

master是/data/cronjobs_log/ats_web_vue.log，develop是/data/cronjobs_log/ats_web_vue_test.log

可以查看定时任务print的错误信息，可以使用命令tail -1000 /data/cronjobs_log/ats_web_vue.log，查看文件后1000行。

处理请求的log路径

master是/data/uwsgi_ini/Ats_Web_Vue/uwsgi.log，develop是/data/uwsgi_ini/Ats_Web_Vue_Test/uwsgi.log

uwsgi配置文件中一般有写log路径，uwsgi的日志，可以查看请求失败的详细信息。

nginx代理服务器的log路径

access_log      /var/log/nginx/Ats_Web_Vue_access.log;error_log       /var/log/nginx/Ats_Web_Vue_error.log;

Django+Vue服务器简单部署

本文介绍通过nginx直接访问和通过django路由访问编译好的vue静态文件。

一.配置vue环境

在服务器上编译打包vue项目，需要配置vue环境。

1.下载node.js

下载想要的node版本：（node-v14.17.0-linux-x64.tar.xz）

https://nodejs.org/download/release/

2.上传到服务器上

scp -r /Users/mac/Desktop/node-v14.17.0-linux-x64.tar.xz root@172.XXX.XXX.66:/data/vue-node/

进入目录：cd /data/vue-node

解压：tar xvf node-v14.17.0-linux-x64.tar.xz

3.配置环境变量

vi ~/.bashrc

export PATH=$PATH:/data/vue-node/node-v14.17.0-linux-x64/bin/node

sourch ~/.bashrc

4.测试:

root@psh-ats-02:/data/vue-node# node -v v14.17.0 root@psh-ats-02:/data/vue-node# npm -v 6.14.13

二. 工程代码放到服务器上

1.手动放置工程代码到服务器（可以使用Git仓库自动部署工程到服务器）

scp -r /Users/mac/Git/PSH_ATS_WEB_VUE root@172.XX.XXX.66:/data/django/

2. 生成dist文件夹：

cd /data/django/PSH_ATS_WEB_VUE/templatenpm install npm run build

3. 收集静态资源，在settings.py中设置的静态文件夹

cd /data/django/PSH_ATS_WEB_VUE

python3 manage.py collectstatic

目前利用Git的hook机制自动部署：

root@psh-ats-02:/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks# cat /data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive#!/bin/sh #判断是不是远端仓库IS_BARE=$(git rev-parse --is-bare-repository)if [ -z "$IS_BARE" ]; thenecho >&2 "fatal: post-receive: IS_NOT_BARE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logexit 1fiunset GIT_DIRDeployPath="/data/django/ATS_Web_Vue"DeployTestPath="/data/django/Ats_Web_Vue_Test"templetePath="/data/django/ATS_Web_Vue/template"echo "GIT_DIR: $DeployPath" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log echo "===============================================" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log#拉取master分支的改动到/data/django/ATS_Web_Vuecd $DeployPathecho "start pull from PSH_ATS_WEB_VUE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log git status >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.loggit checkout . >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.loggit pull origin master >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log#拉取develop分支的改动到/data/django/Ats_Web_Vue_Testcd $DeployTestPathecho "start pull PSH_ATS_Web Develop branch" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.loggit status >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.loggit checkout . >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.loggit pull origin develop >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logtime=`date`echo "end pull at time: $time." >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log# build生成dist时间过长，所以去掉了，手动生成dist#cd $templetePath#echo "start build dist for PSH_ATS_WEB_VUE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log#npm run build >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log#time=`date`#echo "end build at time: $time." >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log#收集静态资源cd $DeployPathecho "start collect static for PSH_ATS_WEB_VUE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logyes yes | head -1 | python3 manage.py collectstatic >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logcd $DeployTestPathecho "start collect static for PSH_ATS_WEB_VUE Develop" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logyes yes | head -1 | python3 manage.py collectstatic >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logtime=`date`echo "end collect static at time: $time." >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logecho "================================================" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.logroot@psh-ats-02:/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks# 

三.创建Vue前端的nginx配置文件

监听81端口，指向dist文件中的index.html

server{listen 81;                 #监听端口server_name atsweb.xxx.xxx.xxxxxx;  #域名地址charset     utf-8;ssl on;                             #配置ssl证书实现httpsssl_certificate /etc/nginx/conf.d/SSL/psh_cert.pem;ssl_certificate_key /etc/nginx/conf.d/SSL/psh_key_with_pass.key.unsecure; ssl_session_cache shared:SSL:1m;ssl_session_timeout  5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_prefer_server_ciphers on;location /static {        #请求的url    alias /data/django/PSH_ATS_WEB_VUE/static/;} location ^~/django/{       proxy_pass https://127.0.0.1:80;    #请求转向服务器add_header Content-Type "text/plain;charset=utf-8";add_header 'Access-Control-Allow-Origin' '*' always;            add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST';}location / {            root /data/django/PSH_ATS_WEB_VUE/template/dist/;    #根目录index index.html index.htm;     #默认页面，入口文件} }

四.创建Django后台的nginx和uwsgi配置文件

1. 使用uWSGI 来部署 Django 程序

[uwsgi]socket=:83       # 用于和 nginx 进行数据交互的端口#http= 127.0.0.1:83 # the base directory (full path) django 程序的主目录chdir = /data/django/PSH_ATS_WEB_VUE/ # Django s wsgi filemodule= PSH_ATS_WEB_VUE.wsgiwsgi-file= /PSH_ATS_WEB_VUE/wsgi.py # staticstatic-map = /static=%(chdir)/template/dist/static # mastermaster = true # maximum number of worker processesprocesses = 1 # clear environment on exitvacuum = true #监控python模块mtime来触发重载 (只在开发时使用)py-autoreload=1 #在每个worker而不是master中加载应用lazy-apps=true  #允许用内嵌的语言启动线程。这将允许你在app程序中产生一个子线程enable-threads = true  #设置在平滑的重启（直到接收到的请求处理完才重启）一个工作子进程中，等待这个工作结束的最长秒数。这个配置会使在平滑地重启工作子进程中，如果工作进程结束时间超过了8秒就会被强行结束（忽略之前已经接收到的请求而直接结束）reload-mercy = 8  #设置最大日志文件大小log-maxsize = 5000000 daemonize = /data/uwsgi_ini/Ats_Web_Vue/uwsgi.logpidfile = /data/uwsgi_ini/Ats_Web_Vue/uwsgi.pid

1. 监听80端口，使用 nginx 接收的 Web 请求传递给端口为 83的 uWSGI 服务来处理

upstream VueTest {      #定义被uwsgi_pass引用的服务器组    server 127.0.0.1:83; # for a web port socket} server {    listen 80;      #监听端口    server_name xxxx.xxx.xxx.xxxxx;   #域名    charset     utf-8;    ssl on;                         #配置ssl证书实现https    ssl_certificate /etc/nginx/conf.d/SSL/psh_cert.pem;    ssl_certificate_key /etc/nginx/conf.d/SSL/psh_key_with_pass.key.unsecure;     ssl_session_cache shared:SSL:1m;    ssl_session_timeout  5m;    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;    ssl_prefer_server_ciphers on;         access_log      /var/log/nginx/Ats_Web_Vue_access.log;    error_log       /var/log/nginx/Ats_Web_Vue_error.log;     client_max_body_size 75M;     location / {            uwsgi_pass  VueTest;         ##请求转向VueTest服务器        include     /etc/nginx/uwsgi_params;    }}

最后，可以使用https://atsweb.xxx.xxx.xxx:80/或https://atsweb.xxx.xxx.xxx:81/进行访问