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/进行访问