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