Deploying a Web App with CI/CD Pipeline on Azure App Service

Contents
Introduction
Step 1: Create an Azure App Service plan
Step 2: Create an Azure App Service
Step 3: Create a GitHub Repository
Step 4: Clone Your Repository Locally
Step 5: Set Up Deployment Center in Azure App Service
Step 6: Test Your CI/CD Pipeline

Introduction

Deploying a web app with a CI/CD(continuous integration and continuous deployment) pipeline on Azure App. With Azure App Service and Source control like GitHub, Bitbucket or Azure Repos, setting up a CI/CD pipeline for your web app becomes a streamlined process. It ensures that your application is automatically integrated and deployed, reducing the manual intervention required and minimizing the risk of errors. In this article, we will walk you through the steps to deploy a web app with a CI/CD pipeline on Azure App Service using GitHub. By following the steps outlined, you can efficiently deploy and manage your web applications in Azure.

Prerequisites

Before you begin, ensure you have the following:

1. An Azure account (sign up here for free if you do not have one).
2. A GitHub account for source code management. Sign up here if you do not have one.
3. A Visual studio code installed. Click here to download and install if you do not have one installed.

back to content

Step 1: Create an Azure App Service plan

Creating an App Service plan on Azure is a key step before deploying your web app. The App Service plan defines the region, pricing tier, and scale of your web app.

• Log in to the Azure Portal Go to https://portal.azure.com and sign in with your Azure account.
• In the search box, type App Service plan and select it from the dropdown list.

• Click on Create.

• Configure the App Service Plan Basics and Pricing Tier:
  • Subscription: Select the Azure subscription you want to use.
  • Resource Group: Choose an existing resource group or create a new one.
  • Name: Enter a name for your App Service plan.
  • Operating System: Choose between Windows or Linux based on your app requirements.
  • Region: Select the region where you want your App Service plan to be hosted. Choose a region close to your users to reduce latency.
  • Click on explore pricing plans to explore and select the pricing tier.
  • Choose a pricing tier that fits your needs. The tiers range from free and shared plans for development/testing to standard and premium plans for production workloads.
  • Click on select once you have selected the appropriate pricing tier. Here we are using free tier.

• Click Review and Create

• Click on Create after validation has passed to create the App Service plan .

back to content

Step 2: Create an Azure App Services

Creating an Azure App Service is pretty straightforward. Here are the detailed steps to create an App Service on Azure:

• In the search box, type App Services and select it from the dropdown list.
• Click on Create choose the type of app services of your choice. Here we will be working with web App.

• Configure the Web App Basics
  • Subscription: Select the Azure subscription you want to use.
  • Resource Group: Choose an existing resource group or create a new one.
  • Name: Enter a unique name for your web App (this will be part of your app's URL).
  • Publish: Select the type of code you want to deploy (Code, Container or static web app).
  • Runtime stack: Choose the runtime stack (e.g. php, .NET, Node.js, Python, Java) for your application. Here we will be using php 8.3.
  • Operating System: Choose between Windows or Linux based on your app requirements. Here we will be using Linus.
  • Region: Select the region where you want your App Service to be hosted.
• Pricing Plan
  • Click to select app service plan. Choose the app service plan created earlier or Create new to create a new App Service plan if you do not have an existing one.
• Click Review + create: to review your configuration settings.

• Click on Create after validation is passed to create the App Service.

back to content

Step 3: Create a GitHub Repository

• Sign In to GitHub with your GitHub account credentials.
• click on the + icon in the upper right corner of the page.
• Select New repository from the dropdown menu.

• Enter a name for your repository. The name should be unique to your account and should be descriptive of your project.
• Description (optional): Add a short description of your project.
• Choose whether you want your repository to be Public (anyone can see it) or Private (only you and people you explicitly share it with can see it).
• Initialize this repository with:
  • README: Check this box to add a README file, which is a great place to describe your project and provide instructions for others.
  • .gitignore: Check this box to add a .gitignore file. Select a template that matches the type of project you're working on (e.g. PHP, Node, Python, Java).
  • License: Check this box to add a license file. Select a license that you want to apply to your project.

• Click on the Create repository button once you have configured the repository settings.

back to content

Step 4: Clone Your Repository Locally

To work on your project locally, you need to clone the repository to your local machine. Here, we will use git bash on visual studio code terminal.

• Go to your newly created repository on GitHub. -Click the Code button.
• Copy the URL provided.

• Open a new terminal on visual studio code.

• Switch to git bash

• Make a directory where you want to clone your repository.

mkdir <repository_name>

Replace <repository_name> with the name of your repository. Example is mkdir Project.

• Navigate to the directory.

cd <repository_name>

Replace <repository_name> with the name of your repository. Example is cd Project.

• Run the following command:

   git clone <repository_url>

Replace <repository_url> with the URL you copied from GitHub.

• Add Files, Make Commit and Push
  • Create a file:

   touch <filename>

Replace <filename> with the name of your file.
Example is touch Index.php.
A file Index.php will be created, open it, then copy and paste a simple web app below and save.

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
</head>
<body>
    <?php
        echo "Hello, this is my first web app!";
    ?>
</body>
</html>

• Add files to your repository.

   git add .

• Commit the changes:

   git commit -m "Adding Index.php"

• Push your code (file) to the GitHub repository: Use the command below.

   git push origin main

Replace main with the default branch name if it's different.

• File push confirmation. Go to GitHub to confirm the file pushed is resident .

back to content

Step 5: Set Up Deployment Center in Azure App Service

• Navigate to your Web App in the Azure Portal.
• In the left pane, select Deployment and then Deployment Center.

• Choose GitHub as the source control.

• Click Authorize to give Azure access your GitHub account if you have not already. Sign in to your GitHub and authorize.

• Select your GitHub username for organisation.
• Select the repository and branchyou want to deploy from.

• Under Authentication setting Choose authentication type and subscription. If you choose user assigned identity, you need to create the user identity assignment. you can click create new to get it created automatically for you. If you choose basic, you need to go to configure setting to enable SCM basic authentication. Here we will use basic authentication. Ensure to save your changes after configuring the setting.

• Workflow Configuration: CI/CD pipeline. A YAML file will be auto-generated for the GitHub Actions workflow. This is the CI/CD pipeline. Click preview file to preview the work flow and edit if need be. Here is an example of what the workflow might look like:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy PHP app to Azure Web App - My-webapp123

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: '8.3'

      - name: Check if composer.json exists
        id: check_files
        uses: andstor/file-existence-action@v1
        with:
          files: 'composer.json'

      - name: Run composer install if composer.json exists
        if: steps.check_files.outputs.files_exists == 'true'
        run: composer validate --no-check-publish && composer install --prefer-dist --no-progress

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: php-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: php-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v3
        id: deploy-to-webapp
        with:
          app-name: 'My-webapp123'
          slot-name: 'production'
          package: .
          publish-profile: ${{ secrets.AzureAppService_PublishProfile_bf7ee8a6c0d4486fae6bfd525ceda399

• click save to move to logs. Wait for deployment to complete in GitHub action.

back to content

Step 6: Test Your CI/CD Pipeline

• Go to your web app overview page and copy the default domain url.

• paste in a browser new window and see your web app content. Here is the content of my webapp.

• Make a commit to your repository in GitHub or push new changes from your local repository.
• Go to the Actions tab in your GitHub repository to monitor the workflow.
• Ensure that the workflow runs successfully and your app is deployed to Azure.
• Refresh the default domain url page to see the changes.

Here is the content of my webapp update.

back to content