vue+uwsgi+nginx部署前后端分離項目

零：背景

在開發的道路上多學一些linux知識,自學看視頻,並整理自己的博客，供大家一起來學習新的知識。

一：vue+uwsgi+nginx部署

1.1：准備代碼：

# 路飛學城django代碼
https://files.cnblogs.com/files/pyyu/luffy_boy.zip
# vue代碼
https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

1.2：部署准備

1. 部署環境准備     

⑴ . 准備python3和虛擬環境解釋器,python3,virtualenvwrapper.

　　pip3 install -i https://pypi.douban.com/simple virtualenvwrapper  
　　

⑵ . 修改python3的環境變量,寫入/etc/profile中

PATH=/opt/python36/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/opt/ruby/bin/:/root/bin

source 
⑶ . 修改 ~/.bashrc

寫入變量 　　　　　　　　　　　　　           


2.新建虛擬環境     

[root@localhost ~]# mkvirtualenv  vue1
  
  
3.准備前后端代碼     


[root@localhost opt ]# wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip      # 后端  
[root@localhost opt ]# wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip   #前端

# 如果代碼在本地，傳到服務器 使用 lrzsz 和xftp工具
復制代碼

4.解壓縮代碼      

因為下載的格式是 zip格式的,所以不能用 tar 解壓,可以使用 unzip 進行解壓 

# 如果沒有,就退出虛擬機下載unzip命令    yum install unzip 
[root@localhost opt ]#unzip luffy_boy.zip 
[root@localhost opt ]#unzip 07-luffy_project_01.zip

二：部署前端代碼

⑴ . 准備node打包環境

[root@localhost opt ]# wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

⑵ . 解壓縮node包,配置環境變量

[root@localhost ]# tar -zxf node-v8.6.0-linux-x64.tar.gz 
[root@localhost bin]# vim /etc/profile     # 添加環境
[root@localhost bin]# source /etc/profile      # 一定要讀一下*******
# 一定要 source  /etc/profile 要不然配置的環境變量不生效

vim /etc/profile

PATH="/opt/python36/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/opt/node-v8.6.0-linux-x64/bin"

⑶ . 檢測node 和 npm

[root@localhost node-v8.6.0-linux-x64]# node -v
v8.6.0
[root@localhost node-v8.6.0-linux-x64]# npm -v
5.3.0

⑷ . src/restful/api.js 修改ip

# 修改vue的請求發送路徑,vue得像服務器發起請求,修改127.0.0.1為linux的ip地址

進入虛擬機 workon django1

(django1) [root@localhost ~]# cd /opt/07-luffy_project_01

# 進入到 src/restful/api.js 修改ip
# 注意 : 修改ip為自己的ip 
# 快速整體修改ip : 
(django1) [root@localhost 07-luffy_project_01]# vim src/restful/api.js
(django1) [root@localhost 07-luffy_project_01]# sed -i "s/127.0.0.1/192.168.190.11/g" src/restful/api.js  

(5) . 開始編譯vue的代碼

# 輸入npm install  進行打包
(django1)  [root@localhost 07-luffy_project_01]# npm install
(django1)  [root@localhost 07-luffy_project_01]# echo $?     #查看命令是否成功 返回0
(django1)  [root@localhost 07-luffy_project_01]# npm run build  
# 這兩條都正確配置之后，就會生成一個 dist 靜態文件目錄，整個項目的前端內容和index.html都在這里了

[root@localhost 07-luffy_project_01]# ls
build   dist        node_modules  package-lock.json  src
config  index.html  package.json  README.md          static

# 得到一個dist文件夾  進行前后端的部署


# 建議采取以下的方式
由於網速問題,下載包可能超級慢
#修改npm的下載源,如同pip 更改豆瓣源一樣 

npm config set registry https://registry.npm.taobao.org

npm install  #找到package.json然后安裝模塊,如同pip install

npm run build   #這一步會生成dist靜態文件夾,路飛首頁在這index.html

(6).配置nginx.conf,此步重要！內容如下

#第一個server虛擬主機是為了找到vue的dist文件， 找到路飛的index.html
server {
       listen       80;
       server_name  192.168.190.11;
       #只需要找到第一個虛擬主機,配置dist的靜態文件夾即可
       #第一個虛擬主機的配置
       location / {
       root /opt/07-luffy_project_01/dist;
       index index.html;
       #確保刷新不出現404
       try_files $uri $uri/ /index.html;
       #這一條參數確保vue頁面刷新時候，不會出現404頁面
        }
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
          root   html;
        }
    }

#第二個虛擬主機的配置,用作反向代理
  server {
       listen     9000    ;
       server_name  localhost;
       location / {
       include uwsgi_params;
       uwsgi_pass 127.0.0.1:9999;
       #  include /opt/tngx231/conf/uwsgi_params;
       #  include  uwsgi_params;
        }
         # location /static {
           # alias /opt/static;
          #}
}


        

# 注意:
# nginx 在虛擬環境配置和物理主機配置 沒有區別
# 要分清虛擬環境和物理主機

(django1) [root@bogon luffy_boy]# vim /opt/tngx231/conf/nginx.conf

(django1) [root@bogon luffy_boy]# 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

(django1) [root@bogon luffy_boy]# nginx 
(django1) [root@bogon luffy_boy]# nginx -s reload
# 如果nginx沒有啟動 nginx -s reload會出錯

三：后端uwsgi+django的部署

⑴ . 激活虛擬環境

[root@localhost ~]# cd /opt/luffy_boy
[root@localhost luffy_boy]# workon django1 
(django1) [root@localhost luffy_boy]#

# worken   命令是直接進入虛擬環境

進入虛擬機 workon django1

⑵ . 導出依賴包

　　注意 : 這是導出的后端代碼所需要的依賴包,比如Django.....

　　　　 要在物理環境中,退出虛擬環境

(django1) [root@localhost luffy_boy]# deactivate   # 退出虛擬環境
[root@localhost luffy_boy]# pip3 freeze >  requirements.txt 
[root@localhost luffy_boy]# vim requirements.txt 

[root@localhost luffy_boy]# ls
;  ！  api  db.sqlite3  keys  luffy_boy  manage.py  requirements.txt  static  templates  uwsgi.ini


# 注意 此項目用的是django 2 版本   Django==2.1.4
# 復制下面的模塊到 requirements.txt

certifi==2018.11.29
chardet==3.0.4
crypto==1.4.1
Django==2.1.4
django-redis==4.10.0
django-rest-framework==0.1.0
djangorestframework==3.9.0
idna==2.8
Naked==0.1.31
pycrypto==2.6.1
pytz==2018.7
PyYAML==3.13
redis==3.0.1
requests==2.21.0
shellescape==3.4.1
urllib3==1.24.1

方式2:手動解決依賴關系
 1089  pip3 install -i https://pypi.douban.com/simple django==2.0
 1091  pip3 install -i https://pypi.douban.com/simple django-rest-framework
 1093  pip3 install -i https://pypi.douban.com/simple requests
 1095  pip3 install -i https://pypi.douban.com/simple django-redis
 1097  pip3 install -i https://pypi.douban.com/simple crypto==1.4.1
 1099  pip3 install -i https://pypi.douban.com/simple pycrypto==2.6.1

⑶ . 將依賴上傳到服務器並安裝

　　將 requirements.txt 文件上傳到服務器,在服務器的虛擬環境中,安裝這個文件,就可以安裝所需要的依賴包.

[root@localhost luffy_boy]# workon django1 

(django1)  [root@localhost luffy_boy]#  pip3 install -r  requirements.txt  

⑷ . 准備 uwsgi

uwsgi 支持高並發啟動的項目,

注意 : uwsgi 不支持靜態文件的解析,必須用 nginx 去處理靜態文件

# 安裝 uwsgi 
(django1) [root@localhost luffy_boy]#  pip3 install -i https://pypi.douban.com/simple uwsgi

⑸ . 配置 uwsgi 文件

創建 uwsgi.ini 文件

(django1)  [root@localhost luffy_boy]# touch uwsgi.ini

(django1)  [root@localhost luffy_boy]# ls
;  ！  api  db.sqlite3  keys  luffy_boy  manage.py  requirements.txt  static  templates  uwsgi.ini
# 此時有了一個 uwsgi.ini 文件

　寫入參數

[uwsgi]
# Django-related settings
# the base directory (full path)
#指定項目的絕對路徑的第一層路徑！！！！！！！！！！！！！！
chdir           = /opt/luffy_boy

#  Django's wsgi file
#  指定項目的 wsgi.py文件！！！！！！！！！ 
#  (luffy_boy 與上面的 luffy_boy 不是一個,在上面的luffy_boy的下一層)
#  寫入相對路徑即可，這個參數是以  chdir參數為相對路徑 (/opt/s15vuedrf/luffy_boy/luffy_boy/wsgi.py)
module          = luffy_boy.wsgi


# the virtualenv (full path)
# 寫入虛擬環境解釋器的 絕對路徑！！！！！！
home            = /root/Envs/django1

# process-related settings
# master
master          = true
# maximum number of worker processes
#指定uwsgi啟動的進程個數                
processes       = 1

#這個參數及其重要！！！！！！
# the socket (use the full path to be safe
#socket指的是，uwsgi啟動一個socket連接，當你使用nginx+uwsgi的時候，使用socket參數
socket          = 0.0.0.0:9999

#這個參數是uwsgi啟動一個http連接，當你不用nginx只用uwsgi的時候，使用這個參數
#http  =  0.0.0.0:8000

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

⑹ . 使用 uwsgi 配置文件啟動項目 (后面可以使用 supervisor 去啟動)

(django1) [root@localhost luffy_boy]# uwsgi --ini  uwsgi.ini 

(7).還得啟動redis,才能添加購物車

復制代碼
這個路飛代碼數據庫用的是sqllite，不需要配置數據庫了
購物車用都的是redis，因此要啟動服務器的redis-server服務端

最省事的安裝
yum install redis -y 
systemctl start redis

項目訪問 
將商品添加到購物車,查看redis中的數據
登錄賬戶密碼
alex 
alex3714

四: supervisor 進程管理工具

supervisor 是基於 python 的任務管理工具，用來自動運行各種后台任務，當然你也能直接利用 nohup 命令使任務自動后台運行，但如果要重啟任務，每次都自己手動 kill 掉任務進程，這樣很繁瑣，而且一旦程序錯誤導致進程退出的話，系統也無法自動重載任務。

由於supervisor在python3下無法使用，因此只能用python2去下載！！！！！！

⑴ . 安裝 supervisor

　使用python2的包管理工具, easy_install ,此時要退出虛擬環境.

[root@localhost luffy_boy]# yum install python-setuptools  # 安裝python2的包管理工具

[root@localhost luffy_boy]# easy_install supervisor

⑵ . 生成響應的配置文件

[root@localhost luffy_boy]#echo_supervisord_conf > /etc/supervisor.conf
# 命令生成一個配置文件,這個文件就是寫入要管理的進程任務

⑶ . 編輯配置文件

[root@localhost luffy_boy]#vim /etc/supervisor.conf  
# 直接到最底行，寫入以下配置
        [program:django1]
        command=/root/Envs/s15vuedrf/bin/uwsgi  --ini  /opt/django1/luffy_boy/uwsgi.ini

⑷ . 啟動supervisord服務端，指定配置文件啟動

supervisord -c  /etc/supervisor.conf

⑸ . 通過supervisorctl管理任務

supervisorctl -c /etc/supervisor.conf 

⑹ . supervisor管理django進程的命令如下

supervisorctl直接輸入命令會進入交互式的操作界面
>  stop django1 
>  start django1
>  status django1

這樣以后我們就可以使用 supervisor 去管理Django進程了.

原理圖