問題描述

項(xiàng)目是前后端分離的項(xiàng)目，客戶端的前端，管理系統(tǒng)的前端和后端(同時(shí)寫了客戶端和管理后臺(tái)的API接口)的代碼分別在三個(gè)文件夾中，對(duì)應(yīng)三個(gè)github倉庫。開發(fā)環(huán)境中: 我在3000端口開啟后端代碼的服務(wù)器，8080、8081分別開啟兩個(gè)前端代碼的服務(wù)器并分別跨域到3000端口實(shí)現(xiàn)對(duì)接口的請(qǐng)求，進(jìn)行開發(fā)。在服務(wù)器中該如何部署這樣的項(xiàng)目呢？我用的是pm2我的預(yù)想是: 后端代碼放在/www/backend/的文件夾中，配置nginx，使接口可以通過url: ’api.xxx.com/...’訪問。 此時(shí)我的兩個(gè)前端項(xiàng)目該怎么部署？前端項(xiàng)目是通過vue-cli建立的，可以分別通過npm build獲得一個(gè)dist文件夾，其中包含index.html以及靜態(tài)文件。在服務(wù)器中也是分別建立兩個(gè)文件夾/www/frontend/、/www/manager/存放嗎？nginx該如何配置才能訪問這兩個(gè)前端項(xiàng)目中的index.html并可以同時(shí)訪問后端接口？是不是一共需要寫三個(gè)nginx配置文件？

問題解答

兩個(gè)前端項(xiàng)目可以在多配置兩個(gè)server，listen不同的端口，一個(gè)nginx配置就可以。

補(bǔ)充

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.12、前端的nginx配置反向代理訪問api接口3、另一個(gè)前端項(xiàng)目參照上面的配置