Website Development with Jenkins Job on AWS-EC2

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.

 

Step 2: Click on the Launch Instance.

 

Step 3: Select AMI.

 

 

Step 4: Select instance type and Key pair name.

 

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

 

Step 6: Click on Launch Instance.

 

Step 7: Create the GitHub Repository.

  • We will upload our Website code here
  • Copy the Repository URL

 

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

 

<!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>w3wiki</title>
</head>
    
<body>
    <h1>BeginnerForGeek</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.

 

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

 

Step 10: Type the Item Name.

  • name – website development
  • choose – freestyle project

 

Step 11: Click on the job configure.

  • Description – Website Development with Jenkins freestyle job

 

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

 

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

 

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

 

Step 15: Build step – 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 

 

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

 

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.

 

  • 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.  

 

<!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>w3wiki</title>
</head>
    
<body>
    <h1>BeginnerForGeek</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

 

  • 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.



Contact Us