bazel + angular 项目的反向代理

Question

我是运行一个使用 Bazel 构建的 angular，需要一个反向代理来更改我后端的主机和端口。通常我会在 angular.json 中创建一个服务命令，它使用代理设置实现构建器 @angular-devkit/build-angular:dev-server:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "MyPackage:build",
    "proxyConfig": "proxy.conf.json"
  },
  "configurations": {
    "production": {
      "browserTarget": "MyPackage:build:production"
    }
  }
}

但是由于我使用的是 Bazel，所以我使用的是另一个构建器 @bazel/angular:build。不幸的是，这个构建器不支持我的代理配置，我会使用类似的东西：

{
  "/apps": {
    "target": "https://my.server:8080",
    "secure": true,
    "changeOrigin": true
  }
}

有替代方案吗？

Answer 1

您可能已经看过此页面，但我会 link 以供参考：

https://bazelbuild.github.io/rules_nodejs/examples#angular

在“架构师”方法中，您使用 Bazel 进行构建，但运行标准 Angular 构建器。所以如果你只是想要一种快速的方法来保持功能，但将项目插入 Bazel，我会推荐它。

@bazel/angular:build 生成器是该页面上描述的“Google”方法的一部分。虽然它速度快且更“Bazel-native”，但它也使用不同的工具链。最值得注意的是，没有 webpack。

linked 示例使用 concatjs_devserver:

https://github.com/bazelbuild/rules_nodejs/blob/stable/examples/angular/src/BUILD.bazel#L111

可惜没有代理功能。

您可以退回到“架构师”方法或编写您自己的 Bazel 规则来启动不同的开发服务器。另一种方法是运行在开发服务器和您的后端服务器之前使用一些反向代理。

bazel + angular 项目的反向代理

Reverse proxy for bazel + angular project

reverse-proxy

bazel