将 MEAN 堆栈应用程序部署到 Heroku

Question

我正在尝试将我正在使用 MEAN 堆栈构建的应用程序部署到 Heroku，但遇到了一些麻烦。我认为问题在于我的应用程序的结构。我将所有服务器代码都放在一个名为 server 的文件夹中，该文件夹有自己的 package.json 和 src 文件夹，其中包含实际的服务器代码。

现在我只是想让 Heroku 部署应用程序的客户端。我只是收到一个错误...我知道数据库和服务器没有运行，但我什至无法超越应用程序的初始显示。我有一个网络测功机设置为 run ng serve (npm start) 在应用程序上。

如果有人愿意查看我的应用程序的结构并了解为什么我无法在没有真正深入研究代码的情况下部署到 Heroku，那将不胜感激。

Here is the code

请注意，它位于deploy 分支上，这是故意的。在确定它可以正常工作之前，我不想将任何东西推给主人。

Answer 1

Angular Web 服务器默认以 localhost:4200 为目标。这可以通过几个命令行选项进行更改。 --port 接受端口，--host 接受主机 IP 地址。

因此您可以按如下方式修改 ng serve 脚本：ng serve --host [host-ip] --port [port-number] --disableHostCheck。最后一个标志 (--disableHostCheck) 告诉开发服务器绕过主机检查，而通常ng serve 在除 localhost 之外的任何东西上都会失败。如果只用于私人开发/测试之外的任何事情，那真是太糟糕了。

另一个问题：Heroku 运行网络测功机，据我了解，它们每次都使用随机端口和 IP。虽然随机端口存储在变量 $PORT 下，但 IP 似乎没有类似的变量。 Web dynos 将这些信息保留给自己。

Heroku 确实提供了这个命令：heroku local web。它在 localhost:5000 上运行您的应用程序。这意味着ng serve --port 5000 与此命令完美配合。这应该告诉您前端将如何在 Heroku 上运行。您的 Angular 开发服务器也将按预期运行。

对于 Heroku 的实际部署，请使用您的快速服务器。从您的文件系统运行ng build，它会在dist 文件夹中生成一个index.html。该文件包含您的整个前端应用程序。然后，您可以将该文件从服务器上传到您的浏览器。

对于通常分解为的快递：

app.get('*', function(req, res) {
    res.sendFile('path/to/index.html');
});

希望这会有所帮助！如果我错过了任何地方，请告诉我。