概述
本文主要讲解在安装了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
~~