DEV Community

Cover image for Deploying a web app with CI/CD pipeline on Azure App Service.
Abisola Adesegun
Abisola Adesegun

Posted on

1

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

Deploying a web app with a CI/CD pipeline on Azure App Service involves several steps, from creating the web app to setting up the CI/CD pipeline. Here's a detailed guide:

Prerequisites

  • Azure Account: Ensure you have an active Azure subscription.

  • Source Code Repository: Your web app's source code should be in a Git repository (e.g., GitHub, Azure Repos, Bitbucket).

  • Visual Studio Code: Install VSC for command-line operations.

  • CI/CD Tool: You can use tools like GitHub Actions, Azure Pipelines, or any other CI/CD service.

Create an Azure App Service
Login to Azure Portal:

  • Go to the Azure Portal.

  • Sign in with your Azure account.

Create the Web App Plan:

  • In the Azure Portal, search for "App Services plan" and click "Create."

Image description

Image description

  • Create or select an existing Resource group

  • Provide a name for the app service plan

  • Select Operating system and region

Image description

Image description

  • Click "Review + create," then "Create."

Image description

Image description

Create the Web App:

  • In the Azure Portal, search for "App Services" and click "Create."

Image description

Image description

  • Select the resource group created earlier.

  • Provide a name for the app service, which will be the domain name (.azurewebsites.net).

Image description

  • Choose a runtime stack (e.g., .NET, Node.js, Python).

  • Select the region and a pricing plan.

Image description

  • Click "Review + create," then "Create."

Image description

Image description

Image description

Configure the CI/CD Pipeline

Using GitHub Actions:

Connect Azure App Service to GitHub:

  • Navigate to your App Service in the Azure Portal.

  • In the left-hand menu, select "Deployment Center."

Image description

  • Under "Source," select "GitHub."

  • Authenticate with your GitHub account.

Image description

Image description

Image description

  • Choose the repository and branch you want to deploy.

Image description

Set Up Your Local Development Environment:

  • Initialize Git from Visual studio code terminal:

Image description

  • Create a directory

Image description

  • Enter into directory

Image description

  • Clone the directory

Image description

Image description

  • Enter into the file

Image description

  • Touch the file eith index.php

Image description

  • Nano into the file using nano index.php

Image description

  • let use simple expression

echo "Hello world" which is an output

Image description

  • save and enter

Image description

  • Read the output of the file using the followig commans

git add .

then git commit

Image description

Then push

Image description

Result

Image description

Click Browse to read the output

Image description

Edit the output message and push again

  • Add

Image description

  • Commit

Image description

  • Push

Image description

  • Result

Image description

  • Browse

Image description

Conclusion
You now have a web app deployed on Azure App Service with a CI/CD pipeline configured. This setup ensures that every time you push code changes, your web app is automatically tested and deployed, ensuring faster and more reliable updates.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay