Simplifying Deployment: Setting Up Azure App Service and Getting Ready for CI/CD in DevOps

In this part of the journey, I’ll be walking through how to clone a website project, set up dependencies, build it, and deploy it to Azure App Service. Azure App Service is a Platform-as-a-Service (PaaS) solution, which allows us to host web apps with high availability and easy scalability.

☞ Here's a detailed look at each step:

Step 1: Cloning the Project

➤ To start, we need a local copy of the project codebase. Here’s how we set it up

1. Initialize Git:

• First, I initialized Git with the following command

    git init
  

  • This sets up a new Git repository in the current directory.

2. Cloning the Repository:
   ➤ I then cloned the project from the remote repository using:

    git clone <repository_url>
    ⟶ After cloning, I navigated to the project’s directory:
    bash
    cd <project_directory>
   

3. Checking Files in the Directory:

   ➤ To verify the files were cloned correctly, I listed the contents:

    ls -lrt
   

Step 2: Setting Up Azure for Deployment

• Next, I set up a project in Azure DevOps and Azure App Service to host the project.

  1. Creating a New Project in Azure Repos:
     ➤ I went to the Azure DevOps portal and created a new project called Tube.
     ➤ After creating the project, I navigated to Repos to add a remote origin for version control.

  2. Adding the Remote Origin:

      git remote show origin 
      ⟶remove github remote origin link
      git remote remove origin
      ⟶ To link the local repository to Azure Repos, I added a
       ⟿ remote origin:
      git remote add origin <azure_repo_url>
      git push -u origin main
     

  3. Provisioning Azure App Service:

     ➤ I then headed to the Azure Portal to create an Azure App Service.
     ➤ Azure App Service, as a PaaS solution, simplifies hosting and allows me to focus on the application code without worrying about the underlying infrastructure.
     ➤ I configured my app service, selecting the appropriate subscription, resource group, runtime stack, and region for my deployment.

  4. Deploying the Project to Azure App Service:

     ➤ Once the app service was ready, I deployed the project directly from the Azure DevOps pipeline or using a deployment tool integrated with Azure App Service. At the end of this process, the site was live and accessible

Step 3: Provisioning and Deploying a Web App on Azure App Service

After setting up the basics in Azure DevOps, it’s time to dive into provisioning an Azure App Service to host my web application. I learned a few best practices and explored different deployment options along the way, making this process much easier to manage and scale.
Step 1: Setting Up the Web App in Azure App Service

1. Selecting Subscription and Resource Group:

   Azure requires every resource to be part of a Resource Group. This makes managing multiple resources much easier, especially when I want to clean up everything related to a particular project.

   I selected my subscription and created a new resource group, which I named specifically for all resources related to this project. This allows me to delete the entire resource group if needed, removing all associated resources in one go—a best practice in Azure.

2. Naming the Web App:

   Azure requires a unique name for the Web App. I gave it a distinct name to ensure accessibility.

Step 2: Choosing a Publish Method

Azure App Service offers three options for publishing the application:

1. Code: I can upload the application code directly. Azure provisions the necessary runtime environment (like Node.js or Python) to host the app without requiring me to set up a server, like Nginx or Apache, myself.

2. Docker Container: This allows me to run the app within a Docker container. Docker containers are useful when I want a custom runtime or need to package the app with specific dependencies. (I’ll explore Docker, Kubernetes, and other container-based implementations later on.)

3. Static Web App: For simpler static sites, Azure provides a way to host static files only.

For now, I chose the Code option, as it suits my current needs best, and Azure takes care of the underlying infrastructure.

1. Selecting the Runtime Stack: Since this project is built with React and requires Node.js to serve the front-end application, I selected Node 18 LTS as my runtime stack. Azure provides various runtimes like .NET, Java, Node.js, PHP, and Python, making it flexible to host a wide range of applications. Alternatively, if I needed a custom runtime environment, I could use the Docker Container option

2. Choosing the Right Hosting Options for Your Azure App Service
   Setting up Azure App Service involves several important choices that affect performance, scalability, and cost. Here’s a walkthrough of my configuration for deploying a React application.

Step 1: Selecting the Operating System:
➤ Azure App Service supports both Linux and Windows as underlying host OS options. For my application, I went with Linux. Generally, Linux is preferred for its compatibility with many web apps, especially those built with Node.js, Python, or PHP.

Step 2: Choosing the Deployment Region:

➤ Azure lets you choose the region where your app will be hosted. Since it’s best to deploy close to your target audience, I chose India Central. Each region has different pricing and availability for certain resources, so selecting the nearest or most cost-effective region is a helpful step.

Step 3: Configuring the Pricing Plan:

Azure App Service offers various pricing tiers tailored to different needs, and each plan varies based on CPU, memory, and additional features. I spent some time selecting the right plan, keeping in mind the following options:

1. Premium Plan (P3V3): I opted for this premium tier, which includes 4 GB of RAM and a single virtual CPU, providing robust performance. The premium tier also includes deployment slots, allowing me to manage staging environments and switch between them for smoother deployments.

2. Creating a New App Service Plan: If you’re starting fresh, you can create a new service plan, which I named ASP Day 4. Avoid the default plan if it doesn’t match your requirements; Azure makes it easy to explore different pricing plans.

3. Zone Redundancy: For high availability, Azure offers the option to deploy the app across multiple zones. I kept this option disabled for simplicity but may explore it later if uptime becomes a critical factor.

4. Additional Configuration and Deployment Settings:

   ➤ Database: Since I don’t need a database at the moment, I skipped this option.

   ➤ Continuous Deployment: While Azure offers integration with GitHub Actions, I disabled it for now since I’ll set up my deployment pipeline using Azure DevOps.

   ➤ Networking: I enabled Public Access so that my app would be accessible via HTTP and HTTPS.

   ➤ Monitoring: To keep costs down, I decided to disable Application ➤Insights: which adds logging and monitoring capabilities but incurs additional fees.

Step 5: Final Review and Provisioning

1. After reviewing all the settings, I hit Create. Azure took a few moments to provision the App Service, and once completed, I received a confirmation message saying, "Your deployment is complete." I clicked Go to Resource to access my app’s dashboard.

2. Verifying the Default Page: Once in the app’s dashboard, I clicked

   ➤Browse to open the default app URL. The web app loaded Azure’s default welcome page, which confirmed that the infrastructure was ready. At this point, my app environment was set up, but the actual deployment of code hadn’t occurred yet, so the default page was displayed.

   

   ➤Azure App Service provides options like Start/Stop, Restart, and Delete, which allow me to control the app’s status. It also includes a Swap feature for deployment slots, which I’ll share in another blog

Setting Up a Build Pipeline with Azure DevOps Classic Editor