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目錄，裏面是項目開發的首頁。

上面的二、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

~~