DEV Community

Cover image for Deploy your React, NodeJS apps using Jenkins Pipeline
Lovepreet Singh
Lovepreet Singh

Posted on

Deploy your React, NodeJS apps using Jenkins Pipeline

πŸš€ As we are working on our Open Source Project named NoMise which is being built using ReactJs, Typescript and TailwindCss. When it comes to deployment we have several options:-

  • Easy Deploy using providers like Vercel or Netlify where you have to drag and drop your code repository
  • Deploy your code in Docker container and run that container in a cloud server
  • Setup a CI/CD (Continuos Integration, Continuos delivery) Pipeline to deploy your App

Which one you'll choose?

CI/CD Pipeline meme

😎 Obviously one should go with third because of its benefits. Once you have setuped your pipeline for the deployment, you don't need to build, deploy to container and host in cloud again and again. With one click, your code will build, containerized in a docker container and deployed to cloud (AWS EC2 instance in our case).

✨ If you haven't understood, Don't worry we will go step by step.

πŸ“Introduction

First things first, what is jenkins, ci/cd pipeline and ec2 instance that we talked about above.

  • Jenkins is a tool that make our life easier with deployments and running some automated tests like to deploy manually you first need to run

    npm run build

    then copy the build folder and containerize it and then serve it on a server. It can all be done by a set of actions that jenkins provide.

  • ci/cd pipeline is continuos integration and continuos delivery which means code can be directly picked from a repository and after some tests run it will be deployed on the server

  • EC2 is nothing but a computer at the end which is provided to you as a server to which we can SSH and run our scripts, code etc.

AWS meme

Note:- Those who are thinking that AWS is paid, yes it is but with free tier you can explore many things.

πŸ“Œ Launching AWS EC2 instances

  1. Go to AWS and signup for your new account and add a Debit/Credit card. For safety add with minimum balance if you don't want to spend over the free limit.

  2. Search for EC2 and launch instances

AWS Instances

  1. Select Default settings and launch 3 instances because
  2. one we'll use to install jenkins
  3. second we'll install ansible server which will dockerise the build code that we'll get from the jenkins over SSH
  4. third instance will run a docker container that will be served to the public to access

AWS Instances

Note:- Write three to launch 3 instances

  1. Now, we'll add some security rules to our instances because to access these instances/servers some request or ssh will be made. So, it will not allow every request who is coming to access them.

  2. To Add security rules, click on security group and edit inbound rules:-

Security groups

  • Add these rules Security inbound rules

Note:- It is not good to allow any traffic but for testing it is okay.

  1. Now, It is time to ssh to your instances. But before going inside the EC2 instances, Make sure you have the key-pair (.pem file). To Download the pem file follow the below image:-

AWS EC2 Pem file

  1. I have saved the pem file in my ~/.ssh folder. And now to SSH into a particular instance, click on Connect and you'll get this window

AWS EC2 Connect SSH

Note:- Make sure you give the correct path of .pem file saved in the previous step and also you changed its access rights using chmod as shown in the picture.

  1. Now, similarly you can connect to all the instances using SSH.

πŸ“Œ Setup Jenkins, Docker and Ansible Server

Now it is the time to setup Jenkins pipeline with Ansible server and docker server.

Note:- make sure you stop the instances when you are not doing anything (If you are using AWS Free tier)

Instances Running

  1. Let's SSH into our first instance (Jenkins). For me the command to run is
ssh -i ~/.ssh/nomise_ec2.pem ec2-user@ec2-65-3-155-155.ap-south-1.compute.amazonaws.com
Enter fullscreen mode Exit fullscreen mode

After getting into the ec2 instance run the below commands one by one:-

sudo yum update –y

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key

sudo yum upgrade

sudo amazon-linux-extras install java-openjdk11 -y

sudo dnf install java-11-amazon-corretto -y

sudo yum install jenkins -y

sudo systemctl enable jenkins

sudo systemctl status jenkins
Enter fullscreen mode Exit fullscreen mode
  1. After that you'll get Jenkins running on your localhost. Go to your instance on AWS and find your public ipv4 address on the instance homepage and go to http://:8080 and the below screen of jenkins would appear

Jenkins

  • Enter this command in your terminal to get the password to enter in jenkins
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
Enter fullscreen mode Exit fullscreen mode

πŸ₯³ And that's how Jenkins will be started.


That's It for today Guys, In next Part we'll see How to build Docker Container and deploy through Jenkins.

✨ For the next Blog, Follow Now

Top comments (3)

Collapse
 
hartajsinghdev profile image
Hartaj-Singh-Dev

can you also post blog on Jenkins ?

Collapse
 
lovepreetsingh profile image
Lovepreet Singh

Blog on Jenkins means ? What is jenkins or how it works/implemented? Please elaborate

Collapse
 
hartajsinghdev profile image
Hartaj-Singh-Dev

yes extacly , what is jenkins and how it works under the hood