Startec

Startec

Deploy your React, NodeJS apps using Jenkins Pipeline

Mai 24, às 14:43

·

5 min de leitura

·

1 leituras

🚀 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...
Deploy your React, NodeJS apps using Jenkins Pipeline

Cover image for 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 [email protected]

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


Continue lendo

DEV

Authentication system using Golang and Sveltekit - Dockerization and deployments
Introduction Having built out all the features of our application, preparing it for deployment is the next step so that everyone around the world will easily access it. We will deploy our apps (backend and...

Hoje, às 19:52

DEV

LEARN API AND ITS MOST POPULAR TYPE
An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate and interact with each other. It defines the methods, data structures, and...

Hoje, às 19:26

AI | Techcrunch

Investors take note: Wildfire smoke will spark a surge in East Coast climate tech startups
As smoke from Canadian wildfires has enveloped large swathes of the East Coast, millions of people have found themselves trapped inside, gazing out on orange skies and hazy cityscapes. The air quality index —...

Hoje, às 18:08

DEV

A Plain English Guide to Reverse-Engineering the Twitter Algorithm with LangChain, Activeloop, and DeepInfra
Imagine writing a piece of software that could understand, assist, and even generate code, similar to how a seasoned developer would. Well, that’s possible with LangChain. Leveraging advanced models such as...

Hoje, às 18:08

DEV

Finding Harmony in Marketing and UX
When we think of teamwork in the world of user experience (UX), we often imagine design and engineering working together. However, the idea of design and marketing working together is not as common. While...

Hoje, às 17:02

DEV

💡 Where to Find Inspiration for Building Your Next App
The first steps before turning your ideas into code. Whenever I’m trying to think of an idea to build a new application or website and I get stumped on what to do, there’s one phrase that always comes to...

Hoje, às 16:58

DEV

How to create 700+ SEO optimised pages for website in 1 h using Next.JS, OpenAI, Postgres
Small intro, I started learning coding couple of months before and since then experimenting with different small side projects. So this I show coding still looks for me:) What did I build this...

Hoje, às 16:37

DEV

Angular Project Mongodb database Connect | Angular Website Project | Angular App
Angular Project Mongodb database Connect | Angular Website Project | Angular App - YouTube ​ @softwaretechit Download Our App:- https://blog.softwaretechit.com/p/download.htmlWhat will we Learn In This...

Hoje, às 16:10

AI | Techcrunch

Meta warned it faces 'heavy sanctions' in EU if it fails to fix child protection issues on Instagram
The European Union has fired a blunt warning at Meta, saying it must quickly clean up its act on child protection or face the risk of “heavy sanctions”. The warning follows a report by the Wall Street...

Hoje, às 16:03

DEV

Taking Control with PostgreSQL Functions: Closing the Gap to ORM Functionality
Unveiling the Disparity: Understanding the Divide Between Direct Driver and ORM Functionality When it comes to choosing the technologies for developing a backend and manipulating data in a database like...

Hoje, às 16:02