Linux之部署先後端分離項目

1、部署前端代碼

部署前端代碼,就是一些靜態文件,丟給nginx去解析
前端node js + vue的部署 + nginx的部署

一、下載vue的代碼

wget https://files.cnblogs.com/files/songzhixue/07-luffy_project_01.zip

二、編譯vue的代碼

編譯vue的代碼,生成dist靜態文件夾,須要用到node js解釋器環境

# 下載nodejs的源代碼包
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可執行程序

# 進入目錄/opt/s20luff/node-v8.6.0-linux-x64/bin # 將上面的路徑加到/etc/profile中的PATH環境變量裏 # 配置完須要執行下
source /etc/profile node -v npm -v

五、修改vue的請求發送路徑

修改vue的請求發送路徑,vue向服務器發起請求,修改127.0.0.1爲linux的ip地址

# 進入前端頁面(07-luffy_project_01 )找到src文件下的restful,修改ip
sed -i "s/127.0.0.1:8000/192.168.61.129:9000/g"  api.js

 

修改api.js中的請求ip

六、開始編譯vue的代碼

# 因爲網速問題,下載包可能超級慢 # 修改npm的下載源,如同pip 更改豆瓣源同樣  # 進入/node-v8.6.0-linux-x64/bin/ 將npm的路徑添加到環境變量 # 修改安裝源·
npm config set registry https://registry.npm.taobao.org # 找到/opt/s20luff/07-luffy_project_01執行：
npm install  #找到package.json而後安裝模塊,如同pip install
 npm run build #這一步會生成dist靜態文件夾,路飛首頁在這index.html # (若是修改了vue向向服務器發起請求的ip地址,那麼咱們修改後須要從新編譯vue的代碼,也就是從新執行第六步的操做)

在這裏執行：

七、配置nginx.conf

http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; # 只須要找到第一個虛擬主機,配置dist的靜態文件夾便可
        # 第一個虛擬主機的配置
        location / { # 網站首頁的靜態文件路徑
            root   /opt/s20luff/07-luffy_project_01/dist; index index.html index.htm; # 確保刷新不出現404
            try_files $uri $uri/ /index.html; } error_page 500 502 503 504  /50x.html; location = /50x.html { root html; } } # 第二個虛擬主機的配置,用做反向代理
 server { listen 9000; server_name localhost; location / { include uwsgi_params; # django運行的ip端口
        uwsgi_pass 127.0.0.1:9999; } } }

一、客戶端訪問默認是80端口,先走nginx
二、nginx配置文件中咱們給80端口配置了,返回網站首頁的靜態文件
三、路飛學成除了首頁之外的全部請求都是用的9000端口,這時候咱們用到了反向代理

2、後端uwsgi+django的部署

1.激活虛擬環境

mkvirtualenv s20luffy workon s20luffy

2.解決運行路飛所需的依賴環境

方式二選一

方式1: 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:手動解決依賴關係 pip3 install -i https://pypi.douban.com/simple django==2.0 pip3 install -i https://pypi.douban.com/simple django-rest-framework pip3 install -i https://pypi.douban.com/simple requests pip3 install -i https://pypi.douban.com/simple django-redis pip3 install -i https://pypi.douban.com/simple crypto==1.4.1 pip3 install -i https://pypi.douban.com/simple pycrypto==2.6.1

三、下載uwsgi

下載uwsgi,編寫uwsgi.ini配置文件,去運行路飛學城後端

 

pip3 install -i https://pypi.douban.com/simple uwsgi 【在任意位置建立uwsgi.ini文件】 【注意咱們用uwsgi啓動項目的時候也要在該目錄下】 下載項目包wget https://files.cnblogs.com/files/songzhixue/luffy_boy.zip uwsgi.ini內容以下 [uwsgi] # Django-related settings # the base directory (full path) # 項目目錄的絕對路徑【第一層】
chdir           = /opt/s20luffy/luffy_boy/
# Django's wsgi file # 項目目錄的第二層目錄【wsgi同級】
module          = luffy_boy.wsgi # the virtualenv (full path) # 虛擬環境路徑【虛擬環境中執行cdvirtualenv,pwd查看路徑】
home            = /root/Envs/s20luffy # process-related settings # master
master          = true # maximum number of worker processes # 開啓的進程數
processes       = 4
# the socket (use the full path to be safe
socket          = 0.0.0.0:9999
# clear environment on exit
vacuum          = true

4.啓動uwsgi後端

# 找到uwsgi.ini這個文件的目錄下執行下面命令
uwsgi --ini uwsgi.ini # 重啓nginx # 訪問頁面

5.還得啓動redis,才能添加購物車

# 最省事的安裝
yum install redis -y systemctl start redis

六、將商品添加到購物車,查看redis中的數據

# 登陸帳戶密碼
alex alex3714