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 :

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

NoCommandLine · Accepted Answer · 2022-05-06T13:47:27.960

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

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

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   
```
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

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>

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

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

1 Answers1