Deploy React App in AWS Fargate

Table of Contents

Amazon ECS, a fully managed orchestration service offers AWS Fargate, serverless compute for containers. When you use Fargate, you don’t need to own, run, and manage the computing infrastructure. You can easily run and scale your containerized applications. In this article, you’re gonna learn how to deploy react app in AWS Fargate.

Prerequisites

Concepts of ECS, ECR, and Docker
Dockerized react application
AWS Credentials

Before moving into the steps, make sure you have dockerized your application.

Deploy React App in AWS Fargate

Steps:

A. Build the image and push it to ECR

First, sign in to the AWS console and go to ECS(Elastic Container Service).
Create a repository by clicking Create repository.

Now, you need to use the AWS access key and secret key credentials to push the built image to ECR.

If you don’t have credentials already, follow the steps below:

Navigate to My Security Credentials under my account section.

Click on access keys.
Click on Create New Access Key (if you have an access key and secret key, skip these steps).
Save your Access Key ID and Secret Access Key.

Now open the terminal and run ‘aws configure’ command.
Enter the keys you saved earlier when prompted to provide.

Here, you configured AWS credentials for your terminal.

Go to ECR repository you created before and click on View Push Commands.
Copy all the commands from the pop-up window one by one.
You pushed the image of your application to ECR and you’re ready to use ECS now.

B. Create ECS Cluster

Go to service from ECS.
Click on Create Cluster and select Networking only from the template.

In the next step, provide the cluster name and Click CreateVPC or select the existing VPC. And then click on Create.

C. Create Task

Go to Task definitions from ECS.
Click on Create New Task Definition.

Select Fargate and click on Next.

Enter your task definition name.
Select Task Role as ecsTaskExecutionRole.
Select network mode as awsvpc(or keep it as it is if already).

Select Task Execution Role as ecsTaskExecutionRole.
Allocate task memory 0.5GB and task cpu 0.25vCPU. (or as your requirements)
Click on Add Container.

Now you have to configure the container for task definition.

Provide the name of the container.
In Image, copy the URI from the ECR and paste.

In port mapping enter 80 as container port and Protocol as TCP.
Leave other settings as it is for now. Click Add.

Now click on create to finish the task creation.

D. Create an ALB

Under EC2, select Load Balancer from the sidebar.

Click Create Load Balancer and select HTTP/HTTPS and click on Create.

Provide a name to Load Balancer.
Select internet-facing and IP address type as ipv4.
Select Load balancer as HTTP and port as 80.
Select VPC which was created by ECS Cluster.
Select the availability zones. And click on Next Configure Security Settings.

Create a new Security Group with the inbound rule for port 80 from anywhere.
Click Next Configure Routing and Add a new target group.
Provide a name to the target group and select the target type as IP.
Select HTTP and port 80. Click on Register Targets.

Now, click on Next Review and then click create.

Here you successfully created a load balancer for your react application.

E. Create Service in ECS

Go to ECS and under services click on Create.
Select launch type as Fargate.

Chose your task definition created earlier and select latest as in platform version.
Choose the cluster name we created and give the service name.
Assign no. of task as 1(or as your requirements) and click on Next step.

Select VPC created by cluster and select subnets.

In load balancer type, choose Application Load Balancer.
Select container in container to load balance section. And click Add to Load balance.
In production listener choose 90:HTTP, select target group you created earlier and enable Service Discovery Integration.