Django + Vue deployment server, nginx + uwsgi
Premise: Make sure that the running environment of the server Django + Vue is normal, and you can manually run the front-end and back-end projects
Description: Use Django to access the dict file of the front-end compilation product. The entire web service runs on port 82, the front-end accesses back-end data on port 81, and Django runs on port 83.
Project path:/data/zkos/comm/libzkos_comm/tools/performance_test/django_project/vue_template/
1. Upload the project to the server
1. Use the zkos git repository to download the code, or manually cp the code to the server
The code is placed in the /data/zkos/ directory
2. Generate front-end compilation products
npm run install
npm rundev
3.Django collects static resources
python3 manage.py collectstatic
4.Django access to vue compiled products FAQ
4.1 Cross-domain issues
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders', #Cross domain
'django_crontab', #Scheduled tasks
'PerformanceTest',
'UserInfo'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)
//api.js import axios from 'axios' axios.defaults.timeout = 60000 // request timeout axios.defaults.baseURL = 'http://10.138.8.51:81' // Production environment, server address // axios.defaults.baseURL = 'http://127.0.0.1:8000' // Development environment, backend local address axios.defaults.withCredentials = true // axios request carries cookie
4.2 The static product index.html cannot be accessed
Front-end generated product modification:
Modify the assetsPublicPath in the build in config/index.html and change it to the current directory (./) instead of the root directory (/);
build/webpack.base.conf.js
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
?'./' + config.build.assetsPublicPath
: './' + config.dev.assetsPublicPath
},
build/webpack.prod.conf.js publicPath added
output: {
publicPath: './', //Added a line
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
build/utils.js Add publicPath: ‘../../’
if (options. extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue-router jump jump mode:’ hash ‘ method
import Vue from 'vue'
import Router from 'vue-router'
import Protal from '@/components/TestViews/Protal'
Vue. use(Router)
const router = new Router({
mode: 'history',
base: '/',
Django backend setup:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['vue_template/dist'], jstatic resource entry
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "vue_template/dist/static"),
]
4.3
2. Web front-end listening port 82
Download nginx from the server to /etc/nginx and edit the nginx.conf file
Monitoring in two ways: proxy_pass and uwsgi_pass (Django backend running)
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
#Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml + rss text/javascript;
##
#Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
index index.php index.html index.htm;
autoindex off;
autoindex_exact_size off;
autoindex_localtime off;
upstream VueTest { #Define the server group referenced by uwsgi_pass
server 127.0.0.1:83; # for a web port socket
}
server {
listen 80;
root /var/www/html;
location /lastest_report/ {
index index.php index.html index.htm;
}
}
server{
listen 82; #Listening port
server_name 10.138.8.51; #Domain name address
charset utf-8;
location /static { #requested url
alias /data/zkos/comm/libzkos_comm/tools/performance_test/django_project/static/;
}
location ^~/django/{
proxy_pass https://127.0.0.1:80; #Request forwarding to server
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/zkos/comm/libzkos_comm/tools/performance_test/django_project/vue_template/dist/; #Root directory
index index.html index.htm; #Default page, entry file
try_files $uri $uri/ /index.html;
client_max_body_size 75M;
}
location @router {
rewrite ^.*$ /index.html last;
}
location /user/{
proxy_pass http://127.0.0.1:80; #Request forwarding to server
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';
}
}
server {
listen 81;
server_name 10.138.8.51;
charset utf-8;
access_log /var/log/nginx/Zkos_Comm_Vue_access.log;
error_log /var/log/nginx/Zkos_Comm_Vue_error.log;
client_max_body_size 75M;
location / {
uwsgi_pass VueTest;
include /etc/nginx/uwsgi_params;
}
}
}
3. Dango runs on port 83
Vue accesses the Django backend data interface ngnix to monitor port 81, and Dango runs on port 83.
1. uWSGI deploys the Django program, running on port 83
download uwsgi
WSGI_APPLICATION = ‘django_project.wsgi.application’
Create and compile the uwsg.ini file in the project root directory.
Note:
module = django_project.wsgi
wsgi-file= /django_project/wsgi.py
The module must be found, and the module name is consistent with the project name
[uwsgi] socket=:83 # Port for data interaction with nginx #http= 127.0.0.1:83 # the base directory (full path) The main directory of the django program chdir = /data/zkos/comm/libzkos_comm/tools/performance_test/django_project/ # Django s wsgi file module = django_project.wsgi wsgi-file= /django_project/wsgi.py # static static-map = /static=%(chdir)/vue_template/dist/static # master master = true # maximum number of worker processes processes = 1 # clear environment on exit vacuum = true #Monitor python module mtime to trigger reload (only used during development) py-autoreload=1 #Load the application in each worker instead of the master lazy-apps=true # Allows threads to be started with embedded languages. This will allow you to spawn a child thread in your app enable-threads = true #Set the maximum number of seconds to wait for the work to end in a smooth restart (not restart until the received request is processed) in a working child process. This configuration will cause the worker process to be restarted smoothly. If the worker process ends more than 8 seconds, it will be forcibly ended (ignoring previously received requests and ending directly) reload-mercy = 8 #Set the maximum log file size log-maxsize = 5000000 daemonize = /data/uwsgi_ini/zkos_comm_test/uwsgi.log pidfile = /data/uwsgi_ini/zkos_comm_test/uwsgi.pid
2 Use uwsg to distribute front-end project access, pointing to the back-end running port
server {
listen 81;
server_name 10.138.8.51;
charset utf-8;access_log /var/log/nginx/Zkos_Comm_Vue_access.log;
error_log /var/log/nginx/Zkos_Comm_Vue_error.log;client_max_body_size 75M;
location / {
uwsgi_pass VueTest;
include /etc/nginx/uwsgi_params;
}
}
http://*****:82/portal web page access
:81 backend interactive data access
3 problems encountered
3.1 How to start uwsgi.ini
uwsgi--ini uwsgi.ini
If you want to check whether the startup was successful:
ps aux | grep uwsgi
Restart
uwsgi –reload uwsgi.pid
or
sudo systemctl reload nginx
test
nginx -t
lsof -i :81; lsof -i :82; lsof -i :83
Stop
uwsgi--stop uwsgi.pid
Error message:
/usr/lib/python3/dist-packages/requests/__init__.py:89: RequestsDependencyWarning: urllib3 (1.26.14) or chardet (3.0.4) doesn’t match a supported version!
warnings.warn(“urllib3 ({}) or chardet ({}) doesn’t match a supported “
ModuleNotFoundError: No module named ‘ZKOS_COMM_TEST’
unable to load app 0 (mountpoint=”) (callable not found or import error)
restart:
uwsgi –reload uwsgi.pid
Starting uwsgi appears!!! no internal routing support, rebuild with pcre support !!!?
pip uninstall uwsgi sudo apt-get install libpcre3 libpcre3-dev pip install uwsgi --no-cache-dir
3.2 View logs?
Check if it is successful to run ps aux | grep uwsgi
Make sure the Django program successfully runs on port 83
:/data/uwsgi_ini/zkos_comm_test# touch uwsgi.log
root@zeekr-Precision-5820-Tower:/data/uwsgi_ini/zkos_comm_test# ls
uwsgi.log uwsgi.pid
root@zeekr-Precision-5820-Tower:/data/uwsgi_ini/zkos_comm_test# cat uwsgi.log
*** Starting uWSGI 2.0.22 (64bit) on [Mon Aug 14 16:58:38 2023] ***
compiled with version: 9.4.0 on 14 August 2023 08:45:07
os: Linux-5.15.0-78-generic #85~20.04.1-Ubuntu SMP Mon Jul 17 09:42:39 UTC 2023
nodename: zeekr-Precision-5820-Tower
machine: x86_64
clock source: unix
detected number of CPU cores: 20
current working directory: /data/zkos/comm/libzkos_comm/tools/performance_test/django_project
writing pidfile to /data/uwsgi_ini/zkos_comm_test/uwsgi.pid
detected binary path: /usr/local/bin/uwsgi
!!! no internal routing support, rebuild with pcre support !!!
uWSGI running as root, you can use --uid/--gid/--chroot options
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
chdir() to /data/zkos/comm/libzkos_comm/tools/performance_test/django_project/
your processes number limit is 255622
your memory page size is 4096 bytes
detected max file descriptor number: 1024
building mime-types dictionary from file /etc/mime.types...567 entry found
lock engine: pthread robust mutexes
thunder lock: disabled (you can enable it with --thunder-lock)
uwsgi socket 0 bound to TCP address :83 # Port for data interaction with nginx fd 6
uWSGI running as root, you can use --uid/--gid/--chroot options
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
Python version: 3.8.10 (default, May 26 2023, 14:05:08) [GCC 9.4.0]
Python main interpreter initialized at 0x5639e6a00b40
uWSGI running as root, you can use --uid/--gid/--chroot options
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
python threads support enabled
your server socket listen backlog is limited to 100 connections
your mercy for graceful operations on workers is 60 seconds
mapped 145840 bytes (142 KB) for 1 core
*** Operational MODE: single process ***
uWSGI running as root, you can use --uid/--gid/--chroot options
*** WARNING: you are running uWSGI as root !!! (use the --uid flag) ***
*** uWSGI is running in multiple interpreter mode ***
spawned uWSGI master process (pid: 22538)
spawned uWSGI worker 1 (pid: 22539, cores: 1)
Python auto-reloader enabled
/usr/lib/python3/dist-packages/requests/__init__.py:89: RequestsDependencyWarning: urllib3 (1.26.14) or chardet (3.0.4) doesn't match a supported version!
warnings.warn("urllib3 ({}) or chardet ({}) doesn't match a supported "
ModuleNotFoundError: No module named 'ZKOS_COMM_TEST'
unable to load app 0 (mountpoint='') (callable not found or import error)
failed to open python file /ZKOS_COMM_TEST/wsgi.py
unable to load app 0 (mountpoint='') (callable not found or import error)
*** no app loaded. going in full dynamic mode ***
3.3
root@zeekr-Precision-5820-Tower:/data/uwsgi_ini/zkos_comm_test# uwsgi –reload uwsgi.pid
signal_pidfile()/kill(): No such process [core/uwsgi.c line 1698]
4. Every deployment
1. Generate dist folder:
cd /vue_template
npm install
npm run build
2. Collect static resources and set the static folder in settings.py
cd /django/
python3 manage.py collectstatic
3. Restart
Modify the code and restart the uwsgi service uwsgi –ini uwsgi.ini
root@zeekr-Precision-5820-Tower:/data/zkos/comm/libzkos_comm/tools/performance_test/django_project# uwsgi –ini uwsgi.ini
[uWSGI] getting INI configuration from uwsgi.ini
[uwsgi-static] added mapping for /static => /data/zkos/comm/libzkos_comm/tools/performance_test/django_project//vue_template/dist/static
The test started successfully nginx -t
root@zeekr-Precision-5820-Tower:/data/zkos/comm/libzkos_comm/tools/performance_test/django_project# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
Shut down and restart nginx service sudo systemctl reload nginx
root@zeekr-Precision-5820-Tower:/var/log/nginx# sudo systemctl reload nginx