Deploy static HTML files to Azure App Service using Azure Pipelines

Overview

Azure Pipelines helps you set up a continuous integration (CI) and continuous delivery (CD) pipeline to infrastructure or platform resources in Azure.

In this lab, I will configure Azure Pipelines for a static HTML file to deploy on to an Azure Web App.

Objectives

Upon completion, you will be able to:

• Set up an Azure CI Pipeline
• Set up a Release pipeline and deploy the static HTML file to Azure Web App

Exercise 1: Commit all your static files to Azure Repo or Github depending on your version control system.

As you will see in the image below, I have pushed all edits to Azure Repo with two different folders (similar contents but specific to its environment) — One for a Dev env while the other for a Prod env. Of course, yours can be for just one environment.

If you are not familiar with committing code changes, I’ll advise you watch a Youtube video on that or just do a search online.
This demo is done with the expectation that you have an understanding of such basics.

Exercise 2: Configure the CI Build Pipeline

Click on Pipeline tab under Pipelines. Then click on New Pipeline

I’ll be using the Classic Editor, so click on it below

Select your repository source and the branch to trigger.

When you click on continue, On the next page asking for a template start with an Empty job.

Then we can begin to add tasks, We need the Archive File Task and Publish Artifact

I have 2 Archive tasks because I have 2 different env where the files will be deployed.

A closer look into the archive task as you can see, the root folder is the folder name to archive and the archive file to create is $(Build.ArtifactStagingDirectory)/<preferred name>.zip

Similarly, I have done same for the other archive task.

Then, I went ahead to publish the build artifact so it can be used in the release pipeline.

Exercise 3: Configure the CD Release Pipeline

Click on Release tab under Pipelines. Then create a New Release Pipeline

Strat with an Empty Job

Add an artifact based on the last build from previous step.

Then you can begin to add task for the release stage.

Search for Azure App Service deploy and add this task.

Then configure the task appropriately, while selecting the package or folder to deploy as seen in the image below.

I have repeated same step for the other environment being deployed to another App Service

Once done, save first then create release.

This will successfully create a release and the HTML file will be zip deployed to the Web App already created.

Then you can retrieve the App Service URL and confirm its content.

I hope this is useful!