Little did I know that I would soon find myself trapped in the dreaded realm of 'Too Many Requests.' The reason? I was making numerous calls to third-party APIs, each with its distinct rate limit per second.

However, I persevered, and eventually, I managed to fine-tune the entire system to operate as smoothly as a car cruising along an empty road.

To overcome this challenge, I implemented rate limiting using Google Cloud Tasks.

WHAT IS GOOGLE CLOUD TASKS?

Think of it as a supervisor that monitors all the APIs you're using. It ensures that your system follows certain rules, such as how many APIs can be used simultaneously and how often they can be called within a specific time frame.

From a coding perspective, It's similar to sending an email without having to worry about anything at all.

Lets dig into the Google Cloud Platform and take a look at it.

This is how the Cloud Tasks user interface looks as of the day I'm writing this blog.

Let's click on 'Create Push Queue' and explore its functionality.

Let's break down the meaning of all these technical terms one by one.

Max Dispatches: This is the maximum number of API calls we want to make per second.

Note: If you want to make, for example, 20 calls per minute, which translates to 0.333 calls per second, configuring it directly from the GCP console is not possible.

Instead, you should use the Google Cloud Tasks SDK or the Google CLI for this specific configuration.

Max Concurrent Dispatches: This is the maximum number of simultaneous API calls that can be made.

Retry Configuration: it is used to determine how many times a task should retry in case the API encounters an error.

I won't dive into all the details here for Retry Configuration; consider this a personal assignment to explore and learn more on your own. 😉

Now, let's go ahead and create a queue and write some actual code.

I'll be using Node.js to add tasks to the queue.

install the module and import it

npm i @google-cloud/tasks

const { CloudTasksClient } = require("@google-cloud/tasks");

const main = () => {
     const payload = {"data":"PUT YOUR ACTUAL JSON HERE"}
    const request = {
        parent: `projects/${projectId}/locations/us-west2/queues/my-rate-limit-saviour`,
        task: {
          httpRequest: {
            httpMethod: "POST",
            url: `API TO CALL THIS CAN BE YOUR BACKEND API OR CLOUD FUNCTIONS`,
            body: Buffer.from(JSON.stringify(payload)).toString("base64"),
            headers: { "Content-Type": "application/json" },
          },
        },
     };
      try {
            const client = new CloudTasksClient();
            const [response] = await client.createTask(request);
            console.log("Task added to Queue", response.name);
            return { success: true };
          } catch (error) {
            console.log("Error While adding to queue", error);
            return { success: false };
          }
}

If you're wondering whether I'll be including any third-party APIs in the URL, the answer is no. I'll be doing some processing with the response data, not directly calling external APIs.

This will begin adding tasks to the queue while consistently adhering to the defined task rules.

If you're working with multiple third-party APIs, each having different rate limits, make sure to configure separate tasks with the required rate limits and add those to their respective queues.

That's all for today. If you spot any errors or inaccuracies, please don't hesitate to reach out. I'm always eager to learn and improve my knowledge. Thank you, and I'll see you in the next blog with an exciting topic!

The flow of the blog goes like this-

1. We will configure our frontend app for auto deployment.
2. Set up AWS Codebuild.
3. That's it .there is nothing much in it.

What is AWS CODE BUILD?

In simple terms, It will build our frontend app on a cloud machine, and then we can copy those build files into our s3 bucket. For more understanding, you should try searching on your own.

I am assuming you already know how to build a react app manually. If not you should first take a look at it from here .

Configuring our react project

For this, we will create a new file named buildspec.yml in our project root directory.

This file will contain what commands should be executed and the specific node version needed to build our project. The buildspec.yml looks like this -

version: 0.2
phases:
  install: 
    runtime-versions:
      nodejs: 12
    commands:
      - echo "Installing dependencies..."
      - npm install
  build:
    commands:
      - echo "Building React project..."
      - npm run build
  post_build:
    commands:
      - echo "Updating files in the S3 bucket..."
      - aws s3 sync build/ s3://BUCKET_NAME/

Here BUCKET_NAME should be changed with your actual bucket name.

Here you can see there are 3 phases -

• Install
• build
• post_build

In the install phase, we will add those commands which is needed to be executed before we run our next command that is build.

In the build phase, we will add those commands to build our project.

For react it will be npm run build.

Lastly, for post_build we will execute commands which are needed if the build gets succeded. For example, in our case, it would be to copy the content to our s3 bucket.

this can be done via this command: aws s3 sync build/ s3://BUCKET_NAME/

This is the only file we need to add to our project now we can push these changes to Github or the only other platform.

Set up AWS Codebuild

Login to your AWS Account and head over to AWS CodeBuild.

Click on Create Build Project button.

For Project configuration, enter the project name of your choice.

For Source, select Source provider as per your requirement and select your repository.

For Primary source webhook events, we will check the rebuild every time option and for event type, we will select PUSH. There are also different Event types too such as PULL_REQUEST_CREATED, PULL_REQUEST_MERGED, and many more.

For Environment, we will select Linux as Operating System.

In the Service role, we will create a new role and make sure AWS S3 full access policy is attached to our newly created role. If not, we need to add it manually from IAM .

For Buildspec, we will select Use a buildspec file option.

Other than that we will keep other settings as default for now and click on Create build project.

After successful completion, you can push something on your repo and the build will start automatically, or click on Start Build in the top right corner to manually fire a build and in some time you will see the changes on your s3 endpoint.

Congrats 🎉! You have just set up your own fully managed continuous integration service using AWS CodeBuild. If you find this blog informative or helpful leave a like or let me know in the comments.

Everybody knows how to code but only a few know how to host it on different platforms and make it production ready. Today we will learn one of the ways to do it. The Flow of the blog goes like this-

1. We will create a new react project.
2. We will build the react project.
3. Upload our build files to AWS S3 and enable Static web hosting.

if you are not familiar with anything from the above don't worry. you will understand everything at the end of the blog.

First, we will create a new react app with the following command -

npx create-react-app my-app

Then, we will run the app and check it using :

npm run start

Everything seems fine till now and you may already know this thing.

To build the react app we have to use the following command on your terminal:

npm run build

It may take a while to create an optimized production build.

On successful completion, you will see a new folder name build on your project root directory.

We need to upload files inside our build folder on AWS S3.

Login to your AWS Account and head over to S3.

We will create a new bucket using create bucket button.

Name your bucket (it would be better to name it with the domain name on which you will open this website ) and select the region as per your need.

By default the bucket access is private we need to make it public in order to be accessible on the internet. Uncheck the Block all public access and check the acknowledge button as shown below.

After that click, "Create Bucket" at the end.

After the bucket is created but still our public access is not enabled so we need to add a bucket policy under "Permissions" as shown below to make it public.

Edit the Bucket Policy under permissions and Add the following JSON

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

Here Replace the BUCKET_NAME with the bucket name you provided earlier.

Now we will upload our files in this bucket which are inside our build folders.

The structure of files will somewhat look like this:

After the Upload of the file is done we will enable Static website hosting so we can access our website.

Head over to the Properties tab and scroll at the bottom where you will see Static website hosting.

Click on Edit and Enable the option and in the Index document add index.html and save changes.

.

Congrats! 🎉 .You just deployed your first react app and you can access it from the Bucket website endpoint from here.

In our next blog, we will try to set up a CI/CD for our react app using AWS CodeBuild. Thank You Guys.