Hey People,

I wish to start this blog with a quote from my inspiration Steve Jobs(Co-founder of Apple) -

"The only way to do great work is to love what you do and continuously learn in the field you're passionate about."

I am constantly learning new technologies and building projects using them. Today I wish to share my project Tic Tac Toe game which I created using Flask Framework (Python Web Framework that is widely used to build web applications and RESTful APIs). I have containerized this application using the docker and further created a CICD Pipeline using Jenkins and used GitHub webhook in order to trigger the build process after each commit. This whole Jenkins pipeline is running on the Google Cloud and I have used NGROK to port forward the 8080 port, ie. Jenkins default port to make it publically accessible. The full process discussed above is explained below.

---

What is a CICD Pipeline?

CICD stands for Continuous Integration and Continuous Deployment. CICD Pipeline is a way to automate the software delivery process. When a developer commits the code to a repo, the Continuous Integration server (Jenkins, CircleCI, etc.) gets triggered and it is made sure that the code is buildable. If the code is buildable it is then deployed to the server. This whole process from the developer committing the code then deploying it and making it available to the testers to test it is automated using a CICD Pipeline.

Advantages of CICD Pipeline

• The collaboration between the developers and testers or maybe other teams is strongly enhanced by this.

• The software release cycle gets improved drastically.

• The software is tested after each build hence, the bugs are likely to be detected in the early stages.

• If anything goes wrong rolling back to the previous state gets easier.

• Since it's an automated way the errors due to manual intervention gets reduced.

What is NGROK?

NGROK is a lightweight platform-independent tool that makes the local machine or setup publically accessible. It is mainly used for the secure tunnel that it provides. It ensures that all the data that is transmitted through it is protected.

Port Forwarding

Port forwarding is a technique by which we can make the ports of our local machine accessible by the whole world or can say making our local setup publically accessible. NGROK provides a safe and secure way to do this through its tunnels. It allows HTTP and TCP Port Forwarding.

What are Github Webhooks?

GitHub provides an amazing feature of Webhooks by which we can get real-time information about our repository. We need to configure a webhook URL under the repository settings and then the webhook option. When any action gets performed say a commit is done then GitHub sends an HTTP Post request with a payload to the configured URL. This can be used to trigger the development process when there is a change in the code.

---

So let's get started with our Pipeline

Firstly we will need to have a machine on which we need to install our Jenkins. This machine can be a physical machine or one provided by cloud providers. In this project, I will be using Google Cloud for our Jenkins server and also the node. So let us start with the installation of Jenkins.

Installing & Configuring Jenkins:

We need to have Java installed in order to run Jenkins

curl -fsSL https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key | sudo tee
/usr/share/keyrings/jenkins-keyring.asc > /dev/null 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 sudo apt-get update sudo apt-get install jenkins

After the installation, you can run directly by typing Jenkins at the terminal or by configuring it to start at the startup. To run Jenkins at startup :

systemctl start jenkins

systemctl enable jenkins

Now further give the administrator password located at /var/ jenkins_home/secrets/ initiaIAdminPassword and proceed with the further installation.

Creating a Jenkinsfile...

Add a Jenkinsfile in your repository by which the pipeline will be created. It contains information about the tasks that are executed when the build is triggered. So here is the Jenkinfile for our project.

pipeline {
    agent any

    stages {
        stage('Cloning the repo') {
            steps {
                echo 'Clonning the repo'
                sh 'rm -rf TicTacToe'
                sh 'git clone https://github.com/sanmarg/TicTacToe'

            }
        }
        stage('Docker...') {
            steps {
                echo 'Building and deploying containers'
                sh 'docker rmi -f tictactoe'

                dir('TicTacToe') {
                sh 'docker build -t tictactoe .'
                sh 'docker run -itd --net=host tictactoe'
                }
            }
        }
        stage('Checking...') {
            steps {
                sh 'curl -I http://localhost:5000/'
            }
        }
    }
}

In the pipeline we are going to create there are three stages as you can see in the Jenkinfile, that are- "Cloning the repo", "Docker..." and "Checking...". In the first stage, we are cloning the GitHub repo of our project and deleting if there were any previously existing files of the repo. In the second stage, firstly we are removing the previously existing docker image and then creating the docker image from the docker file in repo and then running a container from the newly formed image. In the third stage, we are running a curl command in order to check whether our app is running or not.

Making the Jenkins Server publically accessible...

We will be using NGROK to forward the 8080 port with TCP protocol so that it can be publically accessed. This is a very important step as the URL that we will get after the port forwarding will serve as the webhook URL. Command to forward the 8080 port:

ngrok tcp 8080

Configuring GitHub Webhook...

After this, we will get a URL from NGROK to access the Jenkins Server. We then need to go to GitHub repo > repo settings > webhooks and configure a webhook with the URL provided by the NGROK and also append github-webhook to the URL. For example:

https://1.tcp.ngrok.io:542/github-webhook

Starting with the project...

So now login to your Jenkins server with your username and password then click on New Item to add a new project.

Here we will create a new project by providing a name and type of project and then hitting ok.

Then we will go to configure option, here we will add our pipeline script either manually write it or configure it to automatically get the script from the repo. If you are using the Pipeline script from SCM then you need to provide which SCM which Repo its branches and also the file name.

Now we have built our pipeline and we are ready to test it. For testing the pipeline click on the build now. The build process will start and you can click on the #build_num to get more information about our build. You can click on it to go to the Console log page to view logs.

Here, you can get the logs of your build whether it is successful or failed. If failed then what error caused the failure.

Once the build is successful you can test it by going to the specified port and checking whether our app is running.

Now we need to add the GitHub Personal Access Token to the Jenkins server in order to setup up CICD. Get your GitHub Personal Access Token by going to GitHub account setting > developer setting then generate a token and select the required options.

In the Jenkins manage menu you will find credentials select it to add your personal access token.

Then select the scope for the credentials and proceed to add a credential.

Here select secret text and then in the secret box add your Personal Access Token and then provide the Id to be able to distinguish it and then hit create.

Now go back to manage Jenkins then System her scroll down to find Github Server select the credentials from the dropdown option and click on test connection here you will see your username if everything is correct otherwise you can always ask for help.

Now the last thing we need to do is to check the box saying "Build when a change is pushed to GitHub" or similar in the configure option and you can again test your pipeline and see that everything is working fine. Now commit any changes to your GitHub repo you will find that as soon as you commit a change the webhook sends a POST request by which the build process gets triggered. So now our CICD pipeline is fully functional and running successfully.

---

🗝️Key Takeaways:

• CICD stands for Continuous Integration and Continuous Deployment.

• GitHub Webhook is a service by which we can get realtime information about our repo.

• GitHub Personal Access Token is unique for each user and shall be kept secret and rotated timely.

• Flask is a lightweight Python framework that is used to develop web applications and APIs.

• NGROK is used to make a locally hosted service publically accessible.

🌟Feel free to approach me if you have any doubts.

Connect with me👇