Introduction

Deploying web applications efficiently and securely is a priority for modern developers. Azure App Service, in conjunction with GitHub and Visual Studio Code, offers a powerful combination for building, testing, and deploying web apps with Continuous Integration and Continuous Deployment (CI/CD). This comprehensive guide will walk you through creating a Web Service Plan on Azure, setting up a web app, configuring a GitHub repository, and deploying your application using Visual Studio Code.

Step 1: Create an Azure Web Service Plan

Log in to the Azure Portal:

Go to Azure Portal and sign in with your credentials.

Create a Web Service Plan

In the Azure Portal, select Create a resource.
Search for App Service and click App Service plan.

Click Create

• Subscription: Choose your subscription.

• Resource Group: Create a new resource group

• Name: Provide a unique name for your App Service plan.

• Region: Select the same region as your resource group.

• Operating System: Select Linux

Pricing Tier: Click on Explore pricing plans to view all pricing plans available

Choose a pricing tier based on your needs. For this blog, we will select the free plan option

Click Review + Create and then Create.

Step 2: Create a Web App in Azure

Navigate to App Services

In the Azure Portal, go to App Services from the left-hand menu.

Create a New Web App

Click on Create to start the web app creation process.
In the dropdown, click Web app

Fill in the required details

• Subscription: Select your subscription.

• Resource Group: Choose your existing resource group.

• Name: Enter a unique name for your web app (this will be your app’s URL, e.g., yourappname.azurewebsites.net).

• Publish: Select Code

• Runtime Stack: Choose the runtime stack (e.g., .NET, Node.js, Python) that matches your project. For this blog, select PHP 8.3

• Operating System: Select Linux.

• Region: Ensure the region matches your App Service plan.

• App Service Plan: Select the App Service plan you created in Step 1.
  Click Review + Create and then Create.

Wait for Deployment to Complete

Azure will take a few moments to deploy your web app. Once completed, click on Go to resource to view your new web app.

Step 3: Create a GitHub Repository

Log in to GitHub

Go to GitHub and log in with your credentials.

Create a New Repository:

Click on the + icon in the upper-right corner and select New repository.

Fill in the details for your repository

• Repository Name: Choose a descriptive name for your project.

• Description: Optionally, add a brief description.

• Privacy: Choose between Public or Private.

• Initialize Repository: Select Initialize this repository with a README if you want to add a README file. For this blog, we are adding a README file.

Click Create repository.

Click on <> Code, and then copy the Web app URL. This will be used when cloning the repository on Visual Studio Code

Step 4: Set Up Visual Studio Code

Install Visual Studio Code

Download and install Visual Studio Code on your computer if you haven’t already.
Install Extensions

Open Visual Studio Code and install the following extensions:

• Azure Account: For easy login to Azure.

• Azure App Service: For managing Azure Web Apps.

• GitHub: For GitHub integration within Visual Studio Code.

• GitLens: For enhanced Git capabilities.

Clone Your GitHub Repository

Open Visual Studio Code click on Clone Repository and then Clone from GitHub

Click on your recently created repository

Pick a folder to clone your newly created repository, if you don't have a folder to work with, you can click on New folder to create a folder

Click on your newly created folder, and then click on Select as Repository Destination

A prompt comes up asking if you would like to open the cloned repository, select Open

Click on the three dots at the top of the Visual Studio Code
Click on Terminal
Click on New Terminal

When the terminal opens, type git clone followed by your GitHub repository URL (e.g., https://github.com/your-username/your-repo.git) you earlier copied.

Step 5: Develop and Deploy Your Web App

Develop Your Web App

Type nano index.php, then click enter
Type <?php for the opening tab of PHP
Create a simple web page. Type echo "Hello world";
To save, click ctrl X and the enter

To add the files created, type git add ., and click enter
Type git status, and click enter to check information about things
Type git commit -m "adding index.php", and click enter

Type git push and click enter

You can refresh your GitHub to confirm it's successful.

Go to your application on the Azure portal, click on Deployment, and then on Deployment Center

Chose your code source

Fill in

• Organization: Name of your GitHub profile

• Repository: Repository you are currently working on

• Branch: Select main

Authentication type
Select Basic authentication, and then click on Save

On Logs, you can see the Status of the deployment as Success

In Visual Studio Code, create a .github/workflows directory in your repository if it doesn’t exist.
On your Visual Studio Code, type git pull, then click enter
Let's make a change to trigger an event, and then git push
On the left pane, click on index.php
We will edit echo "Hello world!";

After editing, click on ctrl S to save.
In the terminal, type git add . and click enter
Type git commit -m "updating index.php. Click enter
Type git push, then click enter
This will trigger the GitHub Actions workflow to build and deploy your app to Azure.

Go to your GitHub and refresh to see the changes and update

Go to your Azure portal, click on refresh

To confirm the success of the deployment, click on Browse

On the left pane of your Azure portal, click on Deployment slots
Click on Add slot

Fill in Add Slot with Name and Clone settings from
Click Add

Imput the Traffic %, then click Save

Deploying a web app with a CI/CD pipeline on Azure App Service using GitHub and Visual Studio Code is a streamlined process that ensures continuous integration and deployment. This guide establishes a robust environment for developing, testing, and deploying your applications.