Azure DevOps Pipelines | Build And Deploy YouTube Clone | Azure DevOps

Step 1: Configure Vs Code

Open Terminal Switch to git bash Run this command:

git config --global credential.helper wincred
git config --global user.name "enter your username"
git config --global user.email "enter your email" config --list

Step 2 : Go to azure website

Azure DevOps Link: Create new Project

Provisioning an Azure App Service to host the website.

Step 1: Fork the repo

Step 2 : Clone the repo

Note: in vs code use Git bash

git init
git clone https://github.com/muteeb03/project_youtube_clone

ls -lrt 
//project youtube
cd project_youtube_clone
ls -lrt

Note: ls -lrt lists all files and directories in the current directory in long format, sorted by modification time in reverse order, showing the oldest modified files first and the newest last

Step 3: Got to dev.azure.com

step 4: then Go to repos and then files

Step 5: Push an existing repository from command line and pasted over the Vs Code

git remote show origin

Note: This is showing github origin but we need azure repo then we write new command to change the directory. In case it is showing github origin use this command

git remote remove origin
git push --u origin --all

Note: When it shows azure repo origin enter git push --u origin --all then refresh azure repos, our code is already there

Step 6: Login to azure portal then hover on app service and create a web app

Note: Azure service is a PASS solution provided by azure All the administrative tasks and activities will be taken care by cloud provider (Azure) and you just focus on maintaining

Step 6 (b): Choose Subscription

Resource group Give name by your choice

Step 7: Now go to azure and create pipelines it will ask where is your code, manage your code but this is not the application code this the pipeline code. There are many options we will first start ++with classic editor

Note: If the classic editor is not showing in Azure DevOps, it might be because it's disabled in the organization settings: 

1. Navigate to Organization Settings

2. Under Pipelines, select Settings

3. In the General section, check if Disable creation of classic build pipelines and Disable creation of classic release pipelines are turned on

4. If they are turned on, change them to Off

If you want to turn on the classic editor at the project level, you need Project Administrator rights.

Note: Classic editor create a pipeline without the yml so this is what we will be using now so lets click over there

Step 7(b): Now you have to Select a source where your application code will reside Select azure repos and you can choose other options like GitHub enterprise subversion bit bucket cloud or any other git which is supported by your DevOps.

Team project Day_4, repository Day_4, Defaulting main branch once everything is fine you can Click continue

Step 7(c): Now Select a template if you select a template it will add some predefined find steps for you or we will start with an empty job

Note: so let me show you what will happen if you select a temp let's say you have to deploy asp.net application on Azure web app right so this is what you select over here click over there hit apply and on the left side you see there are different steps populated like use a nug-get tool installer and u get restored build solution archive file test assemblies uh deployment publish.

All the Phases and all the steps that is there so click over empty

Pipeline - Built Pipeline

1. First is the build pipeline build pipeline this is at the pipeline level right this is the root level if you have worked with Jenkins before this is where your pipeline starts if you work with any other tool basically this is the first step to Define your pipeline

2. Pipeline name of the pipeline YouTube clone Ci agent pool so you can choose from Azure pipeline or the private agents there are two type of agents in Azure DevOps one is Microsoft hosted agent other is self hosted agents or private agents um again if you have worked with Jenkins this is similar to Jenkins slave

   Github actions Gitlab this is similar to runners

3. Agent pool: nothing but the build server where your code will be running for example you have to let's say you have to compile a code that code or that compilation step need an underlining runtime environment or an operating system to exist execute itself to execute the command so that underline application environment is the agent

4. So Microsoft provide the Microsoft hosted agent which is like a shared agent uh uh provided by them and it's shared by like every user or you can create your own agent I will share it in another blog how you can create the self hosted agent but for now we'll be using the Microsoft hosted agent which is the default

Agent specification like uh on which operating system it will be running right so if you click over there it has operating system like it has Mac OS Windows Server you can choose any agent but I am choosing ubuntu latest

Get Sources:

1. Get sources so basically it will do a git checkout uh to download your application code and your pipeline code if it was a Yaml pipeline then there was pipeline code as well but uh at this moment we only have the application code so it will do the checkout automatically with the help of this particular step so again select a source um project repository Branch everything and there are some other options we can which you can check out.

2. once our application source code is checked out the next step is this application has to run on agent we did selected the agent at the pipeline level but we can select the agent at the different stage level as well like there is a build stage there is a test stage there is a deployment stage so we could select different agent for different stage as well so if you go to this step which says agent job one okay um it says agent pool inherited from pipeline so that's why uh there is nothing selecting

   Nothing selected But it is inherited from the pipeline because at the pipeline level we have used the Microsoft hosted agent so it will use the same over here and we don't have anything created as of now so that's why uh there is no other option available but you can you can definitely Define that as per your requirement

   

   3. Now let's add some steps in that you see the plus sign over here it says add a task to agent job.

      Agent Job

   4. one so click over there now it will ask you different steps over here right you can select from these templates and it will create the steps for you or you can write your own custom step as well so the first step that will be running once the code is being checked out uh.

      1. we be running npm install

Note: next step that we'll be doing is we'll be publishing this build so that it can be used by the release pipeline or at the later stages and then we'll deploy the build right so click over here and search for publish okay. scroll down there should be a step for

2. publish build artifact so this is what we select click over here and it says path to publish so click again and the path is same okay this is fine but inside that so this particular path is the there is an environment variable for this which is build. artifact staging directory we are in the staging directory at the moment it will be provisioned on the runtime.

   Note: when the build will be executed and inside that because we know that Npm-build command generates a new build folder right so that's why will add the Build to it okay so that it will be published inside the build folder and then artifact name give it a name so that we can use this name in the later stages so just keep it drop as default and artifact publish location keep it default Azure pipelines because this will be published on the Azure pipeline itself so that's fine okay..

5. the next step to do the application deployment we'll also create a release pipeline later on but for now we'll create the entire Ci/Cd pipeline within this step so let's click over here and add the step for app service or web app right so it says Azure app service deploy select this one okay now display name is app service deploy connection type is resources manager and over here we have to select our Azure service connection so what happens is you know when you are connecting your Azure portal to Azure DevOps it requires a service connection.

6. Our Azure service connection so what happens is you know when you are connecting your Azure portal to Azure devops it requires a service connection right and it has to be authenticated so that authentication is provided by service principal.

   Note: service principal is an entity which has certain permissions attached to it so you create your service principle in Azure portal assign some permissions to it and using that service principle we create the service connection over here.

   6(a):let's say this is our Azure DevOps okay Ado and over here this is our Azure portal so you need some sort of connection because what we we'll be doing is with the help of azure DevOps we'll be deploying the application inside Azure portal right so we need a secure connection over here so that connection is the service connection right but to create that service connection we need some sort of permissions like what that service connection can do like it can deploy the app or it can delete the app it can recreate the app it can read the app..

7. In Azure portal we create the service principal SPN we create it we assign some permissions to it like for now we'll be assigning the

   collaborator permission which is a wider permission but you can customize it as per your need this service principle will have some permissions to perform certain actions on Azure resource we create that service principle over here and using that service principle we create the service Connection in Azure DevOps so this is how it works this is a two-way connection that it established and we can either create service principal from Portal over here or if you have admin access in Azure DevOps you can directly create the service connection from here and it will generate a service principle..

   

8. App Service type: choose web app on linux

   

9. app service name: (select your project)

10. package or folder: replace /**/*.zip with build

Runtime stack: 18 lts node

Variables

There are some variables available over here for you to use these are some default variables collection ID system. debug equal to false this is really important if you have to enable debug logs in your Azure DevOps pipeline.

Note: then you just edit the pipeline and change this option from false to true and it will enable the debug logs it will be really handy when you are facing any issues with your pipeline or you are troubleshooting the pipeline failure it comes really handy so in that case you can keep it true right and then there are some other options as well so and you can add more variables to it these are the system defined variables.

Trigger

1. Trigger by default the continuous integration is not enable but if we click on this we'll click on that later on but if we click on that it it will enable.

Note: The Continuous integration on this pipeline you see how simple it is to enable the CI if you were working in Jenkins you have to set up a web hook between Jenkins and GitHub repository and which will basically then enables this functionality but over here it's just with the click of a button you can enable the CI because it has access to Azure repo it is within the same project and it has all the required access right this is CI but then.

create the build based on the schedule right if you click over here and you can set up a schedule like at what time at what day you want your bill to be run right you can customize it as per your need okay and then you can add the build completion as well like build this project.

Note: when any other project is completed currently this project does not have any other CI pipeline that is why it is not highlighted but otherwise it would have shown so these are all the triggers available.

Options

options like linking the work item to this build create work item on failure like which will create like a work item inside Azure boards and which will have a task for someone to look into the build failure right so we can enable that as well and we can set different options like build job timeout in minutes that's that means if the build does not completed in next 60 minutes it will fail the build and build job cancel timeout as.

History

well then there'll be the history like all the changes that's been made currently we have not run it at this moment so that's why it is blank.

Note: But over here will be all the details so let me verify one more time and then uh we'll execute the pipeline okay this looks good now now hit over here.

Save and queue

it says save and Queue you can either just save it or save and Q that means save and Trigger the pipeline so let's go ahead with that option and you can add a comment like why are you running this pipeline let's

1. save comment: call it initial initial

   Note: trigger right and you can change certain options at the runtime as well like

2. Agent pool: agent pool that you want run on your pipeline

3. Agent specification: pipeline agent specification branch and so on and you can change the variables at the runtime as well like let's say if I want this particular Bel to be run as debug um so I can just click over here and change the variable so now just let's just go ahead with these options and click over here which says 4. save and run: all right once you do that it will be visible something