Node.js 在同一端口上运行前端和后端

我今天遇到了一个与路由有关的问题。我有两个主要代码：一个是前端，另一个是后端

前端是使用Vue.js编写的，因此它是SPA。这个webapp有点复杂，涉及很多路由和后端AJAXAPI调用

// All imports
import ...

loadMap(Highcharts);
loadDrilldown(Highcharts);
boost(Highcharts);

Vue.config.productionTip = false

Vue.use(VueCookie);
Vue.use(ElementUI, {locale});
Vue.use(VueRouter);
Vue.use(VueHighcharts, {Highcharts });
Vue.use(HighMaps);

// This is a global component declaration
Vue.component('app-oven', Devices);
Vue.component('app-sidebar', SideBar);
Vue.component('app-header', Header);
Vue.component('app-footer', Footer);
Vue.component('app-query', Query);
Vue.component('app-deviceproperties', DeviceProperties);
Vue.component('app-device', Device)
Vue.component('app-queryselection', QuerySelection)
Vue.component('app-index', Index)
Vue.component('app-index', Error)
Vue.component('app-realtime', RealTime);
Vue.component('app-login', Login)
Vue.component('app-preferences', Preferences)

const routes = [
  { path: '/index', component: Index},
  { path: '/', component: Login},
  { path: '/device/:deviceId', component: Device},
  { path: '/preferences', component: Preferences},
  { path: '*', component: Error}
];

const router = new VueRouter({
  routes: routes,
  mode: "history" // Gets rid of the # before the path
})

new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>'
})

我只在开发过程中使用了这个设置，所以我让这两个都在本地主机上同时运行，并且都有一个不同的端口。现在我想开始生产周期，但我不知道从哪里开始

最重要的是，我正在将这两个应用程序部署到运行在外部服务器上的VirtualM机器上。它已经有了一个DNS关联和一个静态IP地址，所以这已经包括在内。 当我试图在这台生产机器上同时运行这两个程序时，问题就出现了，因为它打开的端口只有端口80和端口443。我认为这在生产环境中是很正常的，但我不知道如何调整我的应用程序，以便它们仍然可以在使用单个端口的情况下彼此通信并从数据库中检索有用的信息

---

我希望我能把问题解释清楚。期待一个好的（可能很长的）答案。

我建议在内部端口3000上运行后端，让nginx监听80和443，将以“/api”开头的URL代理到3000，并直接交付前端，因为它只是一堆静态文件

这将是您的nginx配置。只需确保后端服务器具有一些api前缀，如“/api”。使用“npm run Build”构建vuejs应用程序，并将文件夹复制到/opt/frontend

upstream backend {
    server 127.0.0.1:3000;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    location /api/ {
        proxy_pass         http://backend;
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
    }

    location / {
        root /opt/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

---

或者，您可以使用后端托管前端。但是，像nginx这样的Web服务器在提供静态文件方面比后端api服务器更高效。

如果您没有办法打开更多端口，您可以将前端构建到生产模式，然后将其index.html和dist文件夹放到nodejs应用所在的同一文件夹中。 然后创建一个express应用程序，监听端口80并发送HTML文件

var express = require('express');
var app = express();
var path = require('path');
var dir = '//vm//path//here';

app.get('/', function(req, res) {
    res.sendFile(path.join(dir + '/index.html'));
});

app.listen(80);

---

在我的情况下，我的后端服务器不以群集模式运行（例如，3001、3002…以及80端口）

我的案例：与乘客一起运行的rails服务器（mydomain.com，80端口） 我需要使用相同的域和端口运行我的Vuejs项目

因此，唯一的解决方案是在指定的URL中运行vue

这是我的解决方案：

1.更改nginx配置

http {
    # our backend app is passenger( rails server, running on 80 port)
    passenger_root /usr/local/rvm/gems/ruby-2.2.10/gems/passenger-6.0.0;
    passenger_ruby /usr/local/rvm/gems/ruby-2.2.10/wrappers/ruby;

    include       mime.types;
    default_type  application/octet-stream;

    server {
     listen 80;
     passenger_enabled on;
     # we are using this folder as the root of our backend app.
     root /mnt/web/php/public;
     charset utf-8;

     location ~ ^/(images|javascripts|stylesheets|upload|assets|video)/  {
       root /mnt/www/php/public;
       expires 30d;
       add_header Cache-Control public;
       add_header ETag "";
     }

     # vuejs related content
     location /vue.html {
       root   /mnt/web/vuejs/h5/dist;
     }
     location /static {
       root   /mnt/web/vuejs/h5/dist;
     }
    }
}

2.在vue项目的

dist

文件夹中：

$ mv index.html vue.html

---

3.应根据nginx配置更改vuejs项目中所有请求的url

您可以以MEAN风格运行它，并让nodejs服务器提供Vue应用程序非常感谢您的快速回答！这正是我一直在寻找的，今天我要尝试一下，看看效果如何！谢谢你的回答，非常简单明了。我今天要试试！经过一段时间的设置，我成功地设置了nginx服务，并正确地重定向到前端和后端。你的回答真的很有帮助，非常感谢！

http {
    # our backend app is passenger( rails server, running on 80 port)
    passenger_root /usr/local/rvm/gems/ruby-2.2.10/gems/passenger-6.0.0;
    passenger_ruby /usr/local/rvm/gems/ruby-2.2.10/wrappers/ruby;

    include       mime.types;
    default_type  application/octet-stream;

    server {
     listen 80;
     passenger_enabled on;
     # we are using this folder as the root of our backend app.
     root /mnt/web/php/public;
     charset utf-8;

     location ~ ^/(images|javascripts|stylesheets|upload|assets|video)/  {
       root /mnt/www/php/public;
       expires 30d;
       add_header Cache-Control public;
       add_header ETag "";
     }

     # vuejs related content
     location /vue.html {
       root   /mnt/web/vuejs/h5/dist;
     }
     location /static {
       root   /mnt/web/vuejs/h5/dist;
     }
    }
}