Open In App

Website Development with Jenkins Job on AWS-EC2

Last Updated : 28 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Pre-requisites: AWS, Jenkins, Git&Github 

Jenkins is a popular open-source automation server that helps to automate different stages of software development, including building, testing, and deploying applications. It is a powerful tool that is widely used in DevOps environments to automate the process of continuous integration and continuous delivery (CI/CD).

Steps to deploy website by using Jenkins on AWS-EC2

Step 1: Click on the EC2 service.

AWS console

 

Step 2: Click on the Launch Instance.

Launch EC2

 

Step 3: Select AMI.

Select  AMI

 

 

Step 4: Select instance type and Key pair name.

Select instance type

 

Step 5: Create the Security Group.

  • Select – Create a new security group 
  • Security group name = sg-Jenkins
  • Allow HTTPS – 443, HTTP – 80, or Custom TCP Rule – 8080 for incoming or outgoing traffic from the internet
Create SG

 

Step 6: Click on Launch Instance.

Launch instance

 

Step 7: Create the GitHub Repository.

  • We will upload our Website code here
  • Copy the Repository URL
Create a new repo

 

Step 8: Know to upload the following code to GitHub. Write your code for your Website.

Source Code

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
    content="IE=edge">
    <meta name="viewport" content="width=
    device-width, initial-scale=1.0">
    <style>
        body{
            background-color: lightgreen;
        }
        h1{
           text-align: center;
        }
        
        h2{
            text-align: center;
        }
p{
    text-align: center;
    font-size: 20px;
}
    </style>
    <title>geeksforgeeks</title>
</head>
    
<body>
    <h1>GeeksForGeek</h1>
    <br>
   <h2> Website Development </h2>
   <br>
   <p> Website Development with Jenkins Job on AWS - EC2</p>
</body>
</html>
  • Upload the code in Github Repository via a Drag & Drop or using Git.
  • We already created the GitHub Repository.
GitHub Repo

 

Step 9: After successfully setup the GitHub repo Now open Jenkins.

New item

 

Step 10: Type the Item Name.

  • name – website development
  • choose – freestyle project
Select Project

 

Step 11: Click on the job configure.

  • Description – Website Development with Jenkins freestyle job
Description

 

Step 12: Source code – Git # Paste the GitHub repository URL.

GitHub URL

 

Step 13: Select the required branch to get the source code.

Branch

 

Step 14: Select Build triggers – (POLL SCM * * * * *).

Poll scm

 

Step 15: Build step – Execute Shell.

Execute shell

 

  • Commands
sudo apt install -y git
sudo apt install -y apache2
sudo systemctl start apache2
sudo systemctl enable apache2
sudo rm -rf /var/www/html
sudo rm -rf /var/www
sudo git clone <github repository> /var/www/html

Step 16: Copy and paste the above commands into the command box  and click on save 

Shell commands

 

Step 17: Click on Build and now you can see the job is in the build process. After that Jenkins will be connected with the server or Github repository

Build in processes

 

Step 18: Now open Browser and type the IP-Address with the 8080 Port number URL: http://<aws_ip_adress:8080>. You can see that website is accessible.

Accessing  the website from Internet

 

  • Website in the development phase still we can access the website via the Internet with the help of Jenkins Tool 
  • If we change the code or modify the code in the Github repository then Jenkins automatically fetches the code from the GitHub repository and uploads it to the server.

Note: If we are making changes in the source code (local system) we need to first push it to the GitHub Repository then the build will get triggered in Jenkins automatically by using poll SCM.  

Making changes in SC

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
    content="IE=edge">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
    <style>
        body{
            background-color: red;
        }
        h1{
           text-align: center;
        }
        
        h2{
            text-align: center;
        }
p{
    text-align: center;
    font-size: 20px;
}
    </style>
    <title>geeksforgeeks</title>
</head>
    
<body>
    <h1>GeeksForGeek</h1>
    <br>
   <h2> Website Development </h2>
   <br>
   <p> Website Development with Jenkins Job on AWS - EC2</p>
</body>
</html>
  • Within a minute, the website will be updated
Output Accessing from Internet

 

  • Now  the website is accessible and It is configured with Continuous Integration & Continuous Development
  • The website in the development phase is still accessible and the client can see the changes live and suggest to the development team what type of website they want or the testing team can also start the testing at the same time.

When the developer changes the code in the repository or does the commit with changes in the repository. In every commit, Jenkins will automatically pull the code from GitHub and deploy it into the webserver. It will reflect within a minute it is known as Continuous Integration & Continuous Development.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads