React CI CD with GitHub Actions and Amazon Elastic Container Service
In this article, we are going to leverage the power of GitHub Actions and Amazon Elastic Container Service to create an automated flow that automatically builds a Docker image from your app and deploys it to your AWS ECS cluster.
We want to have in the end a React.js application hosted on GitHub, and every time we push a new change to the master branch, the new app version will be automatically built and deployed on AWS ECS, thus live on the internet to be accessed by anyone 🎆.
Step 1: Create a React Project
Make sure that you have node.js installed on your local machine and you have access to npm, now open your terminal and create a new react project type the following command in your terminal
npx create-react-app docker-react
Hit enter and wait for it to create the project open your favorite text editor I’m using visual studio code. Open the folder where we created the project and add the following docker file in the root directory of the project:
Step 2: Push the project to GitHub
Log in or create a new account in Github, create a new repository named react app and follow the procedure on how to link the remote repository to our local project:
In Visual studio code open a terminal and type git init and add all the files and push the project into the remote repository enter your ssh password wait a bit and check our GitHub repository here we can see our new first project.
Step 3: Create an Amazon ECR
Log in to your AWS account and from the console search for ECR -Elastic Container Registry.
In the Amazon ECR page click get started and enter the repository name then, click create repository.
Copy the repository URI we will use this when we create an ECS task definition.
Step 4: Create Amazon ECS
Once again login to your AWS account and from the console search for Amazon ECS- Elastic Container Service.
On the left side click amazon ECS task definitions and click create new task definition, from the options select ec2 and click next
Add a task definition name and set task memory to 128 mb and set task CPU unit to 1 vCPU and then click the add container button.
A new form will appear asking for container settings. In the container name enter your container’s name and in the image, enter the ECR URI that we have created earlier. Under port mappings set host port to 80 and container port to 80. Click add.
Now we will create the cluster, on the left side click Amazon ECS clusters. Select create cluster and then select EC2 Linux + networking and set the required fields.
Add your cluster’s name and set ec2 instance type to t2 micro and leave the rest settings as it is. Under the networking section select a VPC if you already have one otherwise let it create for you. Select the subnets if you already have them and select a security group that allows public access or in our case expose fort 80 to the world and then click view cluster
Under the services tab click create and set the following fields set the launch type to ec2 and add a service name (eg-ReactService) number of task to 1 and percent from 0 to 100
Left all the other settings as it is as we will not use a load balancer and click create the service.
Step 5: IAM - Create AWS access key
Login into your AWS account and search for IAM on the console. Click create a new user and add the required details and remember to give the programmatic access and on the permissions tab give the use administrator access.
Make sure to download the CSV file, this is the credentials of the user that we will use later in Github Actions.
Step 6: GitHub Actions
log in to your GitHub account and open the project that we have created earlier. Go to the settings tab → Secrets menu →Add secret
- The first secret will contain the AWS access key id.
- The second one is your AWS secret access key.
Now we will add the GitHub actions. Open the project and click the Actions tab. Search for DEPLOY TO AMAZON ECS →Setup this workflow and follow the steps provided in the yml file and edit the file accordingly.
After completing the steps commit this new file. Github will automatically create this new file inside your repository.
After all the changes has been done push your React project to this GitHub repository
Test
Now every time we push a new change to the master branch, the new app version will be automatically built and deployed on AWS ECS, thus live on the internet to be accessed by anyone
