HOW TO DEPLOY WEBAPPS TO AZURE APP SERVICE USING AZURE DEVOPS PIPELINES

Kaan Turgut
4 min readFeb 10, 2023

--

  • Welcome to this comprehensive guide blog on deploying five web applications to Azure App Service using Azure DevOps Pipelines. This blog provides detailed instructions on the process, ensuring seamless and efficient deployment for all five applications.

- Although each application has its own dedicated Readme, the steps outlined here apply uniformly to all of them.You can check them from the project repository.

Let’s get started!

APPS :

  • Angular-Real-World-Example-App
  • Tetris-Game-App
  • Apprun-realworld-example-app
  • Crizmas-mvc-realworld-example-app
  • React-redux-realworld-example-app

Prerequisites :

Project Task and Steps:

1- Create a Azure Container Registry >>> ACR Terraspace Codes

2- Create a Azure DevOps Project

3- Create new service connection to make a connection between ACR-AzureDevOps and Github-AzureDevOps

  • Project Settings > Service Connections > Create service connection

4- Create a new Pipeline

5- Walk through the steps of the wizard by first selecting GitHub as the location of your source code.

6- When the list of repositories appears, select your repository.

7- When the Configure tab appears, select Docker build and push an image to ACR.

8- Build and Push job has been done.

- Image has been deployed to ACR

RELEASE TO AZURE WEB APPS

1- Create a Release Pipeline from the Release tab of the Pipeline

2- Select Azure App Service deployment

3- Add the artifact

- Do not forget to enable continuous deployment trigger

4- Make the configurations of the stage

- Save and click on Create release
  • Release pipeline is succesfull
  • Logs of the stage can be viewed from logs tab
  • Here is the working website throug Azure Web App

TESTING OUR AUTO RELEASE PIPELINE

  • I changed the sentence under our main title on home page
  • Pipeline has been trigged as changed code just pushed to the Github repository
  • After pipeline is done , release pipeline has been automaticly triggered.
  • Release pipeline succesfully deployed

RESULT

TROUBLESHOOTING

  • If you are getting this port error , make sure you add the website port setting > Solution

Hope you guys like this blog and will be deploy tons of apps without no hesitation. Easy deploys! Cheers…

--

--