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