项目是前后端分离的项目,客户端的前端,管理系统的前端和后端(同时写了客户端和管理后台的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配置文件?
世界只因有你2017-06-08 11:04:24
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、另一个前端项目参照上面的配置