Create a CI/CD flow to deploy the React App via Jenkins

Description:

• Launch 2 EC2 server, 1st for Jenkins and 2nd for App deployment.
• On 1st server install and configure Jenkins
• On 2nd server, install the dependencies to run the react app.
• Create a react project.
• Upload this react project in GitHub.
• Make a CI/CD flow to deploy the code via Jenkins.

Step-1: Launch 2 EC2 server, 1st for Jenkins and 2nd for App deployment

Firstly, log in to the AWS management console.

After login, navigate to the search bar, type EC2, and select EC2

Now, the EC2 dashboard will appear. Click Instances

Click the Launch instances button.

To launch an EC2 instance, a few details are required, i.e., instance name, OS image (AMI), instance type, etc.

Select a key pair to attach with the instance to log in with that key. If you do not have key pair, then create a new key pair by clicking Create a new key pair. Moreover, according to usage, download key pair in .pem or .ppk format.

Now, to allow traffic from the internet, we need to create a rule in network settings.

We are good to go to launch an instance for this. Click the Launch instance button. If everything is correctly set up, you will find a success message on the screen. Click on the instance id to navigate to the EC2 dashboard.

Similarly, create another EC2 instance for app development.

Step-2: On 1st server install and configure Jenkins

Now, take the public IP from the EC2 dashboard and use it to login inside the instance using ssh. First move to the directory where the key is downloaded. In my case it's in downloads directory.

After logging in, first update local package index using sudo apt update

Jenkins require jdk to run so let's install jdk using sudo apt install default-jdk -y

To check jdk is successfully installed or not use java -version

Now to install jenkins, follow below steps these are provided on jenkins official website also:

1. Add the key to your system using:

curl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo tee \
    /usr/share/keyrings/jenkins-keyring.asc > /dev/null

2. Then add a Jenkins apt repository entry:

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
    https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
    /etc/apt/sources.list.d/jenkins.list > /dev/null

3. Update your local package index, then finally install Jenkins:

sudo apt-get update
  sudo apt-get install fontconfig openjdk-11-jre
  sudo apt-get install jenkins

To check jenkins is successfully installed or not use jenkins --version

Now, check the status of jenkins service using sudo systemctl status jenkins

As jenkins, by default runs on port number 8080 so we need to create firewall rule to enable port 8080. So that jenkins can be accessed using INSTANCE_PUBLIC_IP:8080

For this click Security as show in screenhot below then on secuity group that start from sg-......

Here, click Edit inbound rules then on Add rule

add rule for 8080 port from anywhere i.e. 0.0.0.0/0 then click Save rules

Now try to hit <INSTANCE_PUBLIC_IP>:8080

As stated in above screenshot, to login to jenkins dashboard we have to provide admin password which is stored in /var/lib/jenkins/secrets/initialAdminPassword to see password use sudo cat /var/lib/jenkins/secrets/initialAdminPassword

Now, its asking to install plugins but we don't want to install so click on cancel

then click start using jenkins

As we have cancelled to install jenkins plugins so it also cancelled setting admin password. So we need to set admin password else if we logout we won't be able to login again.

So let's create/change admin password. For this click Manage Jenkins then in Security section click Manage Users

Now click on setting button of admin user

Scroll down and look for password section then enter password that you want and click Save

Now again search for INSTANCE_PUBLIC_IP:8080 form any browser and enter username and password

Now let's quickly configure 2nd instance as jenkins worker then we have to build react app and deploy it on nginx.

Again we have to install jdk in worker node also. For this, first update local package index using sudo apt update then install jdk using sudo apt install default-jdk -y

As this instance is linux type so to work as worker node we need to launch agents over SSH. For this we need to install SSH Build Agents plugin. For this click manage jenkins

In this page click Manage Plugins

In available search SSH Build Agents and select then click Download now and install after restart

Now we are good to go to connect worker node with master node.

Now, head to the jenkins dashboard. Click Manage Jenkins then click Manage Nodes and Clouds

Click New Node

Now, enter node name and select Permanent Agent then click create

Fill few details like No. of executors, Remote root directory, Usage, Launch method, Host, Credentials, Host Key Verification Strategy are required.

To connect this worker node to master node jenkins need to install agent for this jenkins requires username and private key of worker node.

Then finally click save. Now navigate to Manage Jenkins then Manage Nodes and Clouds.

As you can see worker node is successfully connected to master node.

Step-3: On 2nd server, install the dependencies to run the react app

First, we need to install nodejs. npm comes with nodejs bundled. To install nodejs, use below commands:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

To check nodejs is successfully installed or not use node -v

Also, npm and npx is already installed. Use npm -v and npx -v to check version of npm and npx

Step-4: Create a react project

Now to create react project we use yarn instead of npx. For creating react project use below commands:

sudo npm install -g yarn
sudo yarn global add create-react-app
sudo create-react-app <APP_NAME>

Step-5: Upload this react project in GitHub

React project is successfully created now time to upload this project to GitHub. For this create an empty repo in GitHub.

Now copy the repo url and clone in from worker node using git clone https://github.com/mannansiddiqui/react-app-using-jenkins-pipeline.git

Now move/copy all files/folders from react project directory i.e. testapp to repo directory i.e. react-app-using-jenkins-pipeline using cp -r testapp/* react-app-using-jenkins-pipeline/

Now from repo directory i.e. react-app-using-jenkins-pipeline run git status.

It will show all files untracked. To keep all files tracked by git use git add .

Now again run git status to check status

As you can see now all files/folders are tracked by git. Now we have to commit all files/folders then push it to GitHub after providing GitHub credentials.

For commit use git commit -m "First Commit" .

Now time to push to GitHub using git push

Files/Folders are successfully pushed to GitHub repo.

Step-6: Make a CI/CD flow to deploy the code via Jenkins

Now we need to create a pipeline for next steps. But before this we have to install some plugins. First we require a Pipeline plugin to create a pipeline. Second we require GitHub plugin so that jenkins can interact with GitHub to download repo and many more things.

To install plugins navigate to Manage Jenkins then Manage Plugins and in Available search for Pipeline plugin and GitHub plugin then select and click on Download now and install after restart also don't forget to click on restart after download completes.

After restart you will get jenkins dashboard

Time to create a job. Enter job name and select Pipeline then click on OK.

We want as developer commit and push code to GitHub this job trigger and deploy the new code. For this we have to enable webhook inside GitHub repo.

First click on settings of GitHub repo

Here click on Webhooks

Now click on Add Webhook it will ask you GitHub password

Now provide details of jenkins master i.e. Payload URL http://<INSTANCE_PUBLIC_IP>:8080/github-webhook/ and select Content type application/json lastly select Just the push event it means as the push event occurs in this repo webhook will trigger the jenkins job so click Add webhook.

Moving back to the job

In Build Triggers select GitHub hook trigger for GITScm polling this means that trigger this job as the event occurs on repo.

Now write the Groovy script to deploy react app and click on Save

pipeline {
    agent { label 'Slave-1' }

    stages {
        stage('Deploy React App') {
            steps {
                checkout([$class: 'GitSCM', branches: [[name: '*/main']], extensions: [], userRemoteConfigs: [[url: 'https://github.com/mannansiddiqui/react-app-using-jenkins-pipeline']]])
                git branch: 'main', changelog: false, poll: false, url: 'https://github.com/mannansiddiqui/react-app-using-jenkins-pipeline.git'
                sh 'sudo npm run build'
                sh 'sudo apt install nginx -y'
                sh 'sudo cp -r $WORKSPACE/build/* /var/www/html/'
                sh 'sudo systemctl restart nginx'
            }
        }
    }
}

Now make changes in App.js file under src directory and commit so that job can be triggered automatically.

As you can see job is triggered as the push/commit event occurs and successfully completed.

Now let's hit <INSTANCE_PUBLIC_IP> and see results.

React app is not showing because we have'nt created rule for port no. 80 in security group. So, lets enable port 80.

In security group, click Edit inbound rules and allow port 80 and click Save rules

Now again hit <INSTANCE_PUBLIC_IP>

Site is showing now...

Thank you...