1. 程式人生 > >vue+uwsgi+nginx部署luffty專案

vue+uwsgi+nginx部署luffty專案

在部署專案之前本人已經將前端程式碼和後端程式碼釋出在了一個網站上,大家可自行下載,當然如果有Xftp工具也可以直接從本地匯入。

django程式碼
https://files.cnblogs.com/files/pyyu/luffy_boy.zip

vue程式碼 https:
//files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

一、將程式碼搞到伺服器上

在linux上直接下載
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
在window上下載,通過lrzsz,或者xftp傳輸到linux伺服器上

解壓縮:

unzip luffy_boy.zip 
unzip 07-luffy_project_01.zip

二、先從前端vue搞起

要在伺服器上,編譯打包vue專案,必須得有node環境

1、下載node二進位制包,此包已經包含node,不需要再編譯

wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

2、解壓縮

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

3、將node命令,新增至linux環境變數,修改/etc/profile,寫入

PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin

4、讀取檔案,生效PATH

source /etc/profile

5、測試path

[[email protected] node-v8.6.0-linux-x64]# node -v
v8.6.0
[[email protected] node-v8.6.0-linux-x64]# npm -v
5.3.0

node環境有了,安裝node模組,以及打包node專案

#進入vue原始碼目錄
cd 07-luffy_project_01/ #安裝vue模組,預設去裝package.json的模組內容,如果出現模組安裝失敗,手動再裝 npm install #此時注意,你本地寫的vue程式碼,介面很可能連線的伺服器地址有問題,注意Axios.POST提交的地址,一定得傳送給django應用(如果用了nginx,就傳送給nginx的入口埠) #這裡為了試驗方便,將vue專案和django專案放在了一臺伺服器,通過nginx反向代理功能(8000埠),轉發vue請求給django(9000) #準備編譯打包vue專案,替換配置檔案所有地址,改為伺服器地址 sed -i 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js #此時打包vue專案,生成一個dist靜態資料夾 npm run build #檢查dist資料夾 [[email protected] 07-luffy_project_01]# ls dist/ index.html static

至此vue程式碼就結束了,只需要讓nginx配置,找到vue的index.html首頁檔案即可

編輯nginx.conf檔案

server {
     #使用者訪問域名或者ip,預設是nginx的80埠

        listen       80;
        server_name  192.168.119.12;
     #url匹配  /   也就是請求地址是192.168.119.12時,進入此location,返回vue的dist下index.html路飛學城首頁
        location / {
        root /opt/07-luffy_project_01/dist;
        index index.html;
        }
    }

三、配置後端程式碼,解決虛擬環境,保證專案乾淨隔離

(一)啟用虛擬環境

workon s15vuedrf

(二)通過一條命令,匯出本地的所有軟體包依賴

pip3 freeze >  requirements.txt 

(三)將這個requirements.txt 傳至到伺服器,在伺服器的新虛擬環境中,安裝這個檔案,就能安裝所有的軟體包了

pip3 install -r  requirements.txt

這個檔案內容如下:專案所需的軟體包都在這裡了

[[email protected] opt]# cat 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
    uWSGI==2.0.17.1

這個路飛程式碼資料庫用的是sqllite,不需要配置資料庫了

購物車用都的是redis,因此要啟動伺服器的redis-server服務端

redis-server /etc/redis.conf

ps -ef|grep redis
redis-server *:6379

(四)通過uwsgi啟動路飛專案

準備uwsgi 支援高併發的啟動python專案(注意uwsgi不支援靜態檔案的解析,必須用nginx去處理靜態檔案)

1.安裝uwsgi

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

2、學習uwsgi的使用方法

#通過uwsgi啟動一個python web檔案
uwsgi --http :8000 --wsgi-file   s15testuwsgi.py
        --http 指定http協議 
        --wsgi-file  指定一個python檔案

#通過uwsgi啟動django專案,並且支援熱載入專案,不重啟專案,自動生效 新的 後端程式碼

uwsgi --http  :8000 --module s15drf.wsgi    --py-autoreload=1

        --module 指定找到django專案的wsgi.py檔案

3、使用uwsgi的配置檔案,啟動專案

建立一個uwsgi.ini配置檔案

touch uwsgi.ini

寫入引數資訊

[uwsgi]
# Django-related settings
# the base directory (full path)
#指定專案的絕對路徑的第一層路徑!!!!!!!!!!!!!!!!!!!!!!!!
chdir           = /opt/s15vuedrf/luffy_projec/

# Django's wsgi file
#  指定專案的 wsgi.py檔案!!!!!!!!!!!!
#  寫入相對路徑即可,這個引數是以  chdir引數為相對路徑
module          = luffy_projec.wsgi

# the virtualenv (full path)::
# 寫入虛擬環境直譯器的 絕對路徑!!!!!!
home            = /root/Envs/s15vuedrf
# 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:8000

#這個引數是uwsgi啟動一個http連線,當你不用nginx只用uwsgi的時候,使用這個引數
#這個引數是uwsgi啟動一個http連線,當你不用nginx只用uwsgi的時候,使用這個引數
#這個引數是uwsgi啟動一個http連線,當你不用nginx只用uwsgi的時候,使用這個引數
#這個引數是uwsgi啟動一個http連線,當你不用nginx只用uwsgi的時候,使用這個引數
#這個引數是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
    

(五)supervisor程序管理工具

1、將linux程序執行在後臺的方法有哪些

  第一個,命令後面加上 & 符號

python manage.py runserver & 

  第二個 使用nohup命令

  第三個使用程序管理工具

2、安裝supervisor,使用python2的包管理工具 easy_install ,注意,此時要退出虛擬環境!!!!

yum install python-setuptools
easy_install supervisor

3、

supervisord -c  /etc/supervisor.conf

 

通過命令,生成一個配置檔案,這個檔案就是寫入你要管理的程序任務

echo_supervisord_conf > /etc/supervisor.conf

4、編輯這個配置檔案,寫入操作  django專案的 命令

vim /etc/supervisor.conf  

#直接到最底行,寫入以下配置

[program:s15luffy]
command=/root/Envs/s15vuedrf/bin/uwsgi  --ini  /opt/s15vuedrf/luffy_projec/uwsgi.ini

5、啟動supervisord服務端,指定配置檔案啟動

supervisord -c  /etc/supervisor.conf

6、通過supervisorctl管理任務

supervisorctl -c /etc/supervisor.conf 

7、supervisor管理django程序的命令如下

#supervisorctl直接輸入命令會進入互動式的操作介面
>  stop s15luffy 
>  start s15luffy 
>  status s15luffy 

8、啟動luffy的後端程式碼

四、配置nginx,此步重要

nginx.conf配置如下

#第一個server虛擬主機是為了找到vue的dist檔案, 找到路飛的index.html
server {
        listen       80;
        server_name  192.168.13.79;
        
        #當請求來自於 192.168.13.79/的時候,直接進入以下location,然後找到vue的dist/index.html 
        location / {
            root   /opt/s15vuedrf/07-luffy_project_01/dist;
            index  index.html;
        }
        
    }
    
#由於vue傳送的介面資料地址是 192.168.13.79:8000  我們還得再準備一個入口server
server {
    listen 8000;
    server_name  192.168.13.79;
    
    #當接收到介面資料時,請求url是 192.168.13.79:8000 就進入如下location
    location /  {
        #這裡是nginx將請求轉發給  uwsgi啟動的 9000埠
        uwsgi_pass  192.168.13.79:9000;
        # include  就是一個“引入的作用”,就是將外部一個檔案的引數,匯入到當前的nginx.conf中生效
        include /opt/nginx112/conf/uwsgi_params;
    }
}

啟動nginx

./sbin/nginx  #直接啟動