Deploying FrontEnd and BackEnd as two separate applications with Google Cloud App Engine

Question

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 :

Answer 1

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

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