7

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.

James Conkling
  • 3,235
  • 2
  • 25
  • 37
  • Similar question [about Cloud Endpoints + Cloud Functions](https://stackoverflow.com/questions/44763173/google-cloud-endpoints-with-google-cloud-functions). Conclusion, it's not possible to use Cloud Endpoints to route across multiple services. – James Conkling Jun 12 '18 at 15:54
  • Have you found the best way to do this? – Hyster Jan 06 '20 at 18:18

3 Answers3

2

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

Alexandre
  • 1,940
  • 1
  • 14
  • 21
  • 1
    I am using App Engine to host the API, so do need some way to route requests for the API (e.g. `/api/this/1`, `/api/that/2`) and the client assets (e.g. `/index.html`, `/script.js`). – James Conkling Jun 12 '18 at 15:21
  • 1
    Using load balancer with bucket as backend service could be a solution. You can set a rule base on page path : https://cloud.google.com/compute/docs/load-balancing/http/url-map – Alexandre Jun 12 '18 at 15:22
  • How would I integrate App Engine w/ a load balancer? Given that app engine (afaik), manages it's own load balancing. – James Conkling Jun 12 '18 at 15:26
  • hmm.. You right. Not possible for you to host your api on a subdomain ? api.domain.com ? On AppEngine, there no is a lot of possible settings.. – Alexandre Jun 12 '18 at 15:32
  • 1
    I think the better option is to move your static files into App Engine as described [here](https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website). This will ease the complication of managing resources between two different technologies – oakinlaja Jun 12 '18 at 20:09
  • Btw, you could just host your index.html on App Engine and host other assets on Google Cloud storage. Make sure to set public link for each file. But it's not the best way to handle deployment... – Alexandre Jun 12 '18 at 20:58
1

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).

程柏硯
  • 137
  • 1
  • 10
-1

As you have rightly observed, there are a number of complications that might come into play with your setup. The Google Cloud Storage is simply a Storage, which might not necessarily manage requests to GAE as well as you desire. Perhaps, using Endpoints would be a more viable solution in this case (considering your listed options), where you can use simple Javascripts to call Endpoints in your GAE applications from your Application Files in Google Cloud Storage. However, that being said, I think the better option is to move your static files into App Engine as described here. This will ease the complication of managing resources between two different technologies

oakinlaja
  • 826
  • 6
  • 10