Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)

Introduction

 
In this article we learn about creating a GITHub account, pushing local code to a GITHub repository, CI & CD (YAML) configuration using GITHub repository, and publishing code in Azure Web App services. 
 
Now go here to create your own repository in GitHub.
  1. Signup with email id and password,  new registration is approved once you’re done with confirmation mail.
  2. If you’re already registered member with GitHub account, you can click on Sign-In option as shown in the figure below.
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once you’ve clicked in Sign-In, page is redirected to login page and fill in with username or email address and password. Click on Sign in button as shown in the below figure.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once login was successful, it will redirect to dashboard page as shown in the below figure. Now we’ll create a new repository to maintain our code. Click as shown in the below figure.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
  1. Give valid repository name for our project.
  2. Description about the repository.
  3. Give valid access to commit your codes and accessing your files.
  4. Fill all the above options and Click on Create Repository button.
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
New repository is created and now we can copy commands and keep it in notepad to run in developer command prompt.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now create any web application by using visual studio SDK or you can use your existing application for this activity.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Right click on Solution and click on ‘Add Solution to Source Control’.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once Solution is added to source control, it will be added to master origin. Go to ‘Tools’ => Command Line => Developer Command Prompt.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now enter our git code to push code from local to GitHub repository. It will redirected to GitHub credentials for valid operation.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once our code is successfully pushed to Github repository, we get the below log details as shown in the below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now we need to push files to repository, Right Click on Project => Source Control => Click on ‘Commit’ option.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Check all files are staged in ‘Staged Changes’ category, provide valid comments for commit and Click on ‘Commit Staged’ option. Don’t forgot to push code from ‘Outgoing commits’.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once you staged changes it will go to outgoing commits, from outgoing commits you need to push to respository.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now our job is done and it’s time to configure pipeline in Azure devops. Switch to devops site now. Go to here and go to your organization to create a new project. Fill in valid details for your project and click on create project button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once project is created there will be an overview as shown in the below screenshot. We’re not using ‘Repos’ option in this scenario.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now click on ‘Pipelines’ and Click on ‘Builds’ option.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
It notifies you to  switch to a multi stage pipeline experience preview to use. Our Pipelines options are changed as shown in the below screenshot, Go to ‘Pipelines’ option to create our pipeline for Continuous Integration (CI). Click on ‘Create Pipeline’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
To create pipeline, we need to give permission to access GITHUB in Azure Devops Project settings option. Select GitHub (YAML) option as shown.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Next Step ‘Select’ section. In this selection we need to select GitHub repository to create pipeline. Select repository as shown in the below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
It will be directed to authenticate repository to access repository to your Azure devops. Click on ‘Approve & Install’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Next ‘Configure’ section was to choose was environment details. Select Asp.Net Core(.Net Framework) and it will redirect to ‘Review ’ section.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
In ‘Review’ section, YAML code was generated, In this section we need to add one task in final step of this YAML coding. Go to ‘Show assistant’ to add ‘Tasks’ in YAML execution steps.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
In Tasks’ section, type ‘publish’ key word to get ‘Publish build artifacts’ option. Clicked on ‘Run’ option.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
It will prompt below screen to commit YAML code to your repository. Click on ‘Save and run’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Quickly click on ‘Pipelines’ option to know the status of pipelines. Click on ‘Job’ to know the pipeline log information.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
In this section, it will initialize pipeline execution job step by step.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once Execution job is done succesfully, it will show as in the below screenshot in green. 
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
If we missed any files in repository, it will appear in  log in  information as shown in the below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Go to Pipelines option to know the status for Continous Integration (CI) and the next step is to create Continous Deployment (CD).
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Click on Release to configure Contious Deployment(CD). Click on ‘New Pipeline’ button to create new release pipeline.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Option to select template, Select Azure App Service deployment and click on ‘Apply’.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
In this section, Artifacts and Stages are available. We need to give valid stage name and stage owner details for deployment.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Stage details will be available as shown in the below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Add an artifact now to select our build code from build pipeline. Provide valid details from each dropdownlist and click on ‘Add’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Artifact was added now and still we have an  error in ‘Dev Stage’. Click on ‘1 job, 1 task’ to configure our project path (.zip file).
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Provide Azure subscription details. Link your azure subscription by clicking on ‘Manage’ option and Authorize.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Fill in Azure Subscription details, App type & App service name.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Give valid comment and Click on ‘OK’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Once release pipeline is created as shown in below screenshot. Click on ‘Release-1’ option to know the release details.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now Click on ‘Deploy’ button for application deployment in azure web app services.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Give comments for release deployment and Click on ‘Deploy’ button.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Deployment was started and it is in ‘Queued’ status, Click on ‘Queued’ to know the deployment log information.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Log information as started as shown in below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS) 
 
Once deployment is done, the below status will appear in the log information status.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now click on ‘Release’ option to know the release status for our applications.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Now switch to here and go to your resource group => Web Application => Click on URL as shown in below screenshot.
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
It will be redirected to the next tab to our web application. That’s it…
 
Azure Devops CI And CD YAML Pipelines With GITHub And Azure Web App Services (PAAS)
 
Happy configuring & coding…!