部署前后端分離項目

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

准備項目

1.將前端vue項目包和后端django項目包上傳服務器,通過lrzsz,直接從windows拖進linux中

2.解壓縮操作

前端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文件找到bin目錄執行 pwd   獲取到node的路徑

4.將node命令添加到環境變量  --- vim /etc/profile
    
   #     PATH = $PATH:/opt/node-v8.6.0-linux-x64/bin
  再讀取文件生效PATH ---  source  /etc/profile

5.測試環境  node -v  查看版本,    v8.6.0

編譯打包前端vue文件

1.進入vue源碼目錄 cd    /opt / vue_project/
   #安裝vue模塊,默認去裝package.json的模塊內容,如果出現模塊安裝失敗,手動再裝 
   #npm  install
2.根據本地寫的vue代碼,處理接口連接的服務器地址,注意Axios.POST提交的地址,一定發送給django應用,(如果用了nginx,就發送給nginx的入口端口)

    #找到  /opt/vue_project/src/restful/api.js
    #更改接口內地址原本可能是127.0.0.0.1:8000/,改成現在的服務器ip地址+端口   sed -i "s/127.0.0.1/192.168.220.128/g" /opt/vue_project/src/restful/api.js

3.編譯打包vue源碼 ,生成一個dist靜態文件夾  
    #npm run build

4.查看dist里面有  index.html static   即正常

 

配置nginx

配置nginx.conf

        #虛擬主機1，用於找到vue頁面
            server {
                listen       80;
                server_name loaclhost;
                location / {
                    root  /opt/vue_project/dist;
                    index index.html;
                }
         }
        #虛擬主機2，用於反向代理，找到django
                server{
                    listen 8000;
                    server_name  192.168.220.128;

                    location / {
                        include uwsgi_params;
                        uwsgi_pass 0.0.0.0:9999;
                       }
                }   
        
配置完畢后重啟  nginx -s nginx.conf

 

 配置后端代碼(創建配置虛擬環境,保證項目干凈隔離)

1.創建虛擬環境  mkvirtualenv   vue_django
2.安裝項目所需的依賴模塊.
    #windows下  執行pip3 freeze >  requirements.txt 
3.在linux下通過命令安裝 
# pip3 install -i https://pypi.douban.com/simple -r requirements.txt 

4. 安裝uwsgi 啟動后端
 #pip3 install uwsgi
  
  啟動方式1:uwsgi --socket  :8000  --module  django_project.wsgi
  啟動方式2:在項目第一層文件 touch  uwsgi.ini
  #配置uwsgi.ini文件

[uwsgi]
# Django-related settings
# the base directory (full path)
chdir           = /opt/django_project
# Django's wsgi file
module          = django_project.wsgi
# the virtualenv (full path)
home            = /root/Envs/vue_django
# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 1
# the socket (use the full path to be safe
socket          = 0.0.0.0:9999
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

 啟動redis數據庫,支撐需要的業務數據

#進入redis目錄
redis-server redis.conf

 全部部署完畢后,最后再次確認前端vue,后端django,nginx,redis正常后,通過windows中訪問瀏覽器

#查看端口以及pid
 netstat -tunlp 

...