今天記錄一下前后端分離部署的大概流程，復(fù)習(xí)一下部署的流程和知識(shí)點(diǎn)，話不多說(shuō)上代碼

前端

1：先從前端部署，準(zhǔn)備源代碼上傳到服務(wù)器
先準(zhǔn)備前端源代碼，這里我們用vue項(xiàng)目來(lái)做試驗(yàn)，將源代碼發(fā)送到服務(wù)器，可以用scp/xftp看個(gè)人愛(ài)好吧
我這里圖方便就用xftp工具，上傳vue前臺(tái)源碼和后臺(tái)server源碼到Centos服務(wù)器上

image.png

2：在服務(wù)器上執(zhí)行解壓縮命令

unzip  vue.zip  

image.png

3：對(duì)前端項(xiàng)目打包，需要配置前端打包環(huán)境，所以安裝node
打開(kāi)node官網(wǎng)如下網(wǎng)址

image.png

復(fù)制如下下載地址

image.png

ps：這里也可以選擇liunx的對(duì)應(yīng)2進(jìn)制的源碼安裝包，可以直接wget命令下載，解壓縮配置path，無(wú)需編譯就可以使用了
centos服務(wù)器上執(zhí)行

image.png

image.png

tar  -zxvf   node-v8.6.0-linux-x64.tar.gz

4:解壓完畢后可以直接進(jìn)入node文件下面，查看，看到bin目錄下面已經(jīng)有對(duì)應(yīng)的npm、npx環(huán)境了，如果沒(méi)有，那么需要自行編譯make啦

image.png

5：使用pwd獲取路徑，加入到環(huán)境變量中,path結(jié)尾就好啦

[root@localhost  bin]#pwd
/opt/node-v16.9.0-linux-x64/bin
[root@localhost  bin]#vim  /etc/profile

效果圖

image.png

image.png

6:重新讀取/etc/profile，加載node的環(huán)境，查看是否正常

[root@localhost  bin]#source  /etc/profile
[root@localhost  bin]#node  -v
[root@localhost  bin]#npm  -v

image.png

7:進(jìn)入vue源碼目錄，修改axios的請(qǐng)求地址，不然發(fā)起請(qǐng)求就會(huì)報(bào)錯(cuò)

image.png

ps：這里的數(shù)據(jù)提交地址，應(yīng)該發(fā)給 代理服務(wù)器，也就是9000端口，然后再通過(guò)9000端口，轉(zhuǎn)發(fā)給uwsgi，也就是9005端口
我們使用sed批量修改一下

#sed命令   -i參數(shù) 是 把替換結(jié)果寫(xiě)入到文件
#  's/127.0.0.1:8000/192.168.178.143:9000/g'     
#  s是替換指令  /你要替換的內(nèi)容/替換之后的內(nèi)容/    g  是 全局替換，global的意思
[root@localhost restful]# sed  -i  's/127.0.0.1:8000/192.168.3.66:9000/g' ./api.js

8:安裝項(xiàng)目的依賴

#安裝淘寶cnpm進(jìn)行加速npm下載
[root@localhost restful]# npm --registry https://registry.npm.taobao.org install

9:打包生成dist文件

[root@localhost vue]# npm run  build

10:修改nginxc.conf 文件，添加一個(gè)server，返回前端項(xiàng)目的vue頁(yè)面就可以了

[root@localhost /]# vim   /opt/tengine-2.3.3/conf/nginx.conf 
   #添加第二個(gè)虛擬主機(jī)，給vue項(xiàng)目前端使用
   server {
        listen 81;
        server_name _;
        location / {
                root /opt/vue/dist;
                index index.html;

        }

    }

image.png

到這里，前端部署配置結(jié)束啦。。。。

后端

1：后端代碼上傳到Centos服務(wù)器上，因?yàn)槲业谝徊揭呀?jīng)上傳了，這里直接解壓

[root@localhost opt]#unzip  server.zip

2：解壓之后，安裝依賴，使用虛擬環(huán)境安裝不通項(xiàng)目環(huán)境

[root@localhost opt]#virtualenv  --python=python3 course
[root@localhost opt]# source   ./course/bin/activate

ps:創(chuàng)建一個(gè)名為course的虛擬環(huán)境,并且激活它

image.png

3：上傳項(xiàng)目的requirements.txt到Centos服務(wù)器上，安裝依賴

(course) [root@localhost opt]# pip3 install   -i  https://pypi.douban.com/simple -r requirement.txt

4:測(cè)試代碼是否能夠正常運(yùn)行

(course) [root@localhost opt]# python3  server/manage.py   runserver 0.0.0.0:8899 

image.png

image.png

5:測(cè)試通過(guò)之后，配置uwsgi.ini，uwsig.ini內(nèi)容如下

(course) [root@localhost luffy_boy]# cat  ../uwsgi.ini 
[uwsgi]
# Django-related settings
# the base directory (full path)
#  填寫(xiě)crm項(xiàng)目的第一層絕對(duì)路徑
chdir           = /course/server
# Django's wsgi file
# 填寫(xiě)crm項(xiàng)目第二層的相對(duì)路徑，找到第二層目錄下的wsgi.py
# 這里填寫(xiě)的不是路徑，是以上一個(gè)參數(shù)為相對(duì)，找到第二層項(xiàng)目目錄下的wsgi.py文件
module          = luffy_boy.wsgi
# the virtualenv (full path)
# 填寫(xiě)虛擬環(huán)境解釋器的第一層工作目錄
home            =/opt/course
# process-related settings
# master
master          = true
# maximum number of worker processes
# 代表定義uwsgi運(yùn)行的多進(jìn)程數(shù)量，官網(wǎng)給出的優(yōu)化建議是 2*cpu核數(shù)+1 ，單核的cpu填寫(xiě)幾?
# 如果是單進(jìn)程，十萬(wàn)個(gè)請(qǐng)求，都丟給一個(gè)進(jìn)程去處理
# 3個(gè)工作進(jìn)程，十萬(wàn)個(gè)請(qǐng)求，就分給了3個(gè)進(jìn)程去分?jǐn)偺幚?processes       = 3

# the socket (use the full path to be safe
# 這里的socket參數(shù)，是用于和nginx結(jié)合部署的unix-socket參數(shù)，這里臨時(shí)先暫停使用
# 使用此協(xié)議運(yùn)行后臺(tái)，就無(wú)法通過(guò)瀏覽器訪問(wèn)了，協(xié)議不一樣
socket          = 0.0.0.0:9005
#  線上不會(huì)用http參數(shù)，因?yàn)閷?duì)后端是不安全的，使用socket參數(shù)是安全的連接，用nginx反向代理去訪問(wèn)
# 后端程序是運(yùn)行在防火墻內(nèi)部，外網(wǎng)是無(wú)法直接訪問(wèn)的
# 臨時(shí)使用http參數(shù)，便于我們用瀏覽器調(diào)試訪問(wèn)
#http =  0.0.0.0:8000

# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

6:此時(shí)給supervisor再添加一個(gè)任務(wù)，用于管理

vim  /etc/supervisord.conf

[program:course]
command=/opt/course/bin/uwsgi --ini /opt/server/uwsgi.ini  ;supervisor其實(shí)就是在幫你執(zhí)行命令而已！      
autostart=true       ; 在supervisord啟動(dòng)的時(shí)候也自動(dòng)啟動(dòng)
startsecs=10         ; 啟動(dòng)10秒后沒(méi)有異常退出，就表示進(jìn)程正常啟動(dòng)了，默認(rèn)為1秒
autorestart=true     ; 程序退出后自動(dòng)重啟,可選值：[unexpected,true,false]，默認(rèn)為unexpected，表示進(jìn)程意外殺死后才重啟
stopasgroup=true     ;默認(rèn)為false,進(jìn)程被殺死時(shí)，是否向這個(gè)進(jìn)程組發(fā)送stop信號(hào)，包括子進(jìn)程
killasgroup=true     ;默認(rèn)為false，向進(jìn)程組發(fā)送kill信號(hào)，包括子進(jìn)程

image.png

7:此時(shí)重啟supervisord進(jìn)程，把新的任務(wù)也加進(jìn)去
先殺死所有的supervisor進(jìn)程吧

(course) [root@localhost server]# ps -ef   | grep super
(course) [root@localhost server]# pkill -9 supervisor #殺死supervisor進(jìn)程，用于重啟
(course) [root@localhost server]# pkill -9 uwsgi    #殺死crm的進(jìn)程，用于待會(huì)重啟

image.png

8:啟動(dòng)服務(wù)，檢測(cè)下?tīng)顟B(tài)

supervisorctl -c /etc/supervisord.conf

9：此時(shí)發(fā)現(xiàn)還差一個(gè)代理服務(wù)器的配置，修改nginx.conf如下

#再添加一個(gè)虛擬主機(jī)，作用是給后臺(tái)的反向代理使用
server {
    #這里應(yīng)該填寫(xiě)9000的代理服務(wù)器端口
    listen 9000;
    server_name  _;
    # nginx的9000代理服務(wù)器，接收到任意請(qǐng)求之后，直接轉(zhuǎn)發(fā)給后端的uwsgi
    location / {
      uwsgi_pass   0.0.0.0:9005;
      include  uwsgi_params;
     }
}

10:重啟nginx，然后訪問(wèn)測(cè)試

nginx -s reload

11:安裝redis且啟動(dòng)

yum install  redis -y   
systemctl start redis  

最后添加一行代碼到nginx中的配置文件中

image.png

OK,至此前后端分離項(xiàng)目，部署完成。。。。