GCP - Deploy API and frontend on subdomain and domain respectively - node.js

Question

To get started, I create an Google App Engine where I deploy on my custom domain (which we will refer to as: mysite.ms) both the API and the frontend. The API are written in nodejs with Express ant the frontend is a React application. This is my app.yml file that I use for the deploy:
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: .5
memory_gb: 0.5
disk_size_gb: 10
handlers:
- url: /
static_files: www/build/index.html
upload: www/build/index.html
- url: /
static_dir: www/build
Now, what I want is to separte the element. On the mysite.ms domain deploy only the React application and on a subdomain sub.mysite.ms the API. Since the domain was taken over on freenom, to create a subdomain I add a new DNS of type CNAME with value sub.mysite.ms and target the original domain mysite.ms.
Is it possible to create these separate deployments using only the Google App Engine and a single app.yml file or do you need to use some other tool and separate the files?
How do you advise me to proceed? Since I can't find anything clear online, could you give me some tips to solve these problems?
UPDATE
I have read the documentation that you provided me and I some doubts regarding it. First of all, how can I create different services? Because I create this (but most probably wrong) dispatch.yml:
dispatch:
- url: "mysite.ms/*"
service: default
- url: "sub.mysite.ms/*"
service: api
but when I deploy with this command gcloud app deploy dispatch.yaml, I get an error because it can't find the module 'api'.
In the previus version, in my server.js I have this code to handle the React:
app.use(express.static(path.resolve(__dirname, 'www', 'build')));
app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'www', 'build', 'index.html')); });
Should I keep these two lines of code even if I split the frontend and the api on different domain?
Shoud I add the sub.mysite.ms to the custom domain area in the section on Google App Engine?
Should I keep the file app.yml even if I have the dispath.yaml?

Answer 1

For now, it is not possible to deploy more than one service using the same yaml file. Let's suppose you may want to deploy two services: api and frontend. Let's say you want the frontend service to be default one so everytime everybody access to mysite.ms, they will see the frontend service.
Let's say you have the app.yaml file as follows for the frontend service:
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
as you can notice, there is no the service property in your app.yaml. In the app.yaml file reference doc you will see the following:
service: service_name
Required if creating a service. Optional for the default service. Each service and each version must have a name. A name can contain numbers, letters, and hyphens. In the flexible environment, the combined length of service and version cannot be longer than 48 characters and cannot start or end with a hyphen. Choose a unique name for each service and each version. Don't reuse names between services and versions.
Because there is not the service property, the deploy will be set to the default service. Now let's say you have another yaml file, in particular the api.yaml to deploy the api service. Here's an example:
runtime: nodejs
env: flex
service: api
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
You will see that I've added the service property and when you deploy using gcloud app deploy api.yaml, the deploy will create the service api.
Finally, after creating the services you will be able to deploy the dispatch.yaml file you've created.
Some advices for you:
Is a good practice to assign the app.yaml file to the default service. For the other services, you may want to name the files according to the service to deploy with such file i.e. api.yaml, backend.yaml, api_external.yaml, etc.
You can deploy deploy both services using gcloud app deploy path/to/service1 path/to/service2 path/to/service3 ... or you can do it individually for better debugging in case there could be some issues.
Since you're using the Flex environment, the handlers property are not supported. If you add them, those are ignored.
Check the right documents for the environment you use. app.yaml, dispatch.yaml, general docs.