vue+uwsgi+nginx部署路飛學城
有一天,老男孩的苑日天給我發來了兩個神祕代碼,據說是和mjj的結晶css
超哥將這兩個代碼,放到了一個網站上,你們能夠自行下載html
路飛學城django代碼
#這個代碼部署到資源服務器Django
https://files.cnblogs.com/files/pyyu/luffy_boy.zip vue代碼
#這個代碼部署到反向代理服務器 nginx 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
將node命令,添加至linux環境變量,修改/etc/profile,寫入前端
PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin
讀取文件,生效PATHvue
source /etc/profile
測試pathnode
[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項目,替換配置文件全部地址,改成服務器地址
若是下面這一步修改錯誤就要在修改正確以後從新運行一下npm run build 從新編譯一下靜態文件
sed 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js #這個操做只查看修改事後的內容 並不保存 sed -i 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js#這個會真正修改文件
確保vue的route模式是history
路徑:opt/luffy/07-luffy_project_01/src/router/index.js
export default new Router({
linkActiveClass:'is-active',
mode: 'history',//改爲history模式python
此時打包vue項目,生成一個dist靜態文件夾 nginx server 80 端口中的靜態文件填寫dist這個路徑
npm run build #打包項目
檢查dist文件夾是否包含下面兩個文件
[root@web02 07-luffy_project_01]# ls dist/ index.html static
至此vue代碼就結束了,只須要讓nginx配置,找到vue的index.html首頁文件便可
server {
#用戶訪問域名或者ip,默認是nginx的80端口
listen 80; server_name 192.168.119.12;
#url匹配 / 也就是請求地址是192.168.119.12時,進入此location,返回vue的dist下index.html路飛學城首頁 location / {
try_files $uri $uri/ /index.html;#做用是vue瀏覽器F5刷新時不會出現404 root /opt/07-luffy_project_01/dist;#靜態文件 index index.html; } }
3、配置後端代碼,解決虛擬環境,保證項目乾淨隔離
激活虛擬環境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.1mysql
這個路飛代碼數據庫用的是sqllite,不須要配置數據庫了
購物車用都的是redis,所以要啓動服務器的redis-server服務端
redis-server /etc/redis.conf
ps -ef|grep redis redis-server *:6379
經過uwsgi啓動路飛項目 在Django項目第一層目錄新建uwsgi.ini文件 填寫下面代碼
[uwsgi]
# Django-related settings # 項目的第一層目錄 也就是manage.py的同級目錄 絕對路徑 chdir = /opt/luffy_boy # 項目的第二層目錄 包含xxx.wsgi那個目錄 module = luffy_boy.wsgi # 運行Django項目的虛擬環境的絕對目錄 workon myDjango進入虛擬環境而後輸入pwd查看絕對路徑 home = /opt/venv1 # process-related settings # master master = true # maximum number of worker processes processes = 1 # 項目運行的端口號 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;#當瀏覽器以80端口訪問時走這裏 server_name 192.168.119.12; location / {
#這個root做用是給下方的index指定絕對路徑,不是root用戶的意思 root /opt/07-luffy_project_01/dist; index index.html;
#這一條參數確保vue頁面刷新時候,不會出現404頁面
try_files $uri $uri/ /index.html; }
error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } server { listen 8000;#當瀏覽器局部vue請求數據時走這裏
server_name 192.168.119.12; location / { uwsgi_pass 0.0.0.0:9000; include uwsgi_params; } } }
原理圖
項目訪問
測試帳號密碼jquery
alex
alex3714
目前代碼功能演示,演示流程:linux
- 登陸alex帳號
- 選擇免費課程,django框架學習
- 添加課程到購物車,檢查alex帳號的購物車記錄,添加成功後再redis有數據
安裝筆記
1,準備兩臺服務器 一臺充當反向代理服務器 一臺充當資源服務器
2.準備數據庫,啓動
#保證mariadb已經安裝了
yum install mariadb-server mariadb -y
systemctl start mariadb #啓動數據庫
3.準備nginx,進行反向代理
1.安裝nginx
2.修改nginx的配置文件 nginx.conf
3.修改代碼以下,截取的片斷代碼以下,參照着修改
2.路飛學城部署 vue + nginx + uwsgi + django + mysql + redis(就是一個key - value型數據庫,緩存型數據庫,內存型數據庫)
vue + django 先後端分離的項目
js html css bootstrap jquery
部署方法以下
1.前端vue部署
1.下載vue代碼,解壓縮
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
unzip 07-luffy_project_01.zip
2.配置node環境,去打包編譯vue代碼
下載node的代碼包
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
解壓縮node代碼包
tar -zxvf node-v8.6.0-linux-x64.tar.gz
配置node的PATH環境變量便可
修改PATH生效便可
3.驗證node是否正確配置(node就是如同python解釋器 npm就是如同pip軟件包管理工具)
node -v
npm -v
4.修改vue的代碼文件
由於vue須要向後臺發起請求,找到uwsgi
咱們的架構是將uwsgi隱藏在nginx後面
全部,vue(端口80)首先找的是nginx(反向代理,端口是9000),而後nginx(反向代理,端口是9000)反向代理給uwsgi (後端地址,9001)
修改方式以下
api.js路徑以下/opt/s18luffy/07-luffy_project_01/src/restful
#這裏更改你本身的服務器ip地址
sed -i "s/127.0.0.1:8000/192.168.226.128:9000/g" api.js
sed 是linux處理字符串的命令
-i 是將結果替換到文件
"s/127.0.0.1:8000/192.168.226.128:9000/g" #解釋 s是替換模式 /你想替換的內容/你想替換的結果/ g是全局替換
api.js 你想修改操做的文件
5.進行打包vue,生成靜態文件夾 dist
確保你在vue的代碼文件夾
npm install #解決vue代碼所需的模塊依賴
npm run build #進行編譯打包
6.當vue打包正確完成後,生成一個dist靜態文件夾,此時就給丟給nginx去處理啦!!!
2.後端uwsgi部署
1.下載路飛代碼
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
2.安裝新的虛擬環境,解決環境依賴問題 ,能夠用requirements.txt解決依賴問題
vim 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
3.安裝這個文件 requirements.txt
pip3 install -i https://pypi.douban.com/simple -r requirements.txt
4.使用uwsgi去啓動路飛學城後端
使用uwsgi.ini配置文件方式啓動,內容以下
[uwsgi]
# Django-related settings
# the base directory (full path)
#填寫項目的絕對路徑(第一層路徑)
chdir = /opt/s18luffy/luffy_boy
# Django's wsgi file
#填寫crm第二層目錄下的wsgi.py文件的路徑
module = luffy_boy.wsgi
# the virtualenv (full path)
#填寫虛擬環境的絕對路徑
home = /root/Envs/s18luffy
# process-related settings
# master
master = true
# maximum number of worker processes
#基於uwsgi的多進程,根據cpu來優化
processes = 4
# the socket (use the full path to be safe
#若是你用了nginx反向代理,就填寫socket參數
#若是你用了nginx反向代理,就填寫socket參數
socket = 0.0.0.0:9001
#若是你沒用nginx,想直接經過瀏覽器測試後端,使用http
#http = 0.0.0.0:9001
# ... with appropriate permissions - may be needed
# chmod-socket = 664
# clear environment on exit
vacuum = true
5.用supervisor也去管理路飛的後臺
[program:s18luffy]
command=/root/Envs/s18luffy/bin/uwsgi --ini /opt/s18luffy/luffy_boy/uwsgi.ini
stopasgroup=true
killasgroup=true
3.nginx反向代理轉發
修改nginx.conf內容以下
虛擬主機1
server {
#第一個虛擬主機,監聽的80端口
listen 80;
server_name 192.168.226.128;
location / {
try_files $uri $uri/ /index.html; root /opt/s18luffy/07-luffy_project_01/dist; index index.html; } } 虛擬主機2 server { listen 9000; server_name 192.168.226.128; location / { uwsgi_pass 0.0.0.0:9001; include uwsgi_params; } } 重啓nginx生效 4.啓動redis,路飛學城用的是sqllite,不須要mysql yum install redis -y #安裝命令 systemctl start redis redis登陸命令 redis-cli 登陸命令 登陸後輸入 ping 返回一個pong表明正確啓動 5.windows訪問路飛學城首頁,查看課程列表 ,進行alex帳戶登陸 帳戶: alex 密碼: alex3714 登陸後,添加django課程信息後,能夠查看購物車信息,表明正確啓動路飛學城