在生产模式下运行 Angular + Node.js 应用程序 Heroku答案

【问题标题】：Run Angular + Node.js app in production mode Heroku在生产模式下运行 Angular + Node.js 应用程序 Heroku
【发布时间】：2018-02-17 21:38:38
【问题描述】：

所以我在 Heroku 上托管了一个 Angular 和 Node.js 应用程序。我希望能够在本地主机上运行这个应用程序进行测试，但也让它在 Heroku 上运行。所以我决定使用环境变量来定义应用程序的 URL 以进行 API 调用。

所以在environment.ts 我有

export const environment = {
  production: false,
  apiURL: 'https://localhost:8080/'
};

在environment.prod.ts 我有：

export const environment = {
  production: true,
  apiURL: 'myHerokuURL'
};

所以当我在 heroku 上运行时，我希望使用生产 URL。我该怎么做？

我在本地运行，nodemon server.js 然后ng serve。

但是在 Heroku 上，我需要做类似 ng serve --env=prod 的操作，但不知道该怎么做。

【问题讨论】：

为什么不直接使用 ng build --prod 并让 heroku 为捆绑包提供服务？
实际上我认为您不应该在生产环境中同时运行客户端和 api 服务器，您不妨看看这里：medium.com/@ryanchenkie_40935/…
永远不要将 ng serve 用于生产！这是一个没有安全测试的开发服务器。如果您不使用 Angular 通用并且您的 server.js 中有 API：使用 ng build --prod 构建它并在您的 server.js 中添加静态服务器

【解决方案1】：

这些应该有帮助

如果你使用的是angular-cli，那么

ng build --prod

会成功的。然后您可以将所有内容从.dist 文件夹复制到您的服务器文件夹

您可以使用 http-server 为您的应用程序提供服务。安装 http-server

npm install http-server -g

然后进入你的项目文件夹

http-server ./dist

它将为您文件夹中的所有文件提供服务。您可以检查终端您可以用来访问应用程序的 IP 地址和端口。现在打开浏览器并输入

ip-adress:port/index.html

希望对你有帮助。

【讨论】：

【解决方案2】：

在你的 package.json 添加

 "heroku-postbuild": "ng build --configuration=production"

而不是

"postinstall": "ng build --aot --prod"

这只会触发 heroku 上的一个（生产）构建。如果您离开当前设置，您可以在 heroku 应用程序日志中看到您首先使用 --prod 构建所有内容，但随后它只是正常构建。

【讨论】：