在 Webpack 生产配置 Angular 2+ 中设置代理答案

【问题标题】：Set proxy in Webpack production config Angular 2+在 Webpack 生产配置 Angular 2+ 中设置代理
【发布时间】：2017-05-24 05:07:47
【问题描述】：

如我所见，webpack.dev.config 中有代理。如何在 webpack.prod.config 中设置代理？我想调用除自己域 url 之外的另一个 api 域 url。

【问题讨论】：

在生产中你不会使用带有代理的 webpack-dev 服务器。您需要在您的 http 服务器中配置代理。例如，如果你的 http 服务器是 nginx，你可以做类似 location /api/ { proxy_pass localhost:8080; }
@JuliaPassynkova，我正在使用 jhipster 来源：jhipster.github.io/using-angular 你能告诉我任何工作示例吗？
JHipster 是一个应用程序生成器，因此它不能回答您为生产文件提供服务的服务器的问题。你用 JHipster 生成了什么样的配置？除非您想在其前面放置一个代理，否则了解您将在生产设置中使用哪个服务器为您的代码提供服务对于帮助您设置代理至关重要。

【解决方案1】：

我将尝试提供一些答案。

正如朱莉娅指出的那样。您不应该在生产环境中使用 webpack 开发服务器，因为它不是为此而生的，所以问题不应该是如何使用它来配置生产代理配置。话虽这么说，如果您真的愿意，可以使用自定义代理配置启动 webpack 服务器，如下所示：

ng serve --proxy-conf proxy.conf.json

您应该做的是使用 webpack，通过 angular/cli 构建生产版本，然后将这些文件移动到您选择的静态文件服务器提供服务。像这样构建一个生产包：

ng build --prod

由于您使用的是 JHipster，因此已经有关于如何将您的代码投入生产的指南和工具。继续阅读：https://jhipster.github.io/production/

我希望这会为您指明正确的方向

【讨论】：

proxy 是一个不错的选择还是我应该选择环境变量？
代理（反向代理）和环境变量不是解决同一问题的工具，那么您究竟希望完成什么？您是否希望您的客户端/fontend 与您自己的其他 Web 服务通信，或者您希望在您的服务器前面放置一个代理，以便您可以引导传入的请求？
是的，我的前端服务器和后端（webservices）服务器不同。
那我建议你在他们面前使用反向代理。如nginx.com/resources/admin-guide/reverse-proxy