Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
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 (free tier available)
•A GitHub account
•A web application (React, Angular, Vue, or any frontend/backend framework)
•Installed Azure CLI
•Basic knowledge of Git and CI/CD concepts
Step 1: Set Up Your Azure Resources
1.Log in to the Azure Portal (portal.azure.com)
2.Create a Resource Group:
•Click "Create a resource"
•Search for "Resource group" and create one
•Give it a name like "app-service-rg" and select your region.
3.Create an App Service Plan:
• In your resource group, click "Create"
• Search for "App Service Plan" and create one
• Enter the app service plan details; - Operating System OS (Windows or Linux) - Name (eg. blucon-service-plan) - Region (East US 2) - Pricing tier (Free F1)
•Review + Create
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 details; - Resource group - Name - Publish
•Click "Review + create" then "Create"
Step 2: Push Your Code to GitHub
1.Initialize a Git repository
On the GitHub portal, create a repository then initialize the Git repository through a Command-Line Interface CLI (e.g. Git bash, VS Code) if you haven't already:
In this case we’ll use the VS Code CLI.
Click the VS Code icon on your computer to access the portal, then enter the commands below;
•git init
•git remote add origin
(e.g. git remote add origin )
2.Push your web app:
To push to the web, the following commands are necessary;
•git push -u origin master
•git add .
•git commit -m "first commit"
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 and branch (typically main/master)
5.Choose GitHub Actions (YAML) as the build provider
6.Save the configuration
Azure will now automatically create GitHub Actions workflows for CI/CD. (azure-webapps-node.yml)
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, visit your site at
•Your beautiful app should be live!
Step 5: Examine the GitHub Workflow
Azure creates a workflow file in your repo at .github/workflows/:
yaml
Here’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.
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 (free tier available)
•A GitHub account
•A web application (React, Angular, Vue, or any frontend/backend framework)
•Installed Azure CLI
•Basic knowledge of Git and CI/CD concepts
Step 1: Set Up Your Azure Resources
1.Log in to the Azure Portal (portal.azure.com)
2.Create a Resource Group:
•Click "Create a resource"
•Search for "Resource group" and create one
•Give it a name like "app-service-rg" and select your region.
3.Create an App Service Plan:
• In your resource group, click "Create"
• Search for "App Service Plan" and create one
• Enter the app service plan details; - Operating System OS (Windows or Linux) - Name (eg. blucon-service-plan) - Region (East US 2) - Pricing tier (Free F1)
•Review + Create
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 details; - Resource group - Name - Publish
- Runtime stack - Operating System OS - Region
•Click "Review + create" then "Create"
Step 2: Push Your Code to GitHub
1.Initialize a Git repository
On the GitHub portal, create a repository then initialize the Git repository through a Command-Line Interface CLI (e.g. Git bash, VS Code) if you haven't already:
In this case we’ll use the VS Code CLI.
Click the VS Code icon on your computer to access the portal, then enter the commands below;
•git init
•git remote add origin
(e.g. git remote add origin )
2.Push your web app:
To push to the web, the following commands are necessary;
•git push -u origin master
•git add .
•git commit -m "first commit"
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 and branch (typically main/master)
5.Choose GitHub Actions (YAML) as the build provider
6.Save the configuration
Azure will now automatically create GitHub Actions workflows for CI/CD. (azure-webapps-node.yml)
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, visit your site at
•Your beautiful app should be live!
Step 5: Examine the GitHub Workflow
Azure creates a workflow file in your repo at .github/workflows/:
yaml
Here’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.