Introduction

In this article, we are going to cover a setup CICD pipeline using GitHub action – Github action is an automation tool provided by GitHub that allows you to automate workflows directly within your GitHub repository. With GitHub Actions, you can build, test, and deploy your code right from your repository, enabling continuous integration (CI) and continuous deployment (CD) pipelines.
GitHub Actions are YAML files in `.github/workflows` that trigger automation when events like code pushes or pull requests occur, enabling customized automated processes for your project.

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

Prerequisites

• AWS account.
• AWS account with full access or Ec2 full access.
• ReactJS project hosted in a GitHub repository.

Create an EC2 instance

Click >> launch instance, give a >>name to the instance, choose >Amazon Linux 3

Select >> your key pair, Select >> your security group and click >> launch instance

Setup GitHub action

Go to the project repository, click >> add file, and click >> create new file

Now type “.github/workflows/ “type any name.yml” and click commit changes

It will create a GitHub workflow action, now add the script to this file.

To reference my YAML script, please consult the file github-ec2.yml located in the root directory of this repository: https://github.com/easydeploy-cloud/cicd-github-ec2

Add values in the GitHub secrets

Go to >> GitHub repository, click >> settings

On the left side, select >> secrets and variables, and click >> action

Click >> new repository secret

In the name, type >> “HOST_DNS” and go back to the instance page copy the public DNS of the created instance, paste in the >> secret , and click >> add secret

Now click >> new repository secret

In the name, type >> “TARGET_DIR” and type >> “/home/ec2-user” in the secret, It will store the project objects in the ec2-user directory.

click >> add secret.

Now click again >> new repository secret

In the name, type >> “USERNAME” and type >> “ec2-user” in the secret, click >> add secret.

Now click again >> new repository secret

In the name, type >> “EC2_SSH_KEY”, copy and paste the key pair values in the secret, and click add secret.

Now we successfully added all the secrets.

Run the workflow action

Now we set all the things, go back to the project repository, click >> action

The workflow action has already started, click the >> workflow run

Click >> Re-run jobs, and  click >> Re-run all jobs

Now the workflow action is running, it takes a few minutes to finish

Now the workflow action has finished the process.

Check the instance

Go back to the instance page, copy the public ip of the instance and paste it in the new tab.

The react js project is successfully builded and deployed in the ec2 instance

Check auto trigger deployment

Now we want to check if the auto trigger is working properly or not! , go to the project repository and change some content on the main page(app.js) and

click >> commit changes

Now the auto trigger is successfully initiated to build and deploy

The auto trigger is successfully working and it builds the project and is deployed in the Ec2 instance.

Go to the instance page and click the refresh button. now the content has changed.

Setting up a CI/CD pipeline using GitHub Actions for a ReactJS application hosted on AWS EC2 simplifies and automates the development process. It ensures that code changes are automatically tested, built, and deployed, providing faster and more reliable updates. This integration enhances efficiency, consistency, and scalability, ultimately leading to a smoother and more productive development workflow.