DEV Community

Cover image for How to Deploy a Web App with CI/CD Pipelines on Azure App Service
OLALEKAN john Ayansola
OLALEKAN john Ayansola

Posted on

How to Deploy a Web App with CI/CD Pipelines on Azure App Service

Azure App Service provides a fully managed platform for building, deploying, and scaling web applications. By leveraging CI/CD pipelines with Azure DevOps, you can automate your build and release processes, ensuring faster and more reliable deployments.

Key Benefits:

  • Automation: Reduce manual effort and human errors.

  • Consistency: Achieve repeatable deployments across environments.

  • Speed: Deploy updates quickly, improving your development lifecycle.

In this blog post, we’ll guide you through the process of deploying a web application to Azure App Service using Continuous Integration and Continuous Deployment (CI/CD) pipelines. Whether you’re a developer or a DevOps engineer, this step-by-step guide will help you streamline your deployment process with the power of Azure DevOps.

Prerequisites
Before starting, ensure you have the following:

  • An Azure account with an active subscription

  • A web application project
    (e.g., Node.js, .NET Core, Python, etc.).

  • An Azure DevOps account with a project created

  • Git installed and your code pushed to a repository
    (e.g., GitHub, Azure Repos)

Step 1: Set Up Your Azure App Service

portal

  • Create a New App Service plan

  • In the search bar, type App Services plan and select it.
    App plan

  • Click on + create

create

Fill in the required details, including:

  • Subscription: Select your subscription.

  • Resource Group: Create a new resource group or use an existing one.

  • Name: Provide a unique name for your app service plan

  • Select the operating system

  • Region: Select a region close to your users.

reource

  • Select the Pricing tier
    pricing

  • Click Review + Create and then Create to deploy your App Service.

Review

  • Click on go to Resource

Go to resource

In the search bar, type App Services and select it.

app service

  • Click on + Create and choose Web App.

web app

  • Fill in the required details: (resource group that was created earlier, subscription, web app name, pubish, Runtime stack

web

webs
Review, and then create

create

create

  • Click on go to resource

resource2

Step 2: Set up your local development Environment
Install visual studio code and Github if you don't have any before

  • Step 3: Initialize Github Repository and create web app in visual studio code

  • Click on + and select new repository

New Repo

repo

  • Click on create new Repository

new repo

  • Initailize Git from Visual studio code terminal git bash Run git init to inittialize a Git repository.

init

  • Run git add to stage your files

git add

  • Run git status git status

Run git clone url from the repository created earlier

  • Run nano index php

nano

  • Enter control X and then press Y follow by enter

yes

  • Run cat index php cat index

Step 5: Back to azure portal page

  • Go to your Azure portal mywebapp2020 page.

  • Navigate to Deployment section, select Deployment center
    Deployment

  • Select code source, Select Github

github

  • Select source as Github

  • Organization is you Github username

  • Select the repository Name

repos

git

  • Select preview the file

preview

review

  • Click on save to setup Deployment

save

  • Deployment succesful

succesful

Step 6. Deploy the Application

Commit and push: Commit and push your changes to Github. The Github actions workflow will automatically start, build and deploy your application to azure app sevice.
You needed to upgrade from F1 to premium to be able to deploy

uprage
Upgrade to premium standard S1 at least

standaard

upgrade

  • Add slot immediately after the upgrade

add slot

  • Give name to the slot and set the source of clone

Slot name

  • Click on add slot

add slot

  • CI/CD runing

cI

Step 7. Monitor Deployment
You can monitor the Deployment progress in action on Github .
Once deployed, your web app should be accessible via azure app service. URL

Monitor

CONCLUSION

By following these steps, you can set up an automated CI/CD pipeline for your web app, enabling efficient and reliable deployments on Azure App Service.

Top comments (0)