Deploy Your React App to ECS (Fargate)
Tags: react, aws, devops, docker
Published: 2020-04-04 08:08:41

---
series: DevOps for Frontend Engineers
---
It's assumed that you have already containerized your React app. If you haven't then [read this first](https://mubbashir.hashnode.dev/how-to-dockerize-react-app)

Usually, you should deploy your React app using AWS S3 (with Cloudfront) or AWS Amplify. But if your use case is advanced and you want to deploy containerized React app then you could use AWS ECS.

Amazon Elastic Container Service (Amazon ECS) is a service provided by AWS to orchestrate containers and deploy your containerized applications. 


----
**Step1: Upload your image to ECR**

Amazon Elastic Container Registry (ECR) is a service where you store your container images (like DockerHub). Consider it as [npmjs](https://www.npmjs.com/) of containers instead of JS packages.

Sign in to your AWS console and head over to AWS ECR.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ex34wrih22wjk6exnmah.png)

Click on "Create Repository" and add a new repository. Add whatever name you would like, for the sake of demo I am using "my-app".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vvscm8922zqynjb972bc.png)

Once the repository is created, it will take you back to the repositories list. Select the newly created repository and then click on the "View push commands" button. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3erhtq4xkerjn568kkw2.png)

Now we need to use these commands one by one to build, tag and push our container image. But before proceeding make sure you have the latest version of [AWS CLI](https://aws.amazon.com/cli/) installed. 

Use the following command to check that AWS CLI is correctly installed on your system.

`aws --version`

It would output something like this. Your version could be different, it depends when you are reading this article.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1gwu0iqngc24cfkk3mzy.png)

Next, we need to create 'Access Keys'. For that, go to "My Security Credentials" from the dropdown with your username.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ss77ywl227cpd592g06e.png)

Click on "Create New Access Key", it will create a new key for you.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dxhcmh3asg4vm02wadar.png)

Copy "Access Key ID" and "Secret Access Key". We will need it later on.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tq1e2xdvsrb22zpcmbog.png)

Now go back to your terminal and enter the following command
`aws configure`

It will ask for "Access Key ID" and "Secret Access Key", provide them one by one (copied in the previous step). You can skip the next two questions (default region and default output format).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x530988hv1gjvmrf9zbp.png)

Once aws cli has been configured, now we can run the push commands. Open up the terminal and make sure you are inside your React app's directory. Run each command shown in the popup opened up by clicking the "View push commands" button. Please note that the commands in the screenshot could be different than what you see in your popup and it's totally fine.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x0mfboq7c9rt2eqrx3wh.png)

*If your 'Dockerfile' is named something other than 'Dockerfile', you will have to specify it using `-f` flag (see below).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cadjc2gxswqoshznw592.png)



---
**Step 2: Deploy on ECS**

Once our container image has been pushed, we are now ready to use ECS and all the awesomeness it has to offer.

Head over to Amazon Elastic Container Service (Amazon ECS) and create a cluster.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3r6oep2fhendgpxdok1u.png)

Select "Network Only" and click "Next Step".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uf7ev7lmvkweolu2dc9e.png)

Give whatever name you would like (but remember it), select "create vpc", click "create".

*Note: You can also choose an existing VPC.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5d1zntnbbyn1dzo0fhzc.png)

Once the Cluster has been created, select 'View Cluster'.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tlubq3cv8auxteux6iw3.png)

Select "Task Definitions" from the left sidebar.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t9s1ewydto045e58ldfp.png)

Click "Create new Task Definition"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t9s1ewydto045e58ldfp.png)

Select "Fargate", click "Next Step"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/unqvybuz3o09un5c4i7v.png)

Enter Task Definition Name, select "ecsTaskExecutionRule" in the "Task Role" and "Task Execution Role" fields. Select "0.5GB RAM" and "0.25 vCPU". Click "Add container".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mr42nhiivrm11pc7v5xu.png)

Now we need to add a container of the image we pushed to ECR earlier. Give a name to container and copy-paste the image URI (can be copied from ECR repositories list). Enter "80" in the port mapping field. Click "Add".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/23nuiw5zibedcsimgih9.png)

Once the container is added, click "Create" to finish Task creation.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4b4qjbdnxx07gi3v2we4.png)

Once the Task is created, you can click on "View task definition"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hwraodw88jp2ey82c99g.png)

Now we need to create a service to run the task within our container. But before that, we need to create an Elastic Load Balancer.

#### ELB
We need to create an Elastic Load Balancer (ELB) so that we can access the react app form the browser (and later on attach to a domain). To do that, head over to EC2.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7xnrm6tow4vzt3co0m7.png)

Select "Load Balancer" from the bottom left.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/umip89vawpf9ysergx5k.png)

Click on "Create Load Balancer"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gf7z8axykfs3t2qfv8ep.png)

Select "HTTP/HTTPS" and click "Create"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b4ey3qglkc6vxt9sva1w.png)

Give a name to your Load balancer. Select VPC from the dropdown (it should be the one that was created by your ECS cluster earlier). You also have to select both of the subnets within the VPC. Click "Next: Configure Security Settings" and ignore the warning (we will add HTTPS later on) and click "Next: Configure Security Groups".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lk052v7uao9nsdmlntm9.png)

Click on "Create a new security group" and hit "Next: Configure Routing".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wo4iiazgrfhra01oza6v.png)

Give a name to your target group (a target group is a group of resources where ELB should send requests to). Select "IP" and click "Next: Register Targets".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uh1rtzhguw4z2xzk80a5.png)

In "Register Targets" leave everything as it is, click "Next: Review". Review the changes and click "Create". Your ELB is created now. Copy the "DNS Name", as this is going to be the URL to access your container from the browser.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n0vnf0juny0fdwv78fed.png)

Once the ELB has been created, we can now create "Service" to run the "task" created within our "cluster".

#### Back to ECS
Go inside the cluster we have created. In the "Services" tab, click "Create".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/074d223gzr50x9d6q1c8.png)

Select "Fargate" as the launch type. Select the task definition we created above (my-app-task in my case), select revision as 1 (latest). Select "LATEST" in platform version, choose the cluster we created in "Cluster". Give a name to your service. Enter "1" in the "Number of tasks" field. Click "Next step".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2rdt4kko83hg9opfm3r.png)

In "Cluster VPC", select the VPC that was created by our cluster. Select both of the subnets within the VPC. In the Load balancer type, select "Application Load Balancer". Select the ELB we created earlier in the "Load balancer name" field. Select the container we created in "Container to load balance" section and click "Add to load balance"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/07lpnz9als60nbxhkff5.png)

Once you click on "Add to load balance", the section will be expanded. 
From "target group name", select the "target group" we created while creating the ELB earlier and it will fill the rest of the fields for this section.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/875997uxakiyuk780qkc.png)

Once the "Container to load balance" section's configuration is completed. Click "Next step". 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o6u35flnm39ebgoyz69q.png)


In "Auto scaling" section leave everything as it is and click "Next step". Review the settings and click "Create service". Once the service is created, you will be taken back to the services list page. Once the service we just created has an "Active" status, you can go to the browser and use the DNS Name of ELB to access the container.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mcglw8kurpxyrrpk3yvj.png)

To get DNS Name of ELB, select the load balancer we created earlier and the DNS Name would be shown in the description below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kpybkzcp0zk5ej99znf5.png)


Use the address in the browser to access your react app.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/elk23jd02kz23rxztlkb.png)

***
***
Next: [Attach domain to ELB](https://dev.to/mubbashir10/attach-domain-to-elastic-load-balancer-elb-3e45)

---
Let's connect: 

Linkedin: [https://www.linkedin.com/in/mubbashir10/](https://www.linkedin.com/in/mubbashir10/) 

Twitter: [https://twitter.com/mubbashir100](https://twitter.com/mubbashir100)