Deploying Web App With CI/CD Pipeline On Azure

• Azure is the Cloud computing platform and Suite of cloud services provided by Microsoft.
• Azure provides various services including building and deploying web apps, logic apps, configuring databases, etc.
• In this article, let us understand the step by step how to deploy a Web App with CI/CD pipeline on Azure app service.

Step 1; Create and set up your Microsoft Azure account

• Sign in to your Azure Portal
• After signing in, you will preview this dashboard.

Create Your App Service Plan

• On the search bar of the dashboard, type app service plan and click on it and create

In the Basic tab
Under Project Details

• Choose your subscription.
• Create new Resource group or choose the existing one. Under App Sevice Plan
• Enter the name of your App service
• Select the operating system that will integrate Github action either Linux or Windows
• Select the region close to you

Under pricing tier

• Click on expolore pricing plans to access free plan
  Under Access App Service Pricing Plans

• By default leave it at hardware view

• Select free plan

• Click on select
  Under zone redundacy

• Leave it at Disabled

• Click Review + Create to Validate
  

• Click on Create for depolyment

• Go to Resource
  
  Step 2; Create App Service

• On Azure dashboard search for app services

• Open it on new tab

• On the + create dropdown, click on web app

• Proceed for Configuration
  
  On the Basics tab
  Under Project Details

• Select your Subscription

• Use the existing Resource group
  Under Instant Details

• Choose the name of your web app and confirm the avaliability by unchecking the botton

• Leave the publish at code

• For runtime stack, select PHP 8.3

• Operating system is at Linux by default

• Select the region of your choice

• Leave others in default position
  
  

• Select next Deployment
• Leave Networking, Monitor + secure Tags in default

• Click on review + create
  
  Step 3; Create New Repository

• Login to your Github account

• Create new account and follow the prompt

• If you already have account, login directly

• Click on Create Repository
  

• Make sure you fill in the neccessary fields

• Repository name

• Description is optional

• Leave it in Public window

• Add a readme file

• Leave others in default

• Click on Create

Create the VsCode to Clone the Repository

• Click on Code dropdown
• Copy the web url to clone by pasting it on a browser
• Open the already Installed VSCode in your system
• You will be prompted to Login with your Github details for integration with VSCode
• You can clone the repository at the Github bar from the dropdown, you will see the file name created

• You can also clone directory at Git Repository
  -Clone using the terminal to be more professoional

• Click on the terminal botton on the three dots at the left upper window close to Run icon

• Follow the prompt to create new terminal

• Switch from powershell to Gitbash though both works
  

• Type git clone which is the command or keyword used to clone the application which is the repository we just created

• Copy the code Url link of the repository and paste after git clone

• Hit the enter key and wait for the cloning prompt
  

• Create directory project

• Create cd project

• Create git clone plus repository link all in powershell

Open a folder to view the cloned file

• Go to file icon at the upper right side of Vscode
• From the dropdown, locate create a folder
• Locate the folder following the prompt
• Select the folder and open to view the created folder

Create a file

• On Vscode, click on the terminal on top of bar
• Switch to gitbash
• Input touch index.php
• Type cd romanusapp and observe the change in directory
• Type touch index.php
• Observe thier appreance at the upper left side of Vscode You can run html file
• Impute nano idex.php
• We can do simple expression like <?php echo:helow World"
• If we have html file that will still be alright
• From your computer keyboard, use control x to exist
• Choose Yes and press enter to save
• Impute cat index.php to see our output
• Back to Azure portal to make our connection at Depolyment center
• Click select code source to view avaliable connection options including CI/CD
• Select Github

Step 4;Push The Repository Created