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.
Top comments (0)