DEV Community

Cover image for How to deploy a Web App with CI/CD pipeline on Azure app service.
Akinsooto Abidemi
Akinsooto Abidemi

Posted on

How to deploy a Web App with CI/CD pipeline on Azure app service.

Deploying a web app with a Continuous Integration/Continuous Deployment (CI/CD) pipeline on Azure App Service using GitHub and Visual Studio Code involves several steps which i will be discussing below:

1. Setup Your Azure Account & Create a Web App:

  1. From the home page, search for App Service Plan as seen in the image below. Image description
  2. Click on create. Image description
  3. Fill in the required details (Subscription, Resource Group, Name, Operating system, Region, etc.). Image description
  4. Choose your preferred pricing plan. Then click Review + Create. Image description
  5. Click on create. Image description
  6. Click on Go to Resources. Image description
  7. Click on webapp-plan. Image description Image description
  8. Search and click on web app to create one. Image description Image description Fill in the required details (Subscription, Resource Group, Web App Name, pubish, Runtime Stack, etc.). Image description Review + Create. Image description Image description Image description

2. Set Up Your Local Development Environment:
Install Visual Studio Code and Git if you haven't.
3. Initialize Git Repository and Create Web App in Visual Studio Code:
Open Git and create a new repository by clicking on New repository.
Image description
Image description
Image description

  1. Initialize Git from Visual studio code terminal: Image description Image description Run git init to initialize a Git repository. Run git add . to stage your files. Run git status Image description Run git clone +url (from the repository created earlier) Image description Run nano index php Run cat index php Image description

5. Back to our Azure page:
Go to your Web App in the Azure Portal.
In the Deployment section, select Deployment Center.
Image description
Select code source. Click on Github
Image description
Image description
Image description
Image description
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 Service.
Needed to upgrade from the free subscription to be able to deploy as seen below:
Image description
After Upgrade, you can now add a slot.
Image description
Image description
Image description

7. Monitor Deployment
Check Deployment Status: You can monitor the progress of the deployment in the Actions tab on GitHub.
View the Web App: Once deployed, your web app should be accessible via the Azure App Service URL.

Image description
Image description

By following these steps, you will have successfully deployed a web app with a CI/CD pipeline using GitHub and Visual Studio Code on Azure App Service.

Top comments (0)