DEV Community

Cover image for Part 1-Pipeline: "Azure Web App Setup & Launch"
Shrihari Haridass
Shrihari Haridass

Posted on

Part 1-Pipeline: "Azure Web App Setup & Launch"

As we explore Azure DevOps, we've covered Azure Boards and Azure Repos. Now, we're moving on to one of the most crucial services — Azure Build-Release Pipeline or CI/CD Pipeline. Let's dive in!

So, we explore Azure Pipelines in 5 parts. For example, in the demo, we deploy a YouTube clone app using Azure Pipelines, and here are the 5 parts.

  1. "Azure Web App Setup & Launch"
  2. "Classic Editor CI/CD Walkthrough"
  3. "Exploring YAML Pipelines in Azure DevOps"
  4. "Mastering Release Pipelines: Blue-Green Approach"
  5. "Running the Azure Release Pipeline"

So, let's start. I hope the series enhances your knowledge and adds value to your domain. Make sure to give me feedback and don't forget to follow. Let's deep dive into the DevOps realm and brighten our careers together.

=================================================================

*Note: *

When you are doing practical work, don't delete anything because our Azure DevOps series relies on continuity between each part. Ensure that you are not cleaning your workspace. Additionally, don't worry about charges, as our account is on a free trial. We are covering beginners or basic Azure DevOps, so our project is not large. If a bill is generated, it will not go higher. For some knowledge, you can budget or be ready to invest some money.

=================================================================

-> So, let's get started.

-> For the demo, we'll be using the YouTube clone website.

-> For that, we will fork the GitHub repository. I will share the link to that repository below; it is the YouTube application.
Github Repo Link

-> As I mentioned earlier, I also broke down in detail what we are covering in the entire pipeline series as follows:

A. Provision Azure App Service to host the website (i.e., PaaS).

B. Create a build pipeline using the classic editor (ideal for beginners).

C. Create a build pipeline using YAML (commonly used in companies or as per company requirements).

D. Explore YAML structure, covering jobs, stages, steps, and tasks.

E. Discuss variables, triggers, build properties, and agents.

F. Learn how to publish artifacts.

G. Automate deployment with the release pipeline.

H. Achieve continuous delivery using deployment slots for enabling blue-green deployment.

Conclude with deployment gates, such as querying work items and obtaining approvals for production deployment.

Note: Some actions may incur charges, so ensure responsible usage. I recommend practicing these tasks for learning purposes.

-> So, let's start by cloning the website onto our machine. I've already provided the repository link; you can clone it.

Image description

-> Now, open it in your Visual Studio Code. After that, go to Azure DevOps and create a new project, which we'll be using for the demo.

Image description

-> I hope you've read the previous blog, where we covered how to create projects in Azure Boards and Repos. If so, great!

-> Next, navigate to Repos. You'll notice there's an empty repository. Since we've cloned the YouTube clone from an external repository on GitHub, we'll upload or push that code into our Azure Repos. Choose the option 'Push an existing repo from CLI'.

Image description

-> Ensure that you remove the existing origin to avoid any errors. After pushing, check Azure Repos to confirm that the code has been successfully uploaded.

git remote remove origin

Image description

Image description

-> Now, return to the Azure Portal and create the web app. Afterward, navigate to 'App Service.'

Image description

-> The 'Azure App' service is essentially a PaaS (Platform as a Service) solution provider. I hope you have a clear understanding of IaaS, PaaS, and SaaS in the cloud. Now, let's create a new web app by clicking on 'Create.'

Image description

-> When selecting a resource group, ensure that you choose the appropriate one. During deletion, all resources inside the resource group will be removed automatically, making it easier to maintain and clean up.

-> In the creation window, carefully choose the options. I have already marked some options that we will be using. Then, click on 'Next'.

Image description

-> We don't need a database at the moment, so hit 'Next' in the deployment section. Here, we don't want anything, so click 'Next.' In the networking options, make sure 'Enable Public Access' is set to 'ON,' and then click 'Review & Create.' It will take a few seconds to create it (you can ignore the cost because we are only using it for a short time).

Image description

Image description

-> Next, navigate to 'Resources,' where you can either 'Browse your application' or click on the 'Domain Name.'

Image description

Image description

-> Here, our application has started; it's just that we haven't deployed our code yet, which is why it's showing the default page.

-> Next, you can explore different options there, such as Stop, Swap, Restart, and many more. We'll be covering the 'Swap' option towards the end when we work on deployment slots.

-> Now that our infrastructure is ready, it's time to deploy our application. We will delve into this process in our next part.

=================================================================

*Special Announcement:
*

As we delve into Azure DevOps, I'll be posting blogs every day for the pipeline series, ensuring a faster pace of coverage. No need to wait until next Wednesday; we'll progress swiftly through the pipeline service. Stay tuned for daily updates!

=================================================================

Summary:

In Part 1, we accomplished the deployment of our application to Azure Web Service, gaining insights into the necessary steps and gaining an overall overview of the deployment pipeline. Stay tuned for more in-depth coverage of Azure DevOps services in upcoming parts of the series.

=================================================================

If you have any doubts, questions, or recommendations, feel free to drop a comment. Follow me for updates and happy learning! :)

Top comments (0)