Deploy a Static Website on Azure Storage, update changes using github and CI/CD with Azure DevOps

Synopsis

Hi Welcome to this article, My Name is Ford, I am starting to get hands on experience on DevOps and came across the 10 week cloud ops challenge posted by Piyush Sachdeva, Most of the content within this article is similar to Nishant Singh Blog, The difference is that in this article we will not use a custom domain and CDN since I am using a Free tier subscription in Azure.

This article is about deploying a static website using Azure storage and automating the changes with the help of github and Azure CI/CD pipelines. In this article we will build everything from scratch.

Prerequisites

Azure Account (Free trial will do)
Azure DevOps Account (Free tier will do)
Github Account
for Windows users (WSL)

Github

If you don’t have a github account, go and sign up to create a new account

then create a new repository on github

Let’s leave github for a moment and start working on setting up the local machine, we need this because we are setting up a self-hosted agent in Azure DevOps and also one of our script is a shell script, which will not work if we configured a new agent in Windows.

Setting up the local machine

You may skip this if you are using Linux

We need a linux system to run our agent in Azure DevOps, to install Windows Subsystem for Linux

Open a Powershell and type the following command below
After installation, your machine will be required to reboot, it will install and update the windows subsystem for linux
Open up Powershell or Command Prompt and type Bash and enter then change directory to /mnt/c
Now we clone our newly made repository from github to our local computer, this will create a new directory on the local drive C: then go to the ‘10weekscloudchallenge’ directory

Make a new directory 'Week1’ for example, move to that directory, and now we create 2 files (index.html and error.html)

While on the ‘Week1’ directory, make changes to the ‘index.html’ file using vim

vim index.html

You may paste your own html script on the index.html file, Go nuts! after making the changes make sure you save it.

Upload changes to Github

Go back to ‘10weekscloudchallenge’ directory (cd ..)
Run the following commands
- git init
- git config --global user.name [your github username]
- git remote set-url origin https://<YOUR_TOKEN>@github.com/<YOUR_USERNAME>/<YOUR_REPO>
- git add .
- git commit -m ‘Your commit description’
- git push -u origin main
If all the commands work smoothly we should see our repository in github has been updated

Note: on the part on setting up the git remote set-url you may Click here on how to setup a token https://www.youtube.com/watch?v=ePCBuIQJAUc

Azure Portal

Let’s go to portal.azure.com, if you don’t have an account in azure you can sign up for a free trial subscription (requires a credit card), it will give you a $200 azure credits you can consume and after 30 days it will require you to upgrade to a Pay as you go subscription.

Creating a static website using storage account

On the azure portal search for Storage accounts, Click Storage account under services

Click on Create Storage Account

Enter the required details on the Basics tab
- Subscription : (Your Subscription)
- Resource Group (Create a new resource group)
- Storage account name: (Create a globally unique storage account name)
- Region: (Choose a region of your choice)
- Performance: Standard
- Redundancy: (You can leave it to RA-GRS, but for the purpose of saving cost you can switch to LRS)
Skip the other tabs and Click on Review+Create to validate the settings
Click Create, You will be forwarded to the Deployment Process
Click on Go to Resource after the deployment has been completed
On the Overview pane, click on Capabilities and click on Static Website
Click Enable the static website on the storage account, it is disabled by default

Enter index.html for Index document name and error.html for Error document path
Click Save
After saving, on the left side pane click on Containers
You will see a new container appeared ‘$web’, select the $web container

and Click on Upload
On the upload pane locate the index.html and error.html we have created earlier (should be on the 10weekscloudchallege\Week1 folder ), Then click Upload.
Go back to Overview Pane, and below find the Data Management Pane and select Static Website, copy the URL of the primary endpoint.
Paste the Primary endpoint URL to a new tab view your majestic website!

Leave the azure portal and the masterful website open we will get back to it later.

Now that our website is deployed, editing the index file in the $web container will make the changes to the website, but in a scenario where in we want to make the changes to our local computer and maintain a version control using git, plus we want the changes to take effect automatically to the existing website, we can do that with the help of Azure DevOps Pipelines.

Azure DevOps

if you don’t have an existing account you may follow this link to sign up
https://learn.microsoft.com/en-us/azure/devops/user-guide/sign-up-invite-teammates?view=azure-devops&tabs=microsoft-account

Since I am using the Free version only, I need to setup an Self hosted agent, without this Azure pipelines cannot use the default agents

On the Azure DevOps home page, Click on Organization Settings located on the lower left side of the screen

Under Pipelines, Select Agent Pool, Then Add Pool

Choose Self Hosted

Name: (name of your choice)

Click Create

Select the newly created Agent Pool, Click on New Agent

Choose Linux, and click on copy URL beside download button

Go back to the linux terminal

and run the following commands

mkdir myagent ; cd myagent
wget (the link copied on the Get agent window, the one beside the Download button)
tar zxvf (the downloaded .tar.gz file)

Go back to Azure DevOps, Click on User Settings, Select Personal access Tokens

Click on New Token, it is not advisable to have a Scope of Full access, but for the purpose of this demo project, lets choose it, just revoke the token or adjust the expiration date if not in use.

Click Create and a Token will appear, make sure to copy the token and paste it somewhere safe.

Let’s go back to our Linux terminal

Run the the shell script, make sure you are on the agent directory

./config.sh

Enter server URL: dev.azure.com”your organization name”

Enter authentication type: Press Enter

Enter personal access token : (paste the token copied)

Enter agent pool: (The self hosted agent created)

Enter agent name: (your choice of agent name)

Enter work folder: just hit enter to create it as _work

Last part enter ./run.sh

Now the agent is Listening for Jobs

Before we create a project we need to create a service principal to authorize Azure DevOps to make changes to our resource (storage account)

Move back to azure portal

Search for Entra ID, and Select Microsoft Entra ID

On the default directory under Manage, select App registrations and click on New registration

On the New registration page

Enter a Name: (name of your choice)

Redirect URI : choose Web

Click Register

After the App registration, Select Certificates & Secrets, Click on new client secret

Enter a Description and hit Add, Copy the Secret Value and paste it somewhere safe.

Click on Overview and copy the App ID and Directory Tenant ID, paste it somewhere

Now search for Subscriptions, and Select Subscriptions

Click on your subscription, and on the overview pane, Select Access control (IAM)

Click on Add, Select Role Assignments

Select Privileged Administrator Roles

Select Contributor

Then select on Members

On the role assignment click on +Select members

Type in the name of the registered App

Click Select

Click on Review and Assign

Go back to Overview of your Subscription and copy the Subscription ID and paste it somewhere safe

We have registered an Application that will be used for Service Connection on Azure DevOps

Go back to Azure DevOps and create a new project

Click on Project Settings

Under Pipelines select Service connections and click on New Service Connection

Select Azure Resource Manager and click Next

Choose Identity type as manual, credential as Secret and Environment as Azure Cloud, the rest of the other details are the ID’s and secret copied on Azure portal like App ID, Tenant ID, Subscription ID, Secret Value of the App registered.

Enter your desired Service connection Name

Click on Verify and Save

Scripts

Open up a new terminal, since the previous terminal is already used by our agent on Listening mode

(Open Powershell, Bash, change directory to our main git folder in my case the 10weekscloudchallenge)

Now we create a yaml file and a shell script in preparation for the Azure Pipeline

touch azure-pipeline.yml storageupdate.sh
vim azure-pipeline.yml

on Vim editor for the yml file paste the script below:

trigger:
- main

pool:
  MyAgent

steps:
- task: AzureCLI@2
  displayName: 'Running Pipeline Script'
  inputs:
    azureSubscription: 'ServiceConnection'
    scriptType: 'bash'
    scriptLocation: 'scriptPath'
    scriptPath: 'storageupdate.sh'

Change the values on which you may have a different name :

trigger - main [this is the main git repo if you have a different name change it’s value]
pool - [the Self hosted pool created]
azureSubscription: [the service connection name]
scriptPath” [the shell script created]

hit : then x to save the changes

now let’s edit the shell script we created

vim storageupdate.sh, paste the script below and change the appropriate values

AccountName="staticwebweek1"
RG="Week1RG"


echo "--------------------------------------------------------"
echo "|           Uploading to Azure Storage Account         |"
echo "--------------------------------------------------------"

Connection_String=$(az storage account show-connection-string --name $AccountName --resource-group $RG --query connectionString -o tsv)
az storage blob upload-batch \
  --destination "\$web" \
  --source "Week1" \
  --connection-string $Connection_String \
  --overwrite \
  --pattern "*"

AccountName = [storage account name on azure]
RG = [The name of our Resource Group]
--source [The directory where index and error html is located]
hit : then x to save the changes

Now we commit the changes

git add .
git commit -m 'added scripts'
git push -u origin main

Check github if the scripts have been committed

Azure Pipeline

Now we go back to Azure DevOps, to create the pipeline

Navigate to your Project and Click on Pipeline on the left side pane

Click on Create Pipeline
Select Github
Select your repository
Select Existing Azure Pipelines
Review the yaml file and hit run if everything is in order
You may see this on the Job Queue, Just click on view and Permit
If everything works in order this should be the expected result

Now we have deployed a pipeline, What’s Next? Let’s try to make changes to our index.html file and commit those changes into github and go back to the awesome website to see the changes that you made.

After committing the changes you will see that there is a new commit and you can run the pipeline again to commit the changes.

View the changes on your website.

My Experience

I just wanted to share my experience on this Week1 challenge, I do encounter different issues while following the guide of Nishant, It’s not that guide is wrong it’s my inexperience to this tools that made it hard for me to follow, I was actually thankful for the guide he provided. I learned a lot on this Week 1 challenge and looking forward to Week 2.

Special Thanks to these wonderful people.

Piyush Sachdeva

Nishant Singh

P.S. This is my first blog ever created so I do apologize if it was not very particular and helpful to some.

Github Repo