概述
本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程。
前端项目名为：vue_project；后端项目名为：django_project。
将这两个项目放在/opt/whw2这个目录下。
nodejs对vue项目的配置
下载解压node的压缩包
cd /opt wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz tar -zxvf node-v8.6.0-linux-x64.tar.gz
将node的bin目录添加进环境变量
在默认情况下，node的bin目录是：/opt/node-v8.6.0-linux-x64/bin
我们可以把node的根目录修改下名字，看起来好看点：
mv node-v8.6.0-linux-x64/ nodejs
然后把目录 /opt/nodejs/bin 目录加入到环境变量：
vim /etc/profile
在最后一行的PATH变量（之前添加的，如果没添加过需要先执行$PATH看一下当前的环境变量的值）加入上面的目录（注意用冒号隔开）：
PATH='/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin:/opt/tngx231/sbin:/opt/nodejs/bin'
最后一定要记得source一下文件使配置生效：
source /etc/profile
执行下面两个命令，如果不报错说明node的环境变量添加成功了：
node -v
npm -v
效果如下：
修改vue的请求发送路径
vue需要像服务器发起请求，但是前端工程师在测试时会将这个ip设置为本机的环回地址，我们需要将这个ip设置为linux服务器的ip，端口是nginx对uwsgi反向代理的端口
# 进入项目的src/restful目录，里面有一个api.js文件
# 文件里面的ip与端口是测试用的，需要修改成nginx对uwsgi反向代理的端口
cd /opt/whw2/vue_project/src/restful
# 将测试的ip与端口改成生产环境需要用的ip与端口
sed -i "s/127.0.0.1:8000/192.168.16.142:9000/g" api.js
编译vue代码
首先需要进入vue项目的根目录
cd /opt/whw2/vue_project
执行下面的命令：
# 默认是国外的资源，这样可以指定taobao的源安装
npm config set registry https://registry.npm.taobao.org
#找到package.json然后安装模块,如同pip install
npm install
#这一步会生成dist静态文件夹,vue开发的首页在这个index.html
npm run build
执行到最后一步的时候会在vue_project中生成一个dist目录，里面是项目开发的首页。
上面的2、3步其实可以在别的机器上执行也是可以的，目的其实是得到dist这个目录（注意ip与端口一定得是最终部署的linux服务器的ip与端口）
另外需要记住这个dist的目录，后面配置nginx的时候会用到：/opt/whw2/vue_project/dist
nginx的配置
nginx.conf文件中的配置如下:
#需要找到第一个虚拟主机,配置dist的静态文件夹即可
#第一个虚拟主机的配置
server {
listen 80;
server_name localhost; location / {
root /opt/whw2/vue_project/dist;
index index.html index.htm;
# 确保不出现404
try_files $uri $uri/ /index.html;
}
## 其他配置略 xxxxx
} #第二个虚拟主机的配置,用作反向代理——将请求转发给后台程序
server {
# 9000是nginx用作反向代理的端口
listen 9000;
server_name localhost;
location / {
include uwsgi_params;
# 9999是对应uwsgi的端口，uwsgi也要配置成9999端口
uwsgi_pass 127.0.0.1:9999;
}
}
温馨提示：
如果之前存在别的项目的nginx.conf文件，一定要记得备份一下！
cp nginx.conf nginx.conf.crm_bak
后端、uwsgi与虚拟环境的配置
后端django程序的配置只需要改一下settings.py中的ALLOWED_HOSTS这个列表即可~
测试的话直接 "*" 就好了：
ALLOWED_HOSTS = ["*"]
uwsgi文件的配置
在项目的第一层创建一个uwsgi.ini文件，然后在里面写入：
[uwsgi]
# Django-related settings
# 项目第一层目录的绝对路径
chdir = /opt/whw2/django_project# 自动找项目第二层路径下的uwsgi.py文件
module = django_project.wsgi
# 虚拟环境的绝对路径
home = /root/Envs/whw_l
# process-related settings
# master
master= true
# maximum number of worker processes
processes = 4
# 注意 这个9999端口一定要跟nginx反向代理配置的端口保持一致
socket = 0.0.0.0:9999
# clear environment on exit
vacuum = true
# 记录pid与日志的文件
pidfile=uwsgi.pid
daemonize=uwsgi.log
虚拟环境的配置
先激活一个虚拟环境
mkvirtualenv whw_l
解决运行后台项目所需要的依赖环境，这里我用的是requirements.txt文件安装的：
pip3 install -r requirements.txt -i https://pypi.douban.com/simple
开启redis服务
由于本项目用到了redis数据库，因此还得在服务端启动redis服务。
# 如果之前没有安装的话，需要先安装一下
yum install redis -y
# 启动redis服务
systemctl start redis
启动uwsgi与nginx
启动uwsgi服务
后台启动uwsgi服务加一个 -d 参数就好了：
注意：前面是虚拟环境下的uwsgi的绝对路径！
/root/Envs/whw_l/bin/uwsgi -d --ini /opt/whw2/diango_project/uwsgi.ini
启动nginx
如果之前没有开启nginx进程：
nginx
如果之前开启了nginx进程，重启：
(whw_l) [root@bogon opt]# nginx -t
nginx: the configuration file /opt/tngx231//conf/nginx.conf syntax is ok
nginx: configuration file /opt/tngx231//conf/nginx.conf test is successful
(whw_l) [root@bogon opt]# nginx -s reload
细节说明
防火墙问题
如果你的配置检查了好几遍都没问题，但是输入网址就是登陆不上，很可能是系统防火墙没关，需要手动关闭一下防火墙：
# 软件防火墙
systemctl stop firewalld
# 内置防火墙
setenforce 0
虚拟环境部署说明
如果你用的是Python虚拟环境部署的项目，环境的路径配置有关虚拟环境的项目一定要用虚拟环境的！
（1）比如上面在配置uwsgi时的home参数：
# 虚拟环境的绝对路径
home = /root/Envs/whw_l
找虚拟环境的路径也很简单：
# 在虚拟环境中
(whw_l) [root@bogon opt]# cdvirtualenv
(whw_l) [root@bogon whw_l]# pwd
/root/Envs/whw_l
（2）开启uwsgi进程也需要虚拟环境下uwsgi的绝对路径！
在虚拟环境下找uwsgi的执行路径也很简单：
# 在虚拟环境下
(whw_l) [root@bogon opt]# which uwsgi
/root/Envs/whw_l/bin/uwsgi
~~