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配置文件？

解决方案

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、另一个前端项目参照上面的配置

这篇关于javascript - vue.js和node.js前后端分离的项目，如何部署到Ubuntu服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！