Deployment of the API and frontend on separate subdomains and domains respectively within the Google Cloud Platform

My journey began by setting up a Google App Engine where I deployed both the API and the frontend on my custom domain, which I referred to as mysite.ms. The API was written in nodejs with Express, while the frontend was a React application. To achieve this, I utilized the following configuration in my app.yml:

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, my objective is to separate these elements. Specifically, I aim to deploy only the React application on the mysite.ms domain and host the API on a subdomain called sub.mysite.ms. To accomplish this, I added a new DNS of type

CNAME</code for the subdomain, targeting the original domain <code>mysite.ms
.

Is it feasible to achieve these distinct deployments using solely Google App Engine and a single app.yml file, or will I require additional tools and file separation?

How do you recommend I proceed? Since I have not found clear guidance online, could you offer some tips to help me navigate through these challenges?

UPDATE

Upon reviewing the documentation provided, certain doubts arose. Primarily, I am unsure how to create different services. Initially, my attempt involved creating a (potentially erroneous) dispatch.yml as follows:

dispatch:
  - url: "mysite.ms/*"
    service: default

  - url: "sub.mysite.ms/*"
    service: api

However, upon deploying with the command gcloud app deploy dispatch.yaml, an error was encountered due to the module 'api' not being found. In the previous version, my server.js contained the following code to manage the React part:

app.use(express.static(path.resolve(__dirname, 'www', 'build')));
app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'www', 'build', 'index.html')); });
  1. Should I retain these lines of code even after segregating the frontend and the API onto different domains?

  2. Do I need to add 'sub.mysite.ms' to the custom domain section within Google App Engine?

  3. Is it necessary to maintain the app.yml file alongside the dispath.yaml?

Answer №1

At this time, it's not feasible to deploy multiple services using the same yaml file. Imagine you need to deploy two services: api and frontend. Let's assume that you want the frontend service to be the default one so that whenever someone visits mysite.ms, they will see the frontend service.

Suppose you have an app.yaml file for the frontend service structured like this:

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

In this case, there is no service property in your app.yaml. According to the reference documentation for app.yaml, the service property is defined as follows:

service: service_name

This is required when creating a service but optional for the default service. Each service and version must have a unique name, consisting of numbers, letters, and hyphens. The total length of the service and version names cannot exceed 48 characters and cannot start or end with a hyphen. It is recommended to select distinct names for each service and version without reusing them.

Since there is no service property, the deployment will default to the default service. Now let's consider another yaml file, specifically the api.yaml to deploy the api service. Here is an example:

runtime: nodejs
env: flex
service: api

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10
</dode></pre>
<p>I've included the <code>service property here, so when deploying using gcloud app deploy api.yaml, the service named api will be created.

After setting up the services, you can proceed to deploy the dispatch.yaml file that you've prepared.

Here are some tips for you:

  • It's best practice to assign the app.yaml file to the default service. For other services, consider naming the files according to the service being deployed, e.g., api.yaml, backend.yaml, api_external.yaml, etc.
  • You can deploy both services simultaneously using
    gcloud app deploy path/to/service1 path/to/service2 path/to/service3 ...
    or individually for easier troubleshooting if any issues arise.
  • As you are utilizing the Flex environment, the handlers property is not supported and will be disregarded if added.
  • Make sure to refer to the appropriate documents for your environment. Check out app.yaml, dispatch.yaml, and general documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receiving a message using .AwaitMessage() directly in the user's

Can anyone help me figure out how to use .awaitMessages() in a user DM? I've been struggling with getting it to work, as no matter what I try, I keep seeing that .awaitMessages() is undefined. It's crucial for me to receive messages in a direct m ...

Managing POST request data in Express: A step-by-step guide

Currently, I am facing an issue with my alert button on the client side, which has an event listener that is supposed to send data to the server. Below is the code snippet for the client side: alertBtn.addEventListener("click", () => { axios ...

Using NodeJS to manage multiple paths for WebSocket connections

Greetings, I am currently working on creating a WebSocket server class with multiple paths. I have encountered an issue where the connection Event is successfully emitted when calling the websocket server with a valid path, but the message Event does not s ...

Coordinating multiple API requests for optimal performance

I have a task where I need to retrieve data from two different API endpoints. Once both sets of data are fetched, I need to compare the information obtained from each source. I am familiar with fetching data from a single API endpoint and using a callback ...

Detecting file changes in ExpressJS after writing data to a file.This

I'm facing an issue with my endpoints. One endpoint is responsible for writing JSON data to a static file, while another endpoint is supposed to retrieve and send that data. The problem arises when I make changes to the file but the endpoint still sen ...

Ways to address the problem of returning assignments

I encountered an issue while working on my code Error message: Arrow function should not return assignment no-return-assign The problematic code snippet is as follows: await DB.Place.find( match, // key to filter (err, doc) => (listOfObje ...

Error message 'Token not found' received after attempting to process payment through Stripe

I am in the process of setting up payment functionality using the Stripe API on an iPad. The goal is to allow users to log into their Stripe account and accept payments from others. To achieve this, I am utilizing Stripe Connect for authentication and savi ...

Unable to authenticate the initial certificate with Node

Out of the blue, my Node environments are experiencing issues with installing packages and freezing at idealTree:my-app : sill idealTree buildDeps Although I attempted to fix it by using npm config set registry http://registry.npmjs.org/ --global, it didn ...

Sequelize does not recognize the findOne property

I've been working on creating a model using Sequelize with a MySQL database. When trying to post to '/students/register', I keep encountering an error stating that findOne is not a function. I attempted requiring mysql without success and al ...

"Optimize Your Data with PrimeNG's Table Filtering Feature

I'm currently working on implementing a filter table using PrimeNG, but I'm facing an issue with the JSON structure I receive, which has multiple nested levels. Here's an example: { "id": "123", "category": "nice", "place": { "ran ...

Is it possible for yarn to verify a specific dependency?

Hey, I'm currently working on a script and I need to check if a specific dependency is listed in my package.json file. Currently, I am using the following command: yarn list --depth=0 | grep "settings" | wc -l In this command, settings represents th ...

Solving required packages in Express server

I am encountering difficulties with resolving dependencies on my express server. Below is the structure of my project: Calculator --dist ----app -------calculator.js -------server.js --node_modules --src ----app --------calculator.js --------server.js -- ...

Accessing root node information from child nodes using onNodeSelect in React Material UI tree view

I am currently working with a tree view code that looks like this: <TreeView defaultCollapseIcon={<ArrowCircleUpIcon />} defaultExpandIcon={<ArrowCircleDownIcon />} onNodeSelect={handleChange} sx={{ height: 240, f ...

Tips for creating a Node.js file that is accessible through the command line and can also be imported using the 'require()' function in other files

I am looking to create a Node.js source file called myCode.js that contains a function named foo(arg1, arg2,..). I want to be able to execute this function from the command line using: $ node ./myCode.js arg1 arg2 And also be able to use it in another fi ...

Using websockets in a React client application

Attempting to establish a connection with a backend layer running on localhost, here is the provided source code: const { createServer } = require("http"); const cors = require("cors"); const photos = require("./photos"); const app = require("express")( ...

Using `Grunt --force` results in a node error: incorrect option chosen

I am encountering an issue with my Grunt task named eslint:jenkins which is responsible for running eslint on the project. In the build pipeline, I execute it using the following command: grunt eslint:jenkins --force --verbose To prevent the grunt from f ...

What is the process for removing a package that was installed with npm link?

After using the command sudo npm link to install a node package in its directory, how can I properly uninstall the package once my development work is complete? By running npm link, the package gets installed as a symbolic link in the system's global ...

Steps for converting a file with JSON objects to a JSON array

I have a JSON file with multiple objects stored in a single file that I need to convert into a JSON array using JavaScript. My main objective is to create a CSV file from this data. Here is an example of the file content: { Name:"nom1", Cities:[&apos ...

Managing various types of content in a Node.js application

I am currently working on an API in Node.js that will be accessed by various applications. These applications may make calls with different content types, so I have implemented the body-parser to parse the request data. To ensure consistency and proper fu ...

Having trouble updating the environmental variable file using newman in NodeJS when running multiple collections simultaneously

While running multiple collections in NodeJs using Postman, I encountered an issue with sharing the clientHandshakeToken variable set in the first collection across subsequent collections. Despite my attempts to use Newman for this purpose, the second coll ...