How to create Azure CI CD pipeline and use it by practically?

 Introduction

                         Many days I was thinking that, what is inside of Azure Devops and why CI CD? I knew that there Azure Devops is really helpful to manage projects and work items. Years ago I was start using Azure Devops just for repo and project tracking. I was curious to learn what & why is CI CD?

After learnt CI CD by practically I felt that its amazing.

Why its amazing?

                         As a Tech Lead I do full in-charge of project delivery in onsite so,  we do all production move at the mid night hours without affecting the business so, we do off all of your IIS services, Windows Services, DB Services then we start publish the assemblies to folder locations, add some configuration changes, execute some sql scripts, which is really huge work because, if we missed one single step then we have to troubleshoot entire check list Or have to do the same exercise one by one. This would take 3 to 4 hours for our complex and million dollar business

With CI CD this complex is very very less since, all the above processes are automated by Azure Devops CI CD pipe line.

I Hope this practical explanation gives you rough picture about CI CD, Now lets start look at how to implement in our project

Prerequisite:

1.     Visual Studio 2022

2.     Azure Subscription

3.     Any Browser

4.     Some ideas about Production/Development/QA move in real project

5.     Knowledge in C#

 

I’m going to explain about each and every steps so, this topic would be lengthy practical session but, it makes you to think broad so, all sets.

Don’t get fear about Azure Subscription

                                  I was worried about to take account in Azure since, they might be charged from my account but, that’s not true. Azure is giving free subscriptions for 30 days, then after if you wish choose “Pay as you go” means, pay as per your usage so, after 30 days I have taken Paid account, the only thing is after all usage every day I do Delete everything which I have created so, don’t worry month I’m paying less than 20 Euro, which is really good for our learning so, take your free/paid account from here

Step 1

How to create Organisation?

1.     Visit this link

2.     In the left side pane click “New Organisation”

3.     From the upcoming page, will login again to authenticate then after the page looks below, there Organisation name as JSharpDemo , Chosen host location into “West Europe” then click Continue.     

4.     Now, my Organisation is created like below

Step 2:

How to create new project?

We are going to continue from the above screen just the different topic

1.     Here my project name is RazorWebApp chosen visibility as Private

2.     Then click “Create Project” button

3.     That’s all the project also created and the completion window seems below

Step 3:

Create new Visual Studio project and move them into Azure Repo

From above steps, we have created organization, project repo now, we have to create new Visual Studio Razor project and push into Azure Repo

1.     From Azure Devops screen left pane click Repos that will show Clone link to copy git related details, copy that link

2.    Open Visual Studio there click “Clone a repository”

3.    Feed the Repository location and local path(where you wanna keep your project) then click “Clone” button

4.    The next window will ask you to authenticate again, please do it then it will take some time to download git related files the at the end you could see the folder like below

And visual studio looks like this 

5.    Then go to File menuà New Project à choose Asp.net Core Web App àNext

Feed the project name as RazorWebApplication the Location of where we downloaded the git folder then Click Next

 

6.     From the next window choose Framework as .NET 6.0 LTS and the authenticate type as None and click Create  button

7.     Now my project is ready after double clicked my solution file from the solution explorer, it has branch with main connected with repo like below

8.     Now we have to move these files, into Azure Devops Repository so, click Git Changes, a window will appear like below

9.     There “Enter message” section type some comment as “Initial project files” then choose Commit All And Push  from the Commit All Dropdown list, which means that we are pushing all the project related source code, js, image and others files from local laptop to Azure Devops repo so, that I could download it wherever I need

10. To Make sure this, go back to your azure devops in browser, for me all the files are moved into Repo , refer below screenshot

 

Now, we have created the visual studio project and moved into Repo, now we have to publish this project in one server right for that we need an website for that we are going to create the web App

Step 4

How to create Web App from App Services in Azure?

1.     Login https://portal.azure.com/ from your browser

2.     Click App Services from home page 

3.     Else type App Services on Search resources bar from there click it 

4.     From the next window Click + Create button 

5.     Next screen, click Create new under resource group, a popup comes in there type any name but, I used RG-RazorApp then click Ok

6.     Next Instance details section, type name which is the website name where you are going to see the output of our razor application RazorJ

a.     Publish as Slack

b.     Run time as .Net 6.0(LTS)

c.     Operating system as Windows

d.     Region is by default Central US if you wish you may choose other locations as well so, it looks below

7.      Further steps are very important ,from the app service plan, created new Windows Plan  from the Create New popup

a.     At Sku and Size we are going to choose our server since, its our development and test purpose Microsoft is giving an option to use Free Shared infra by Clicking Change Size from the Spec picker window choose F1 Shared Infra.. 1 GB …

b.     Click Apply

 

8.     At the end it looks like below 

9.     There, click Review + create button since, we are not going to use all other options, you could receive the final page to confirm so, click Create button

10. This process will take 2 to 5 minutes then after you will see Deployment screen completed message

 

So, we have the Organization, Project, Source Code, Website next, we are move into CI section

Step 5

 

How to create Build-CI Pipe line?

1.     Open your browser, go back to azure devops from left pane click Pipelinesà Create Pipeline  

2.     Choose Azure Devops Git 

3.     From the select tab click our repository 

4.     Then from the Configure tab choose click ASP.NET Core(.NET Framework)

5.     Next tab, click Show Assistant from the right side as small bar then it will list down options of what we need to build our project, before going to select it, scroll down to the displaying YAML file, go to last line and keep your cursor there then type publish build artifacts in the Tasks bar like below

6.     So, click Publish build artifacts the next sub screen looks like below , there click Add button

 

7.     Then the selected PBA is in the YAML file(make sure the intent is well aligned like above task else it will give error so, refer my screenshot 

8.     Click Save and run then a small popup appears there commit the YAML file by clicking Save and run button

9.     Then next screen will shows that the project is start build from there click Job 

10. Then after stages shows Gree tick which means the build is succeeded.  

 

Step 6

 

How to create CD release pipeline?

 

1.     Go back to left pane menus and click Pipelines under that click Releases and click New pipeline 

2.      From the new page, click Azure App Service deployment under the Featured section then click Apply now, the right page tab is disappeared 

3.     Now, the same right side stage tab is opens up, stage means does it Dev/Qa/Live so, we rename it as Dev in Stage name then click X symbol to close it 

4.     Then click +Add an artifact

5.     From the artifact window select build then at bottom choose our source as RazorWebApp then automatically default version comes as Latest with Alias name so, here what we are saying that is Create this pipeline from the RazorWebApp source code with latest version then click Add button

6.     Then click the Flash symbol Continuous deployment trigger from Artifacts like below then a popup comes

7.     From there Enable only release trigger; by using this option we are saying that, whenever a new merge and build succeeded in our project then automatically trigger to publish, got it

8.     Then after from the main page, under Dev stage click 1 job, 1 task then a new popup will open

9.     There, click on Authorize button then it’ll ask you to type your azure user id and password then after the Authorize shows 2 subscription there, you have to choose the Service subscription like below then App type is by default Web App on Windows the service name will automatically taken as RazorJ(hope you remember that this is the app service name which we have created in Azure portal) then click Save from the top  

 

10. Then from the main screen, click Run on agent  there change

a.     Display name as Dev-Run on agent

b.     Agent pool as Azure Pipelines

c.     Agent specification as Windows-2022

d.     Artifact download should be like else something is wrong

e.     Run this job as Only when all previous jobs have succeeded then click Save  button at the top

11. From the main screen, next to All Pipelines type the pipeline name as CD RazorWebApp and click Save

12. We have configured that when there are some changes in main branch then CI Build pipeline will start build the project if its success then release will start deploy the project this what we have done above.

13. Then I do some small change in my Index.cshtml page and did push my code 

14. Next, I have created the PR from azure devops , there added my name as approver so, after created PR, I did approve it.

15. Now, if you goto Pipe line from devops left page , it shows that the Build is success

16. Then go to Release automatically the CD pipeline start deploy the razor application to azure app service

17. Now, let we go back to azure portal and go to our app service called RazorJ from there click the URL which will open new tab

 

 

Conclusion

                    We have followed several steps to achieve our goal using Azure CI CD pipeline; here after whenever a new change or merge is happened in master / main branch then automatically Build pipe line will start compile the project if all compiled then it handover to Release CD pipeline there, it will start deploy to our website from the source control.

                    Years before when I entered into the IT, to publish our code changes in dev server then we have to request to TL and he will do it with collection of change set’s by following the check list but, with CI CD everything is automated.

                    I hope you liked this topic.