Azure DevOps CI/CD YAML Pipelines: GitHub to Azure Web App (PaaS)

Introduction

In this article, we learn about creating a GITHub account, pushing local code to a GITHub repository, CI & CD (YAML) configuration using the GITHub repository, and publishing code in Azure Web App services.

Now, go here to create your own repository in GitHub.

1. Sign up with email ID and password, new registration is approved once you’re done with the confirmation mail.
2. If you’re already a registered member with a GitHub account, you can click on the Sign-In option, as shown in the figure below.
   

Once you’ve clicked in Sign-In, the page is redirected to the login page and filled in with username or email address and password. Click on Sign-in button as shown in the below figure.

Once login is successful, it will redirect to the dashboard page, as shown in the figure below. Now, we’ll create a new repository to maintain our code. Click as shown in the figure below.

1. Give a valid repository name for our project.
2. Description of the repository.
3. Give valid access to commit your codes and access your files.
4. Fill in all the above options and Click on the Create Repository button.
   

A new repository is created and now we can copy commands and keep them in Notepad to run in the developer command prompt.

Now create any web application by using Visual Studio SDK or you can use your existing application for this activity.

Right-click on Solution and click on ‘Add Solution to Source Control’.

Once the Solution is added to source control, it will be added to the master origin. Go to ‘Tools’ => Command Line => Developer Command Prompt.

Now enter our git code to push code from local to GitHub repository. It will redirected to GitHub credentials for valid operation.

Once our code is successfully pushed to the Github repository, we get the below log details as shown in the below screenshot.

Now we need to push files to the repository, Right Click on Project => Source Control => Click on the ‘Commit’ option.

Check all files are staged in the ‘Staged Changes’ category, provide valid comments for commit, and Click on the ‘Commit Staged’ option. Don’t forget to push code from ‘Outgoing commits’.

Once you stage changes it will go to outgoing commits, from outgoing commits you need to push to repository.

Now our job is done and it’s time to configure the pipeline in Azure DevOps. Switch to the DevOps site now. Go here and go to your organization to create a new project. Fill in valid details for your project and click on the Create Project button.

Once the project is created there will be an overview as shown in the below screenshot. We’re not using the ‘Repos’ option in this scenario.

Now click on ‘Pipelines’ and Click on the ‘Builds’ option.

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 the ‘Pipelines’ option to create our pipeline for Continuous Integration (CI). Click on the ‘Create Pipeline’ button.

To create a pipeline, we need to give permission to access GitHub in the Azure DevOps Project settings option. Select the GitHub (YAML) option as shown.

The next Step ‘Select’ section. In this selection, we need to select the GitHub repository to create a pipeline. Select the repository as shown in the below screenshot.

It will be directed to authenticate the repository to access repository to your Azure DevOps. Click on the ‘Approve & Install’ button.

The next ‘Configure’ section was to choose environment details. Select Asp.Net Core(.Net Framework) and it will redirect to the ‘Review ’ section.

In the ‘Review’ section, YAML code was generated, In this section, we need to add one task in the final step of this YAML coding. Go to ‘Show assistant’ to add ‘Tasks’ in the YAML execution steps.

In the Tasks section, type the ‘publish’ keyword to get the ‘Publish build artifacts’ option. Click on the ‘Run’ option.

It will prompt the below screen to commit the YAML code to your repository. Click on the ‘Save and run’ button.

Quickly click on the ‘Pipelines’ option to know the status of pipelines. Click on ‘Job’ to know the pipeline log information.

In this section, it will initialize the pipeline execution job step by step.

Once the Execution job is done successfully, it will show as in the below screenshot in green.

If we miss any files in the repository, they will appear in the log-in information as shown in the below screenshot.

Go to the Pipelines option to know the status of Continuous Integration (CI), and the next step is to create Continuous Deployment (CD).

Click on Release to configure Continuous Deployment(CD). Click on the ‘New Pipeline’ button to create a new release pipeline.

Option to select the template, Select Azure App Service deployment and click on ‘Apply’.

In this section, Artifacts and Stages are available. We need to give a valid stage name and stage owner details for deployment.

Stage details will be available as shown in the below screenshot.

Add an artifact now to select our build code from the build pipeline. Provide valid details from each drop-down list and click on the ‘Add’ button.

The artifact was added now and still, we have an error in the ‘Dev Stage’. Click on ‘1 job, 1 task’ to configure our project path (.zip file).

Provide Azure subscription details. Link your Azure subscription by clicking on the ‘Manage’ option and Authorize.

Fill in Azure Subscription details, App type, & App service name.

Give a valid comment and Click on the ‘OK’ button.

Once the release pipeline is created as shown below screenshot. Click on the ‘Release-1’ option to know the release details.

Now Click on the ‘Deploy’ button for application deployment in Azure web app services.

Give comments for release deployment and Click on the ‘Deploy’ button.

Deployment was started and it is in ‘Queued’ status, Click on ‘Queued’ to know the deployment log information.

Log information as started, as shown in the below screenshot.

Once deployment is done, the below status will appear in the log information status.

Now click on the ‘Release’ option to know the release status for our applications.

Now switch to here and go to your resource group => Web Application => Click on the URL as shown in the below screenshot.

It will be redirected to the next tab of our web application. That’s it

Happy configuring & coding!