Serverless website deployment 100% automated in multiple environments (Test, QA and Production) using Azure DevOps Repos and Pipelines (CI/CD).

In another project based on a real-world scenario, I worked as a Cloud Engineer using DevOps, where I deployed a serverless website in a 100% automated way using Azure DevOps Repos and Azure DevOps Pipelines resources.

I created an Azure DevOps Organization and a new project. The Azure DevOps Repos stored the website files, and the CI/CD Pipelines automated the entire website deployment process in 3 different environments (Test, QA, and Production).

Implementation:

Part 1

1) Creating three storage accounts for each environment:
Test: tcbzrtst
QA: tcbzrqa
Prod: tcbzrprd

Enable static website for each storage account.

URL tst => https://tcbzrtst.z13.web.core.windows.net/
URL qa => https://tcbzrqa.z13.web.core.windows.net/
URL prd => https://tcbzrprd.z13.web.core.windows.net/

2) Enabling Static Website | Setting up index.html as home page

Settings > Static Website > Enabled
Index document name: index.html

Copy the static website url and save them in a notepad page for later use.

3) Creating DevOps Organization
In azure console, search for DevOps organization, it will direct you to a new website. Create an organization. Then submit a request for “parallelism” that will take sometimes to be approved by Microsoft. Parallelism is allocation of resources for your DevOps project.

4) Creating a new project: website01
Create a new project by the name website01 in private mode in your organization. (normally, you will have one project for each application in real world production environment).

5) Generating Password for Azure repos (Generate Git Credentials)

Generate credentials for your Azure Repos sitting in website01 project so it can pull the static websites and files in the Repo.

6) Cloning application code on GitHub:

git clone https://github.com/xyz/azuredevops.git

7) Git pushing the code to Azure repos

cd azuredevops

git remote add origin https://z-tcb-module07@dev.azure.com/z-tcb-module07/website01/_git/website01

git push -u origin --all

Windows will ask to login or enter password in GUI. Cancel both. Then it will ask you to enter your password in the command line. Enter your password and proceed.

after authentication:

Verifying through devops Repo:

Part 2

1) Creating Pipeline | CI
Pipelines > Pipelines
New pipeline
Use Classic Editor

Classic is a no code (classic) method to create our pipeline. Default method is via YAML files.

we will use Empty Job.

Now we have a new pipeline “website01-CI” created. In the pipeline, you see we have an agent job 1. We need to configure the agent. Click on “+” to add tasks.

Pipeline name: website01-CI

Adding task1: Archive files

This task zips the source code file.

Display name: Zip files
Root folder or file to archive: files

Adding task2: Publish build artifacts

Display name: Artifacts Publish

Save.

Enable Trigger
Check: Enable continuous integration
— continuous integration looks for any change in the source code. If it detects any change, it will trigger the pipeline.
Save

2) Creating Pipeline Continues Deployment (Release) | CD
Follow the steps:

1- Pipelines > Release
2- New pipeline
3- select empty job.
4- Adding artifact

5- Enable: Trigger Continuous deployment

Creating Test, QA, Production Stages:

Stage: Testing
We are going to add two tasks. 1- Extract the files 2- upload files to azure blob

Adding task: Extract files
Display name: Extract files from website
Archive file patterns: **/$(Build.BuildId).zip
Destination folder: $(Build.DefaultWorkingDirectory)/$(Build.BuildId)

Adding task: Azure CLI
Display name: Upload files to Azure Blob
Authorizing: Azure Resource Manager connection…
Script Type: Shell
Script location: Inline script
Inline scripts: az storage blob upload-batch — account-name tcbzrtst — destination “\$web” — source ./files — overwrite

Working Directory: $(Build.DefaultWorkingDirectory)/$(Build.BuildId)

Rename pipeline to website01-CD

Save

Stage QA:

Clone stage Testing and rename it to QA.
Click on Tasks, change the storage account name to QA storage account created previously.

At the end, save the changes.

Click on Upload files to Azure Blob

Stage Prod:

Clone stage QA and rename it to Production.
Click on Tasks, change the storage account name to QA storage account created previously.

At the end, save the changes.

Click on Upload files to Azure Blob

Pre-Deployment approval stage.

Click on Pipeline

From the Production stage, Enable Pre-deployment conditions to get approval before deploying to production.

Pre-deployment approvals: put your Azure access email

Save

Part 3

Testing: click on Pipelines > Pipelines

Select pipeline website01-CI

Click on run Pipeline > Run

4) Monitoring Pipeline

Checking release pipeline.

Verify files uploaded on the testing storage account.

Checking site in browser.

Monitoring QA stage and verify application running on QA url.

5) Approving Production

6) Validating URL access

Change in application source code.

7) Changing the file:
in GitBash, change a text in index.html and push the changes to the repo. Then monitor the stages being triggered by the change.

vi index.html

git add index.html

git config --global user.email "your-email." 
git commit -m "changes in index.html"

git push -u origin --all

push changes to the files in repo.

Check the repo/commits. You will see changes are in progress.

Check the pipeline/release. You will see new pipeline is triggered.

Conclusion and Key Insights:

Continuous Integration and Continuous Deployment/Delivery (CI/CD) are now standard in modern application deployment. This process integrates teams, processes, and technology for swift application delivery. Azure DevOps provides a comprehensive suite of tools enabling seamless deployment management. In our hands-on exercise, we utilized the Classic Editor for deploying static websites on Azure Storage, though complex deployments often use YAML templates. Gaining proficiency in Azure DevOps configuration is a valuable skill that will benefit my technical career.