vue+uwsgi+nginx部署路飛學城

時間 2019-11-17

標籤 vue+uwsgi+nginx vue uwsgi nginx 部署欄目 Nginx 简体版

原文原文鏈接

有一天，老男孩的苑日天給我發來了兩個神祕代碼，據說是和mjj的結晶html

將這兩個代碼，放到了一個網站上，你們能夠自行下載前端

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

1、將代碼搞到服務器上

在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服務器上

2、先從前端vue搞起

要在服務器上，編譯打包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，寫入vue

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

讀取文件，生效PATHnode

source /etc/profile

測試pathlinux

[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

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

至此vue代碼就結束了，只須要讓nginx配置，找到vue的index.html首頁文件便可

nginx這裏不作解釋，編譯安裝好便可ios

複製代碼
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;
        }
    }

3、配置後端代碼，解決虛擬環境，保證項目乾淨隔離

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

[root@web02 opt]# source venv1/bin/activate
(venv1) [root@web02 opt]# pip3 list
Package               Version
--------------------- ----------
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
pip                   18.1
pycrypto              2.6.1
pytz                  2018.7
PyYAML                3.13
redis                 3.0.1
requests              2.21.0
setuptools            40.6.3
shellescape           3.4.1
urllib3               1.24.1
uWSGI                 2.0.17.1
wheel                 0.32.3

這個路飛代碼數據庫用的是sqllite，不須要配置數據庫了

購物車用都的是redis，所以要啓動服務器的redis-server服務端

redis-server /etc/redis.conf

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

經過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

(venv1) [root@web02 opt]# uwsgi --ini luffy_boy/uwsgi.ini

4、配置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;
}
}
}