0
0

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.3
Django 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 [email protected]
[email protected]'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/advantage

Last login: Wed Feb 21 15:55:42 2024 from 172.28.141.8
root@psh-ats-02:~# mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1119350
Server 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 its
affiliates. Other names may be trademarks of their respective
owners.

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_vue
root@psh-ats-02:/data/backup/mysql/ats_web_vue# ls
ats_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.gz
ats_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_Vue
python3 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/template

npm 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" ]; then
echo >&2 "fatal: post-receive: IS_NOT_BARE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log
exit 1
fi

unset GIT_DIR
DeployPath="/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_Vue
cd $DeployPath
echo "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.log
git checkout . >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log
git pull origin master >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

#拉取develop分支的改动到/data/django/Ats_Web_Vue_Test
cd $DeployTestPath
echo "start pull PSH_ATS_Web Develop branch" >>/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.log
git checkout . >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log
git pull origin develop >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

time=`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 $DeployPath
echo "start collect static for PSH_ATS_WEB_VUE" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

yes yes | head -1 | python3 manage.py collectstatic >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

cd $DeployTestPath
echo "start collect static for PSH_ATS_WEB_VUE Develop" >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

yes yes | head -1 | python3 manage.py collectstatic >>/data/scm_repositories/repositories/git/PSH_ATS_WEB_VUE/hooks/post-receive.log

time=`date`
echo "end collect static at time: $time." >>/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
root@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证书实现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;
    
    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 file
module= PSH_ATS_WEB_VUE.wsgi
wsgi-file= /PSH_ATS_WEB_VUE/wsgi.py
 
# static
static-map = /static=%(chdir)/template/dist/static
 
# master
master = true
 
# maximum number of worker processes
processes = 1
 
# clear environment on exit
vacuum = 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.log
pidfile = /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/进行访问

标签： 前端
本文转载自: https://blog.csdn.net/weixin_41442949/article/details/138525018
版权归原作者 我就是我是好孩子啊 所有， 如有侵权，请联系我们删除。
登录后发布评论

“web创建和部署”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航