提供来自 Google Cloud Storage 的静态 SPA 和来自 Google App Engine 的 AP



我有一个由REST API提供服务的静态Web客户端SPA。 我正在尝试找出在Google的云平台上托管这些应用程序的最佳方法,使用App Engine来托管API,并使用Cloud Storage来托管静态Web客户端。

如果我从头开始执行此操作,一个简单的反向代理可以管理 API 和客户端资产之间的路由流量。 为了等效使用 GCP,我查看了以下内容:

  • Google的Compute Engine支持基于内容的负载平衡:尽管App Engine没有等效功能。
  • App Engine 上的 API 可以将请求代理到 Cloud Storage,但代价是 API 服务上不必要的负载。
  • 只需将 API 和客户端托管在不同的域(分别为 App Engine 和 Cloud Storage(上,并正确配置跨源问题
  • 使用 Google Cloud Endpoint 作为反向代理,在 App Engine 和 Cloud Storage 之间适当地路由流量:尚未完全探索此选项,但截至撰写本文时,Cloud Endpoint 不支持路由到多个主机(仅在 OpenAPI 规范的 v3 中定义(。

以上所有内容都有局限性。我试图做的事情似乎相当传统,但我不确定 GCP 上阻力最小的路径是什么。

Google Cloud 存储允许您托管静态网站: https://cloud.google.com/storage/docs/hosting-static-website

您无需将端点或 AppEngine 用作反向代理

如果您需要根据路由设置负载均衡器,或者需要设置 SSL 证书,则可以使用存储桶作为服务后端: https://cloud.google.com/compute/docs/load-balancing/http/backend-bucket

让我们谈谈从Google App Engine提供SPA静态文件。

SPA 需要为单个索引.html(通常称为rewrite规则(提供许多路由。 App Engine 可以通过正确配置app.yaml handlers部分来做到这一点。

对于真实文件部分,您提供真实路径:

- url: /assets/
static_dir: path/to/real/files

对于这些虚假路由,提供入口点索引.html:

- url: /
static_file: path/to/index.html
upload: path/to/index.html
- url: /.*
static_file: path/to/index.html
upload: path/to/index.html

通过此配置,Google前端将提供静态文件,而不会到达您的后端。

下面是一个我部署到 App Engine 的 Angular 应用程序,作为示例:

有关保护 API 和 CORS 策略的其他内容,您可以考虑使用dispatch.yaml来避免跨域问题。或者从具有云终结点的不同域提供服务(配置了 IAP jwk(。

正如您正确观察到的那样,您的设置可能会遇到许多复杂情况。Google Cloud Storage 只是一个存储,它不一定能像您希望的那样管理对 GAE 的请求。也许,在这种情况下,使用端点将是一个更可行的解决方案(考虑到您列出的选项(,您可以使用简单的Javascript从Google Cloud Storage中的应用程序文件调用GAE应用程序中的端点。但是,话虽如此,我认为更好的选择是将静态文件移动到App Engine中,如此处所述。这将减轻两种不同技术之间管理资源的复杂性

最新更新