3

I have two application that I want to deploy with Google Cloud App Engine.

One of them is react front end, and I want to serve this through www.videoo.io

Second one is back-end, which will be served via api.videoo.io

Frontend yaml file react.yaml :

runtime: nodejs16

env: standard
handlers:
- url: /static
  static_dir: static
  secure: always

- url: www.videoo.io/*
  service: frontend
  script: auto
  secure: always%

API yaml file, api.yaml :

runtime: python37
entrypoint: gunicorn -b :$PORT videoo.wsgi

service: "videoo-api"
env: standard
handlers:

- url: api.videoo.io/*
  service: backend
  script: auto
  secure: always%

Is this the correct way to achieve this ?

What is the best strategy to serve these two separate applications that will interactively communicate (Frontend will make calls to API to get object information that is stored Django app) ?

Here is also my domain name information in Google App Engine settings :

enter image description here

london_utku
  • 1,070
  • 2
  • 16
  • 36
  • Does this answer your question? [Google App Engine - Front and Backend Web Development](https://stackoverflow.com/questions/48077514/google-app-engine-front-and-backend-web-development) – Alex May 05 '22 at 22:24

1 Answers1

4

  1. You are on the right path. You are using the microservices architecture which is basically deploying individual apps as parts (services) under a single project.

  2. Your frontend service seems to be your default so you don't need a service name for it. Every GAE App needs a default service.

  3. Rename react.yaml to app.yaml (since it will be your default service) and update the contents to

    runtime: nodejs16

env: standard
handlers:
- url: /static
  static_dir: static
  secure: always

- url: /.*
  script: auto
  secure: always

  4. Also rename your api.yaml to backend.yaml since that is what you called your service (not sure if this is required but I do that to easily track of what is controlling my service). Update the contents of the file to

    service: backend
runtime: python37
entrypoint: gunicorn -b :$PORT videoo.wsgi
env: standard

handlers:
- url: /.*
  script: auto
  secure: always

  5. You'll need a dispatch.yaml file to route traffic to the different services. Something like

dispatch:
  # Send all api traffic to the backend service.
  - url: "api.videoo.io/*"
    service: backend

  # Send all other traffic to the default (frontend).
  - url: "*/*"
    service: default
  1. Final step is that during your deploy, you will deploy the 2 services in addition to your dispatch.yaml file. The dispatch.yaml file has to be in your project root folder
gcloud app deploy app.yaml dispatch.yaml <path_to_backend.yaml>
NoCommandLine
  • 5,044
  • 2
  • 4
  • 15
  • I followed your guidelines, here is what I get : gcloud app deploy app.yaml dispatch.yaml ../videoo-app/backend.yaml ERROR: (gcloud.app.deploy) An error occurred while parsing file: [../videoo-app/backend.yaml] Unable to assign value 'api.videoo.io/*' to attribute 'url': Value 'api.videoo.io/*' for url does not match expression '^(?:(?!\^)/.*|\..*|(\(.).*(?!\$).)$' in "../videoo-app/backend.yaml", line 7, column 8 – london_utku May 06 '22 at 12:28
  • In backend.yaml, replace ```api.videoo.io/*``` with ```/.*``` and see if that solves the problem. If it solves the deploy problem, deploy it and confirm the routing still works (I've upated the answer with my suggestion) – NoCommandLine May 06 '22 at 13:46
  • 1
    Basically, you need a URL pattern that obeys the rules for the url attribute here - https://cloud.google.com/appengine/docs/standard/python3/config/appref – NoCommandLine May 06 '22 at 13:52
  • How would you do this if you have 16 different services, 4 for each microservice (dev, prod, etc.). all console.product.io traffic should go to the frontend, all api.product.io should go to the prod for the api service, and all other urls should simply use the default app engine urls. is this posible? – Jul Jun 01 '23 at 18:46
  • @Jul - see [documentation](https://cloud.google.com/appengine/docs/legacy/standard/python/an-overview-of-app-engine) on the max number of services you can have. See this [github gist](https://gist.github.com/NoCommandLine/199c3bbdff3a5c09de52337a5e50255c) for a sample ```dispatch.yaml``` for your situation – NoCommandLine Jun 01 '23 at 21:02