WEB APP DEPLOYMENT WITH A CI/CD PIPELINE ON AZURE APP SERVICE USING GITHUB AND VS CODE

Today's focus is to deploy an already built html file on Azure App Service using CI/CD Pipeline.

DEFINITION OF TERMS
WEB APP:A web application (web app) is an application program that is stored on a remote server and delivered over the internet through a browser interface eg netflix, canva, pinterest, spotify etc.

AZURE APP SERVICE: App Services are an interconnected pool of internal and external services, like containers that provide the platform to build and deploy web, mobile, or integration applications.

CI/CD PIPELINE:CI/CD, which stands for continuous integration and continuous delivery/deployment, aims to streamline and accelerate the software development lifecycle.
Continuous integration (CI) refers to the practice of automatically and frequently integrating code changes into a shared source code repository. Continuous delivery and/or deployment (CD) is a 2 part process that refers to the integration, testing, and delivery of code changes. Continuous delivery stops short of automatic production deployment, while continuous deployment automatically releases the updates into the production environment.

1. SET UP A LOCAL DEPOSITORY TO PUSH THE FILE

Install VSCode
Call up VSCode
Open up the folder that has the file to be deployed

The file to be deployed is PreshWebApp.html and its resident in WEBSITE folder.

On VSCode, go to the 3dots beside Run, select Terminal, then select New Terminal. This opens a terminal below, issue the following commands...

git init - to make the WEBSITE folder a git repository
git status - to know git status if there are files yet to be added or already added. From the image below, there are 2 files yet to be added i.e Presh.txt and PreshWebApp.html.
git add filename i.e PreshWebApp.html in this case
git status - this now shows that PreshWebbApp.html has been added.

2. CREATE A REMOTE REPOSITORY AND GET FILE FROM LOCAL REPOSITORY

Go to www.git.com, register and log in
Create a Remote Repository

Enter the parameters of the proposed remote repository, make it public, add a read me file and create Repository

Copy the url of the remote repository, this is the direction that the vscode will be pointed to so as to connect to the remote repository

Go back to VSCode to connect it to GitHub with the copied link.

Issue the following commands

git commit -m " commit message" - This command saves the file and gets set to be pushed to the remote repository
git push (url of the remote repository) - This command pushes the file to the remote repository

CREATE A WEB APP USING AZURE APP SERVICES
Login to www.portal.azure.com. Search for app services, click on app services from the drop down.

Click on CREATE, then WEB APP

Customize the parameters as below.

Click on Create afterwards

Click on GO TO RESOURCE to have an overview of the created Web App.

4. DEPLOY THE HTML FILE
At the overview page of the Web App, go to Deployment Center, Select the source of your file (ie the tool, GITHUB) and authorise

Click on AUTHORISE AZURE APP SERVICE, this gives access to Azure App Service into GitHub to get the file for deployment. Enter all needed parameters.

The Workflow file is as in the image. CI/CD procedures for automation are as depicted in the file. This same file will be synced with GitHub for Git Action to implement also. Remember to save after all and done.

Click on Browse to access the HTML file on the browser OR click the url on the DEFAULT DOMAIN in the webapp overview page.

The same CI/CD workflow will be push to Git Action for implementation as below

Its necessary to configure the deployment slot to all seamless integration and deployment so at to avoid reduce down time. It tells the percent to migrate at the smell of new deployment.