A Cloud Architect Company
Amazon Web Services

How to setup CI/CD pipeline to automate build and deployment to React js project on Gitlab pipelines


In this article we are going to setup CI/CD pipeline to automate build and deployment to React js project on Gitlab pipelinesGitLab CI/CD, often referred to simply as GitLab Pipelines, is a built-in continuous integration and continuous deployment (CI/CD) service provided by GitLab, a web-based Git repository manager. Similar to Bitbucket Pipelines, GitLab Pipelines allows you to automate various stages of your software development workflow. GitLab Pipelines streamlines your development workflow by automating repetitive tasks, improving code quality through automated testing, and facilitating rapid and reliable deployments.

If you would like to follow a video tutorial please use our YouTube video.


ECS is a fully managed container orchestration service provided by Amazon Web Services. It enables you to run, stop, and manage Docker containers on a cluster of virtual machines that are managed by AWS. ECS simplifies the process of deploying, managing, and scaling containerized applications.


ECR is a fully managed Docker container registry service provided by Amazon Web Services. It allows you to store, manage, and deploy Docker container images securely. ECR is tightly integrated with other AWS services, particularly Amazon ECS and Amazon Elastic Kubernetes Service, making it easy to deploy containerized applications on AWS infrastructure.


  • AWS account.
  • AWS account with ecr and ecs full access.
  • Basic knowledge about Gitlab Pipelines.


  • Engineer


Go to the Gitlab repository where we have the React js source code > settings > CI/CD

Gitlab Repository

Expand the Runners and enable it >

CI/CD Settings

Expand the variables > Give the necessary variables (i.e  Region , access and secret access key , ecs and ecr variables)

Adding CI/CD Variables

This is our pipeline file. check this repository for the pipeline file https://gitlab.com/yuvasakthi/gitlab-laravel.git

Gitlab Pipeline file

Gitlab Pipeline file

Click on Build > Go inside pipelines.


Click on run pipelines.

Running pipeline

Pipeline is in build stage.

Build stage


ECS is sucessfully deployed.

Go inside the ECS console > go inside the cluster we created > go inside newly created task

New task

Copy the public ip of that Task.

Copy task Public ip

Now search for the public ip.

React js app

React js app is successfully running.

Now lets change the source code and see whether the pipeline is running or not > Scroll down and click on Commit.

Changing source code

Now go inside pipelines.

Pipeline Running

You can see that the pipeline Got Auto triggered and running.


ECS is successfully deployed.

Go to the ECS console > go inside the cluster > Go inside the newly created task

New task

Copy the public ip of that task.

copy task public ip

Search for the public ip.


You can see that the React js got Deployed.

When we changed the source code, the pipeline got auto triggered and the content was changed.



Should you require help in performing the pipeline steps, feel free to contact at our email id [email protected]

Website – www.easydeploy.io/contact-us

Leave a Reply

Your email address will not be published. Required fields are marked *

back to top

Contact Us to save your AWS bill by 40%