首页  >  问答  >  正文

javascript - vue.js和node.js前后端分离的项目,如何部署到Ubuntu服务器

项目是前后端分离的项目,客户端的前端,管理系统的前端和后端(同时写了客户端和管理后台的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配置文件?

習慣沉默習慣沉默2692 天前1141

全部回复(2)我来回复

  • 怪我咯

    怪我咯2017-06-08 11:04:24

    两个前端项目可以在多配置两个server,listen不同的端口,一个nginx配置就可以。

    补充

    回复
    0
  • 世界只因有你

    世界只因有你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、另一个前端项目参照上面的配置

    回复
    0
  • 取消回复