centos7部署前后端分离项目的过程

概述

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

~~