Introduction

In today's dynamic development landscape, automating deployments and incorporating Continuous Integration/Continuous Deployment (CI/CD) pipelines are crucial for seamless software delivery. Azure App Service offers a powerful platform for hosting web applications, and configuring a CI/CD pipeline guarantees your application remains current. In this blog, we’ll guide you through the process of deploying a web app with a CI/CD pipeline on Azure App Service using the Azure Portal.

Guided Steps

Step 1: Create a Web App in Azure App Service

Log in to Azure Portal:

Open portal.azure.com and log in with your Azure account.
Create a New Web App:

Before we begin, for learning purposes, let us select a free app service plan.
- On the search bar, search for "App Service Plan”
- Add a "Resource Group," edit the plan name, and select a "Region."
- Click the pricing plan dropdown and select the "Free F1" plan. The next step is to click “Review and Create.”
- Click on "Create."
  
  Now let’s create the “Web App”
- On the search bar, search for "App Service" and select it from the list.
- Click on the "Create" dropdown and select "Web App."
Configure the Web App:
- Subscription: Choose your Azure subscription.
- Resource Group: Select the existing resource group “web-app.”
- Name: Enter a unique name for your web app.
- Publish: Select "Code" if you are deploying code directly, or "Docker Container" if using a container.
- Runtime Stack: Choose the runtime stack (e.g., Node.js, .NET, Python) based on your application.
- Region: Select the region where you want to host your app. In this case, the region containing our price plan.
  
  As seen below, “Pricing plan” is auto generated since they are in the same region.
- Click on “Review and Create.”
- Click "Create" to deploy the web app. Wait for the deployment to complete.

Step 2: Set Up Continuous Integration

Open visual studio code.
Open a new folder “projects.”
Open the terminal, click on the dropdown, and select "Git Bash."
Add code.
```
  mkdir mywebapp
```
Add code.
```
  cd mywebapp
```
Add code.
```
  touch index.php
```
Go to the project panel, select "mywebapp," and then choose the newly created index.php file.

Add code.

  <?php
      echo "This is the PHP web app";
  ?>

Press "Ctrl+S" to save.

Open GitHub and create new repository.
Name the new repository.
Click on “Create repository.”
Go back to visual studio code and add code.
```
  git init
```

Go back to GitHub and add code.

  git remote add origin https://github.com/Chiemerie-git/my-web-app.git

Add code.
```
  git add index.php
```
Check git status.
Let's commit our work before pushing it.
- Add code.
```
  git commit -m "my first commit"
```
Now we can push it.
- Add code.
```
  git push origin master
```
Go to Azure, and on your web app page, find the deployment section. Under that, click on the deployment center.
Select source control.
- Source Control: Choose where your source code is hosted. Options include GitHub, Azure Repos, Bitbucket, and local Git.
- Authorize and Connect: If you choose GitHub or another service, authorize Azure to access your repository. Follow the prompts to connect to your source control account.
  - Branch: Choose the branch you want to deploy from. Typically, this is the main branch of your repository.

Save.
- Go to the "Logs" section to view detailed logs of the deployment process.

Let's take a look at our web app.

Access Your Web App:
- Navigate to the "Overview" section of your web app in Azure Portal.
- Find the "URL" of your web app and open it in a web browser.

Deploy a web app with CI/CD pipeline on Azure App Service

Step-by-Step Guide to Using CI/CD Pipelines for Web App Deployment on Azure App Service

Table of contents

Introduction

Guided Steps

Step 1: Create a Web App in Azure App Service

Step 2: Set Up Continuous Integration

Conclusion