Serve static SPA from Google Cloud Storage and API from Google App Engine

Question

I have a static web client SPA serviced by a REST API. I'm trying to figure out the best way to host these apps on Google's Cloud Platform using App Engine to host the API, and Cloud Storage to host the static web client.

If I were doing this from scratch, a simple reverse proxy could manage routing traffic between the API and the client assets. To do the equivalent with GCP, I've looked at the following:

• Google's Compute Engine supports content-based load balancing: though no equivalent for App Engine
• the API on App Engine could proxy requests to Cloud Storage, though at the expense of unnecessary load on the API service
• simply host the API and client on separate domains (App Engine and Cloud Storage respectively), and properly configure cross origin issues
• Use Google Cloud Endpoints as a reverse proxy to route traffic appropriately between App Engine and Cloud Storage: haven't fully explored this option, though as of writing, Cloud Endpoints does not support routing to multiple hosts (which is defined only in v3 of the OpenAPI spec).

All of the above have limitations. What i'm trying to do seems fairly conventional, but I'm not sure what the path of least resistance is on GCP.

Answer 1

Google Cloud storage allow you to host a static website : https://cloud.google.com/storage/docs/hosting-static-website

You don't need to use Endpoint or AppEngine as a reverse proxy

If you need to setup a load balancer based on route or if you need to setup ssl certificates you could use storage bucket as a service backend : https://cloud.google.com/compute/docs/load-balancing/http/backend-bucket

Answer 2

Let's talk about serving SPA static files from Google App Engine.

The SPAs need to serve many routes to a single index.html, normally called rewrite rules. App Engine can do that with a proper configured app.yaml handlers section.

For the real files part, you serve the real path:

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

For these fake routes, serve the entrypoint index.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

By this configuration, Google Frontend will serve the static files without hitting your backend.

Here's one Angular application and I deployed to App Engine, as an example:

Other stuff about securing APIs and CORS policies, you can consider using dispatch.yaml to avoid cross domain problem. Or serve from different domain with cloud endpoints (with IAP jwk configured).