javascript - vue.js和node.js前后端分离的项目,如何部署到Ubuntu服务器
習慣沉默
習慣沉默 2017-06-08 11:02:24
0
2
1216

项目是前后端分离的项目,客户端的前端,管理系统的前端和后端(同时写了客户端和管理后台的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、另一个前端项目参照上面的配置

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板