如何使用 proxy-config 将 Angular 2 应用程序部署到 HTTP 服务器

Posted

技术标签:

【中文标题】如何使用 proxy-config 将 Angular 2 应用程序部署到 HTTP 服务器【英文标题】:How to deploy angular 2 application to HTTP server with proxy-config 【发布时间】:2018-06-16 12:53:11 【问题描述】:

我正在使用以下代理配置构建 Angular 2 应用程序。

proxy.conf.json

 
 "/": 
  "target": "http://localhost:6060",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug" 

我使用 Spring Boot 应用程序作为我的后端,它在端口 6060 上运行

我的包json的构建脚本如下

package.json

"scripts": 
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"

当我使用 npm start 时,应用程序运行良好。所有后端请求都发送到 http://localhost:6060

然后我使用

构建生产版本
ng build --prod --proxy-config proxy.conf.json

并将生成的代码部署到 HTTP 服务器(apache 服务器)。 然后我访问http://localhost/ 应用程序统计信息。但是当我尝试提出请求时,这些请求指向http://localhost/...而不是http://localhost:6060

我试图找到一些解决方案,但这些都不起作用。请给我一些帮助。

谢谢

【问题讨论】:

【参考方案1】:

ng serve 的 --proxy-config 参数仅适用于 CLI 中内置的开发 Web 服务器。它对其他部署目标没有影响,并且对您的生产构建没有任何作用。

您说您使用 apache,在这种情况下您应该使用 ProxyPass 指令设置 Apache:Link to Apache mod_proxy documentation

通常用于要编辑的 Ubuntu Linux 服务器:

/etc/apache2/sites-enabled/000-default

并插入以下指令:

ProxyPass /path/to/backend http://localhost:6060/

然后 Apache 会将您看到的请求转发(代理)到 http://localhost/path/to/backend 到 http://localhost:6060

【讨论】:

以上是关于如何使用 proxy-config 将 Angular 2 应用程序部署到 HTTP 服务器的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Mongoose 在 mongodb 中存储动态对象数组?

如何将 JSON 导出为 CSV 或 Excel - Angular 2

如何在控制器之前加载.run

将 Typescript 2.3 模块发布到 NPM 以供 Angular 4 使用

如何在共享主机中托管 Node.Js 应用程序 [关闭]

是否可以将服务注入 Angular 1.5 组件的 templateUrl 属性?