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.
Below is the Deployment of PreshWebApp.html using Azure App Service
Hope You Have Added Value.
Its Been Omoniyi, S. A. Precious (Presh)
Top comments (0)