Step by Step Guide to deploy a web app with CI/CD pipelines on Azure App Service.

INTRODUCTION

Utilizing a CI/CD pipeline to deploy a web application on Azure App Services facilitates a more efficient development and release process. Azure integrates smoothly with platforms such as GitHub, Azure DevOps, and various CI/CD tools, allowing for automatic deployment, testing, and scaling. This guide outlines a detailed, step-by-step method for configuring and launching a web app on Azure App Services using a CI/CD pipeline.

Step-by-Step Guide

1. Prerequisites

• Azure Account: Ensure you have an active Azure subscription.
• Source Code Repository: Codebase hosted on platforms like GitHub, Azure Repos, or Bitbucket.
• Installed Tools:
• Azure CLI
• Git
• Code editor (e.g., VS Code)
• Web Application: A sample app in your desired framework (Node.js, Python, .NET, etc.).

2. Create an Azure App Service Plan

• Log in to the Azure Portal.
• Navigate to App Services > Create.

Fill in the required details:

• Subscription: Select your subscription.
• Resource Group: Create a new one or use an existing one.
• Name: Provide a unique name for your app service plan.
• Operating system: Linux
• Region: Select the nearest data center.
• Pricing Pan: Select a pricing plan
• Zonal Redundancy: Select one applicable

• Click Review + Create and then Create.

3. Create an Azure App Service

• Log in to the Azure Portal.
• Navigate to App Services > Create > Web App.

Fill in the required details:

• Subscription: Select your subscription.
• Resource Group: Create a new one or use an existing one.
• Name: Provide a unique name for your app.
• Runtime Stack: Choose the runtime environment (e.g., .NET, Node.js, Python, PHP).
• Region: Select the nearest data center.
• Click Review + Create and then Create.

3. Set Up Your Web App Locally - Using Vscode

4. Create a new repository on github and connect to your Vscode

- Create a new repository on github

- Connect Vscode to Github

• On your Vscode terminal run the code - git init
• copy and run the "remote add origin" code from your newly created repository on github

- Run the following code to complete the connection to your Github

• git add "index.php"
• git status
• git commit -m "my first commit"
• git push origin master

5. Connect the Github repository to the Azure App Services

• On the Azure App service we deployed earlier locate & click the deployment blade
• Click deployment center

On the deployment Center page select the following

• Source - Github

Wait till the deployment is complete

Copy your App Service default domain link to check your app if it been deployed

The image below confirms the app is live

Conclusion
By utilizing this guide, you have established a web application equipped with a strong CI/CD pipeline on Azure App Services. This configuration guarantees ongoing integration, automated deployments, and live monitoring, enhancing your development and deployment workflow. The synergy between Azure and GitHub, along with Azure DevOps, streamlines the process, enabling you to concentrate on developing and refining your application.