Introduction
In this article, we will understand how to use Azure Repos, CI/CD using Pipeline in Azure DevOps, hosting the same in Azure App Service. We will create an Angular 10 project from scratch and perform all the steps. This is an End to End demo explaining the steps in detail from creating an angular project in VS Code to manage the source code in Azure DevOps and perform CI/CD to deploy the same in Azure App Service. We will use the current Azure portal settings which have changed over time.
Prerequisites for this Demo
- Complete Part 1 of the article before starting this.
- 1 Hr. of your focused time is required to complete all 3 parts.
The entire demo is divided into 3 articles, please find the details below,
Let's continue with Section 3 and Section 4,
Section 3:Create Azure Portal Account to make use of Azure App Service to deploy our project
- Open a new tab in the browser and type azure portal as shown below and click the first link,
- We will be navigated to Azure Portal as shown below, choose Start free option and get 12 months of free services:
- It will automatically login to the Azure portal if you have logged into Azure DevOps, otherwise login with the Azure DevOps account details which we created earlier. On login, we will find the screen as shown below:
- Please complete the profile update, which will ask for Credit Card details as well. Don’t worry, there will be no charges as of now till 12 months, post that, charges will be applicable based on what service your using. Note: Recommended you to delete the account after you have completed the study on Azure Service. Maybe you can keep for a few months and then remove this account. Please read the What's included a section for a better understanding of the services offered.
- After you complete the process, it will deduct Rs. 2 from your account and again credit it back, this is to verify your card.
- Finally, Click the Agreement and Sign up for Azure Portal Services as shown below,
- Once you have signed up, the below Azure Portal will open as shown below. You will get to know the basic details when you click Start tour.
Section 4 - Create Resource groups, App Service plan and App Service in Azure Services
- As a first step, we have to create a Resource group to manage all the resources we are going to create for this project deployment. It provides management access that enables us to create, update, and delete resources in your Azure account as a group.
- Click the create option from Resource groups as shown below,
- Note
If you don’t find the Resource groups option on the landing page, you can always search in the search option given above.
- Create a resource group as shown below
- Please note: the subscription will be Free Trial
- The resource group name is defined based on the grouping strategy. In this case, we will follow the standards to give a name as rg-training-live-ind-001 (rg stands for resource group) and since I am creating this group for live deployment for training project, I am adding live keyword along with the name, and ind-001 indicates, the selected region is India with 001 indicating first resource group.
- Click Review + create option as shown below.
- Post that, click create as shown below, this will create a resource group in which you can add all your resources that you are going to create.
- Next, let's create an App Service Plan.
- Type plan in the search option, which will show the App Service plan option, select that as shown below:
- Click Add in the App Service plans as shown below:
- Create App Service Plan and provide the details as shown below. choose the region which is available for creating the App Service Plan.
- Note: Sometimes, the selected region will throw an error indicating the region is unavailable. In that case, choose the nearest region for your deployment.
- Important Note: Choose the pricing tier properly, ensure the free option is selected as shown below, as by default it will show paid option.
- Click Change size option and choose Dev/ Test and select Free option as shown below and click apply.
- Please ensure the Sku and size is showing as below and click Review + create
- Review the details and click Create as shown below:
- After successful creation, open the App Service plan option to check the status as shown below.
- Next, let's create an App Service. It is a place where our application will be deployed. Type App Service in search and open the same.
- Click Add Option in the App Service as shown below:
- Create Web App, Choose the Resource Group we created earlier, Type the name of the app (User Defined) as shown below.
- Provide the Region which is provided in the App Service Plan. In our case, it is Southeast Asia, once selected the region, automatically the App Service Plan section will be filled.
- Click Next Option, and ensure the default options are selected as shown below,
- Click Review + create which will take a few seconds to complete the process. Post the details and click Create Option as shown below.
- Note: It will a minute to complete the App Service Creation Process.
- Now our App Service is created and go to App Service to know the status as shown below,
- Click the App Service to open the same. Look at the status it is currently running and we can deploy our application in the same.
- please note the URL as shown below, which is where we are going to deploy our application.
Please Refer Part - 1 and Part - 3 of this blog to complete the entire demo:
Thanks! I really appreciate everyone for reading through this article.