前后端項目部署

參考：https://www.cnblogs.com/pyyu/p/10160874.html

一.准備工作（前面有具體步驟）

1.部署環境准備，准備python3和虛擬環境解釋器,virtualenvwrapper 

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

2.修改python3的環境變量，寫入到/etc/profile中

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

3.修改~/.bashrc

寫入變量

4.新建一個虛擬環境  vuedrf 

mkvirtualenv  vuedrf 

5.准備前后端的代碼

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

6. 解壓縮代碼

unzip xxx.zip 

7.從vue前端代碼搞起 

(1).要在服務器上，編譯打包vue項目，必須得有node環境

下載node二進制包，此包已經包含node，不需要再編譯
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文件夾
[root@web02 opt]# cd node-v8.6.0-linux-x64/
[root@web02 node-v8.6.0-linux-x64]# ls
bin  CHANGELOG.md  etc  include  lib  LICENSE  README.md  share
[root@web02 node-v8.6.0-linux-x64]# ls bin
node  npm  npx
[root@web02 node-v8.6.0-linux-x64]# ./bin/node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# ./bin/npm -v
5.3.0

將node命令，添加至linux環境變量,修改/etc/profile，寫入

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

讀取文件，生效PATH

source /etc/profile

測試path

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

(2).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文件夾
[root@web02 07-luffy_project_01]# ls dist/
index.html static

(3).至此vue代碼就結束了，只需要讓nginx配置，找到vue的index.html首頁文件即可

nginx這里不做解釋，編譯安裝好即可

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;
        }
    }

8.配置后端代碼，解決虛擬環境，保證項目干凈隔離

(1).激活虛擬環境venv1，在虛擬環境下，安裝路飛項目所需的依賴模塊

[root@web02 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

(2).這個路飛代碼數據庫用的是sqllite，不需要配置數據庫了

(3).購物車用都的是redis，因此要啟動服務器的redis-server服務端

redis-server /etc/redis.conf

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

(4).通過uwsgi啟動路飛項目

[uwsgi]
# Django-related settings
# the base directory (full path)
chdir           = /opt/luffy_boy
# Django's wsgi file
module          = luffy_boy.wsgi
# the virtualenv (full path)
home            = /opt/venv1
# 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:9000
# clear environment on exit
vacuum          = true
#后台運行uwsgi
daemonize=yes

9.配置nginx，此步重要

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  192.168.119.12;
        location / {
        root /opt/07-luffy_project_01/dist;
        index index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
           root   html;
        }
    }

server {
listen       8000;
        server_name  192.168.119.12;
        location / {
        uwsgi_pass 0.0.0.0:9000;
        include /opt/nginx/conf/uwsgi_params;
        }
        location /static {
        alias /opt/static;
}
}
}

(1).原理圖

10.項目訪問

(1).測試賬號密碼

alex
alex3714

目前代碼功能演示，演示流程：

1. 登錄alex賬號
2. 選擇免費課程，django框架學習
3. 添加課程到購物車，檢查alex賬號的購物車記錄，添加成功后再redis有數據