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 

三.创建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/进行访问