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

2. 监听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/进行访问