DEV Community: Onyema Blessed

A Step-by-Step Guide to Deploying Web Apps on Azure App Service Using CI/CD

Onyema Blessed — Sat, 17 May 2025 12:26:28 +0000

Table of Content
Overview
Prerequisites
Step 1: Set Up Your Azure Resources
Step 2: Push Your Code to GitHub
Step 3: Configure Azure Deployment Center
Step 4: Monitor Your Deployment
Step 5: Examine the GitHub Workflow
Conclusion

Overview
In today's fast-paced development world, implementing Continuous Integration and Continuous Deployment (CI/CD) is essential for delivering high-quality applications quickly and reliably. In this guide, you'll learn how to deploy your web app to Azure App Service using a CI/CD pipeline, enabling faster iterations and more reliable updates.

Prerequisites
Before we begin, ensure you have the following:
•An Azure account
•A GitHub account
•A web application
•Installed Azure CLI
•Basic knowledge of Git and CI/CD concepts

To successfully deploy a web app on Azure, follow the following steps below.

Step 1: Set Up Your Azure Resources
1.1. Log in to the Azure portal and sign in with your Azure credentials.
1.2 Create a Resource Group
Search for "Resource groups" on the search bar and enter the following details;
•Click "+ Create".
•Provide a Name (e.g., app-service-rg).
•Select a Region (e.g., East US 2).
•Click Review + Create → Create.

1.3 Create an App Service Plan:
Search for "App Service Plans".
Click "+ Create".
Configure:
Subscription: Azure subscription 1
Resource Group: app-service-rg (created earlier).
Name: blucon-service-plan
OS: **Linux or Windows (In this case, Linux).
**Region: East US 2. Same as Resource Group.
Pricing Tier: Free (F1) for testing
Click Review + Create → Create.

1.4 Create a Web App:
•Log into Azure portal, on the search bar type “app service”
•On the “app service” portal, click " +Create" and on the drop down select "+Web App"

•On the "Web App" portal, enter the following configurations;

Configure:
Subscription: Azure subscription 1.
Resource Group: app-service-rg
Name: blucon-web-app
Publish: Code
Runtime Stack: PHP 8.4 (other App programing langugage you can select includes; Node.js, Python, .NET, etc.).
OS: Linux
Region: East US 2.
On this portal, the “App Service Plan” will be selected automatically once you select “Region”
App Service Plan: blucon-service-plan (F1)
Click Review + Create → Create

Step 2: Push Your Code to GitHub
2.1. Initialize a Git repository
Firstly, open a Command-Line Interface CLI (e.g. Git bash, VS Code) on your computer to access the portal, then select a working directory (i.e. a folder) from where the codes will be pushed to GitHub. In this case we’ll use the VS Code.
Secondly, go to the GitHub portal, create a repository then initialize the Git repository through VS Code if you haven't already:

On the VS Code portal, select/create a folder (in this case, index.php), and in the folder enter the codes to be pushed as show below.

2.Push your web app:
To upload the local changes to GitHub, enter the Git commands under “Terminal” in the VS Code.

Step 3: Configure Azure Deployment Center
Azure makes it easy to integrate GitHub Actions for deployment.
1.Go to your Web App in Azure Portal
2.Navigate to "Deployment Center" in the left menu.
3.Select GitHub as source and authorize Azure to access your account.
4.Choose your repository (blucon-web-app) and branch (main/master)
5.Choose GitHub Actions (YAML) as the build provider.
6.Save the configurations.
Azure will now automatically create GitHub Actions workflows for CI/CD.

Step 4: Monitor Your Deployment
1.Check GitHub Actions tab:
•After pushing code, go to the Actions tab in your GitHub repo.
•You'll see the workflow running
•Monitor for any failures
2.Verify your live site:
•Once deployment completes, the site can be visited at https://blucon-web-app-egf2hwh4ffh5ghhy.westus2-01.azurewebsites.net/

Step 5: Examine the GitHub Workflow
Azure creates a workflow file in your repo at (https://github.com/Blucon83/blucon-wep-app/blob/master/.github/workflows/master_blucon-web-app.yml)

Below ere’s an example GitHub Actions workflow yml file:

Conclusion
You've now set up a complete CI/CD pipeline for your beautiful web application on Azure App Service! Every time you push code to your main branch, GitHub Actions will automatically:
1.Run tests and build your application
2.Deploy it to Azure App Service
3.Make it available to your users
This setup ensures rapid, reliable deployments while maintaining high quality standards. The automated pipeline reduces human error and allows you to focus on building great features for your beautiful application.
Next steps to consider:
•Implement monitoring with Azure Application Insights.
•Set up autoscaling for your App Service Plan.
•Add a CDN for better global performance.
•Implement blue-green deployments for zero-downtime updates.

Git and GitHub: A Comprehensive Guide for Beginners

Onyema Blessed — Sat, 10 May 2025 14:01:49 +0000

Table of Content
1.Introduction to Git and GitHub 2.Git installation 2.1Configure Git
3.Creating a Repository
3.1Create a Repository on GitHub
3.2Link Local Repo to GitHub
4.Making Commits
5.Pushing and Pulling Changes
5.1 Push to GitHub
5.2 Pull from GitHub
6.Conclusion

Introduction to Git and GitHub Version control in the world of software development, is very essential. Whether you're working solo or collaborating with a team, tools like Git and GitHub help you track changes, collaborate effectively, and avoid catastrophic errors.
Git is a distributed version control system (DVCS) that helps developers track changes in their codebase, collaborate efficiently, and revert to previous versions if needed.
GitHub, on the other hand, is a cloud-based platform that hosts Git repositories, providing additional collaboration features like pull requests, issue tracking, and project management tools. While Git works locally, GitHub makes it easier to share and collaborate online.
In this guide, we'll cover:
i. Setting up Git
ii. Creating a repository
iii. Making commits
iv. Pushing and pulling changes
v. Basic Git workflows
Git installation
Before using Git, you need to install it and configure it with your identity.
To install Git, click the link Git - Downloads to download and install based on your OS (Windows, Linux, macOS)

2.1 Configure Git
Once installed, click on the Git bash icon on your computer to set your global username and email:
git config --global user.name "Your Name"
git config --global user.email"you@example.com"

3.Creating a Repository
A repository (repo) is where Git tracks file changes. You can create one locally or on GitHub.
To initialize a Local Repository,
Open Git bash
On Git bash portal, run the following commands;
• cd Documents
• mkdir git-lab
• cd git-lab
• git init # Initializes a new Git repo

3.1 Create a Repository on GitHub
To create a repository on Github, follow the guide below.
i.Go to GitHub and click New Repository.

ii.Enter a name (e.g blucon-first-repo).
iii.Choose Public or Private. (in this case, Public)
iv.Click Create Repository.

3.2 Link Local Repo to GitHub
If you initialized a local repo first, connect it to GitHub:
To do this, go to the Git bash portal and run the command below;

• git remote add origin https://github.com/Blucon83/blucon-first-repo.git
• git push -u origin master

4.Making Commits
A commit is a snapshot of changes in your repository.
Check File Status by going to Git bash and run the following commands;

• git status
• git add readme.md
• git status
• git commit -m "Adding a readme file"

5.Pushing and Pulling Changes
5.1. Push to GitHub
Upload your local commits to GitHub:
On the Git bash portal run the command below;
• git push -u origin master # First push (sets upstream)
• git push # Subsequent pushes

5.2 Pull from GitHub
Fetch and merge remote changes:
On the Git bash portal run the command below;
• git pull origin master

This command merges changes from GitHub into your local branch.
(Always pull before push to avoid conflicts.)

6.Conclusion
Git and GitHub are essential tools for modern software development. By mastering basic commands (init, commit, push, pull), you can efficiently manage code versions and collaborate with others.
Practice by creating a sample project, making changes, and pushing to GitHub. Over time, explore advanced features like branching strategies, GitHub Actions (CI/CD), and collaboration workflows.

Designing an Azure Virtual Network (Vnet) For a Tech Company a Step-by-Step Guide

Onyema Blessed — Fri, 18 Apr 2025 19:18:10 +0000

Table of Content

Overview
VNet Configuration
Subnet Design

3.1 Subnet 1: Web Tier

3.2 Subnet 2: Application Tier

3.3 Subnet 3: Database Tier

3.4 Subnet 4: Admin Tier

4.Overview dialog box of subnets after deployment.

5.Conclusion

Overview
We'll create an Azure Virtual Network VNet with the following specifications:
•Address Space: 197.152.50.0/24
•Subnets: 4 subnets
•Subnet size: /28
VNet Configuration
•VNet Name: blucontech-net
•Address Space: 197.152.50.0/24
•Subnet Mask: 255.255.255.0
Subnet Design
With subnet size /28:
•Each subnet uses 16 IP addresses
•First usable IP is the .1 of the range
•Last usable IP is .14
•Broadcast IP is .15

We can fit 16 /28 subnets into a /24, but we only need 4.
Let's define the 4 subnets into the following tier:
•Subnet 1: Web Tier
•Subnet 2: Application Tier
•Subnet 3: Database Tier
•Subnet 4: Admin Tier

3.1 Subnet 1: Web Tier
1.Log in to Azure Portal.
2.Select "Virtual Network”, then click on create virtual network on the portal.

3.Fill in the required details:
Under Basics
•Subscription: Choose your subscription.
•Resource group: Create new or select existing.
•Virtual network name: Enter a unique name (e.g. blucontech-net).
•Region: Select the closest region.

Under IP Addresses
•Delete default subnet.

Change the following default parameters to:
•Address space value (197.152.50.0).
•CIDR value: /24
•Click +Add a subnet, then change the default parameters on the dialog box that opens.
Name: Web
Size: /28
•Click Add to add the subnet

3.2 Subnet 2: Application Tier
IP Addresses
Under IP Addresses, all the parameters including Address space, CIDR etc, will configure automatically with respect to subnet web. Then,

•Click +Add a subnet, then change the default parameters on the dialog box that opens.
Name: Application
Size: /28
•Click Add to add the subnet.

3.3 Subnet 3: Database Tier
IP Addresses
Under IP Addresses, all the parameters including Address space, CIDR etc, will configure automatically with respect to subnet web and Application. Then,

•Click +Add a subnet, then change the default parameters on the dialog box that opens.
Name: Database
Size: /28
•Click Add to add the subnet.

3.4 Subnet 4: Admin Tier
IP Addresses
Under IP Addresses, all the parameters including Address space, CIDR etc, will configure automatically with respect to subnet web, Application and Database. Then,

•Click +Add a subnet, then change the default parameters on the dialog box that opens.
Name: Admin
Size: /28
•Click Add to add the subnet.

After adding all the subnets, then click on:
•Review + Create
•Create.

After clicking on create and deploying the subnets, the dialog box below will pop up to confirm deployment successful.

4.Overview dialog box of subnets after deployment.

5.Conclusion
After allocating these four subnets (using 197.152.50.0 to 197.152.50.63), the remaining address space (197.152.50.64 to 197.152.50.255) can be used for future expansion or additional subnets as needed. In this case with each /28 subnet, Azure provides 11 usable IPs and reserves 5 per subnet. As shown on the image above. This design provides proper isolation between tiers while efficiently utilizing the allocated address space.

How to Host a Static Website on Azure Blob Storage

Onyema Blessed — Sun, 13 Apr 2025 15:20:46 +0000

Table of Content

Introduction

Prerequisites

Step-by Step guide

Step 1: Create a Storage Account

Step 2: Enable Static Website Hosting

Step 3: Upload Your Static Files

Step 4: Access Your Website

Conclusion

Introduction
It is cost-effective and a scalable solution to host a static website on Azure Blob Storage. It is simple yet a powerful solution. Unlike traditional web hosting, Azure Blob Storage allows you to serve HTML, CSS, JavaScript, and image files directly from a storage container, eliminating the need for a web server.
In this post, we will walk you through the steps to deploy a static website on Azure Blob Storage.

Prerequisites
Before you get started, it is important to ensure you have:
• An Azure account (sign up for a free trial account).
• A static website ready to deploy (HTML, CSS, JS files).
• Azure CLI or Azure Portal access.

Step-by-Step Guide
Step 1: Create a Storage Account
1.Log in to Azure Portal.
2.Click on "Create a resource" → Storage → Storage account.

3.Fill in the required details:
• Subscription: Choose your subscription.
• Resource group: Create new or select existing.
• Storage account name: Enter a unique name (e.g., mystaticwebsite).
• Region: Select the closest region.
• Performance: Standard.
• Redundancy: LRS (Locally Redundant Storage) is sufficient for testing.

4.Click Review + Create, then Create.

Step 2: Enable Static Website Hosting
1.Once the storage account is created, go to it by clicking Go to resource
2.In the left menu, under Data Management, click on Static website.
3.Toggle Enabled to On.
4.Set the following:
• Index document name: index.html (default).
• Error document path: 404.html or error.html (optional).

5.Click Save.
At this point, Azure will provide two URLs:
• Primary endpoint: Your website URL (e.g., https://portfoliowebsite83.z13.web.core.windows.net/).
• Secondary endpoint: Used for failover (if configured).

Step 3: Upload Your Static Files
This step provides us with two options
Option 1: Using Azure Portal.
1.In the storage account, go to Containers.
2.Under containers, you’ll see a new container named $web, then double click on it. (auto-created when enabling static hosting).

3.Click Upload and select your static files (index.html, CSS, JS, etc.).

Option 2: Using Azure CLI
Run the following commands to upload files:
bash
Copy
az storage blob upload-batch \
--account-name mystaticwebsite \
--destination '$web' \
--source ./local-website-folder

Step 4: Access Your Website
After enabling static website hosting, Azure provides a primary endpoint URL (https://portfoliowebsite83.z13.web.core.windows.net/).
Open the URL in your browser — your website should now be live!

Conclusion
Hosting a static website with Azure Blob Storage is a fantastic way to keep things simple, fast, and budget-friendly. Whether you're a developer looking to deploy a quick frontend or someone who just wants a lightweight personal site, Azure's static site hosting has got you covered.