如何在 Heroku 上运行两台服务器？

Question

我在 Angular 9 中为前端和 Node.js 作为后端服务器构建了一个项目。

现在我正在运行node appserver.js 来运行后端服务器。这默认监听端口 9090。在另一个终端中，我正在运行 ng serve 像往常一样在端口 4200 上运行我的 Angular 应用程序。我在 Angular 应用中有一项服务，可以从服务器发送和接收消息。

我已使用WebSocket 类连接到端口 9090。我的应用程序在本地运行良好。但是现在我如何在 Heroku 中部署。 Heroku 提供一个随机端口号，将指定为process.env.PORT。如何在我的 WebSocket 服务中获取该端口？

我的问题是：

1. 如何在 Heroku 中部署两台服务器？
2. 如何在 Angular 中将 appserver.js 中的端口号指定为 WebSocket 服务中的端口号？
3. 有没有使用 .env 文件和 ProcFile 来解决我的问题？
4. 有没有使用 Heroku 中的 multi-buildpack 来解决我的问题？

Answer 1

1. 当两个单独的服务器都需要一个端口时，您不能部署它们。您必须将它们放入单独的应用程序中。在某些情况下，您可以组合 Web 服务器。部署服务器是正常的。

2. 在 Heroku 上部署 Web 服务时，Heroku 会为您提供一个您必须绑定到的端口。然后您可以在<appname>.herokuapp.com 下访问您的网络服务。 （<ipaddress>:<port>。因此，在您的前端，您不会指定端口号。您在前端指定 websocket URL，没有任何端口。
   在您的网络服务器中，您绑定到process.env.PORT。

3. .env 文件不应被版本控制/提交。没用。如果您需要环境变量，您可以通过 Heroku 的仪表板进行设置。 Procfile 不是必需的，因为您使用的是 Node.js，它会查看位于 package.json 中的 npm start 脚本。但这样做并没有什么坏处，因为它提供了清晰性。

4. 没有用于此的多构建包。

---

如果您的 2 台服务器严格区分并使用不同的协议。一种使用 http，另一种则可以将两台服务器捆绑为一台。这是一个例子：

const http = require('http');
const path = require('path');
const express = require('express');
const WSServer = require('ws').Server;
const DateFormat = require('dateformat');

let wss;
let server;
const app = express();
app.use(express.static(path.join(__dirname, './../build')));

server = new http.createServer(app);
wss = new WSServer({ server })

this.wss = wss;
wss.on('connection', function(socket) {
    console.log(DateFormat(new Date(), 'm/d h:MM:ss TT'),
        `client connected to server (${wss.clients.size} total)`);
    socket.on('message', function(data) {
        console.log(data)
    });
    socket.on('close', function(code, desc) {
        console.log(DateFormat(new Date(),
            "h:MM:ss TT"),'client disconnected, total:', wss.clients.length);
    });
});
wss.on('listening', () => console.log('Websocket listening on port', config.get('port')));
wss.on('error', err => console.log('Websocket server error:', err));

server.on('error', err => console.log('Server error:', err));
server.listen(process.env.PORT);

项目中的示例：
https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js

在项目中，带有 websocket 服务器的后端被扩展为包括一个为静态文件提供服务的快速服务器。请注意，此更改仅存在于 heroku 分支中。

您将在此提交中找到使该项目 heroku 兼容的所有相关更改：
https://github.com/vegeta897/d-zone/commit/63730fd7f44d2716a31fcae55990d83c84d5ffea