javascript - vue.js和node.js前後端分離的項目,如何部署到Ubuntu伺服器
習慣沉默
習慣沉默 2017-06-08 11:02:24
0
2
1179

專案是前後端分離的項目,客戶端的前端,管理系統的前端和後端(同時寫了客戶端和管理後台的API介面)的程式碼分別在三個資料夾中,對應三個github倉庫。
開發環境中: 我在3000埠開啟後端程式碼的伺服器,8080、8081分別開啟兩個前端程式碼的伺服器並分別跨網域到3000埠實現對介面的請求,進行開發。
在伺服器中該如何部署這樣的專案呢?我用的是pm2
我的預想是:
後端程式碼放在/www/backend/的資料夾中,設定nginx,讓介面可以透過url: 'api.xxx.com/... '訪問。
此時我的兩個前端專案該怎麼部署?前端專案是透過vue-cli建立的,可以分別透過npm build取得一個dist資料夾,其中包含index.html以及靜態檔案。在伺服器中也是分別建立兩個資料夾/www/frontend/、/www/manager/存放嗎? nginx該如何設定才能存取這兩個前端專案中的index.html並且可以同時存取後端介面?是不是總共需要寫三個nginx設定檔?

習慣沉默
習慣沉默

全部回覆(2)
刘奇

兩個前端專案可以在多配置兩個server,listen不同的端口,一個nginx配置就可以。

補充

世界只因有你
server {
  listen   8080;
  root /www/fontend;
  index index.html;

  server_name xxx.com www.xxx.com;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000/api/;
  }
}

前端的nginx配置可以參考這樣。

建議:
1、後端server只需要run到本地127.0.0.1
2、前端的nginx設定反向代理存取api介面
3、另一個前端專案參照上面的設定

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板