DEV Community

Olaolu' Afolami
Olaolu' Afolami

Posted on

Deploying a web app with CI/CD pipeline on Azure App Service.

Azure App Service

Azure App Service is a fully managed platform-as-a-service (PaaS) offering by Microsoft Azure that enables developers to build, deploy, and scale web applications, mobile backends, and RESTful APIs quickly. It supports various programming languages and frameworks, including .NET, Node.js, Java, Python, PHP, and Ruby, allowing developers to work in their preferred environment.

Key Features:

  • Managed Hosting: Azure App Service takes care of infrastructure management, so you don’t need to worry about server maintenance, patching, or scaling.

  • Automatic Scaling: It supports auto-scaling, allowing your application to handle varying loads by automatically scaling out or in based on traffic.

  • Continuous Deployment and Integration: It integrates seamlessly with GitHub, Azure DevOps, and other CI/CD tools, enabling automated deployments.

  • Built-in Monitoring and Diagnostics: Application Insights and Azure Monitor provide deep insights into the performance and health of your applications.

  • Security: Supports custom domain SSL, authentication with Azure Active Directory, and compliance with security standards like ISO and SOC.

Azure App Service Plan.

An Azure App Service Plan defines the region, resource allocation (CPU, memory, etc.), and pricing tier for the apps hosted in Azure App Service. Essentially, it represents the underlying infrastructure that supports your web app.

Key Components:

  • Region: The geographical location where your App Service Plan’s resources are hosted.

  • Pricing Tiers: There are multiple tiers ranging from Free to Premium, each offering different levels of compute resources, scaling options, and features.

  • Free/Shared: Basic tiers for development and testing with limited features.

  • Basic: Suitable for low-traffic production sites with up to three instances.

  • Standard: Includes autoscaling, traffic manager, and more advanced features.

  • Premium: For high-traffic, mission-critical apps needing higher performance, more instances, and additional features like VNET integration.

  • Resource Allocation: The plan determines how much compute power, memory, and storage your apps can use.

Key Benefits:

  • Cost Management: By adjusting the tier of your App Service Plan, you can optimize costs according to your application’s needs.

  • Multiple Apps: You can host multiple apps on the same App Service Plan, sharing the allocated resources, which helps in efficient resource utilization.

  • Flexible Scaling: Depending on the tier, you can scale out (add more instances) or scale up (move to a more powerful tier) based on the demands of your application.

Together, Azure App Service and App Service Plans provide a robust, scalable, and cost-effective solution for hosting web applications and APIs on the cloud.

Use Cases and Scenarios.

Azure App Service and App Service Plan are versatile tools that cater to a wide range of scenarios:

Web Hosting: Azure App Service is ideal for hosting websites and web applications, whether they're simple static sites or complex, enterprise-grade applications. Its support for multiple languages and frameworks makes it a go-to solution for developers working in diverse environments.

API Hosting: Azure App Service is also well-suited for hosting RESTful APIs. The platform's built-in authentication and authorization capabilities, along with seamless integration with Azure API Management, make it easy to manage and secure APIs.

Mobile Backend: App Service can serve as the backend for mobile applications, offering features like offline sync, push notifications, and authentication services. This makes it a robust solution for mobile app developers who need a reliable and scalable backend.

Continuous Deployment: For teams practicing DevOps, Azure App Service supports continuous integration and deployment, allowing code changes to be automatically deployed to production. This reduces manual intervention and helps maintain a continuous delivery pipeline.

Multi-Tenant Applications: Azure App Service can host multiple web apps within a single App Service Plan. This is particularly useful for multi-tenant applications where different clients or customers share the same infrastructure while maintaining isolation.

STEPS:

1. Create an Azure App Service Plan

  • Log in to the Azure Portal.

  • Click on Create a resource and search for App Service Plan.

  • Click Create and provide the following details:

  • Subscription: Choose your Azure subscription.

  • Resource Group: Select an existing resource group or create a new one.

  • Name: Provide a name for your App Service Plan.

  • Region: Choose the region that is closest to your users.

  • Pricing tier: Choose the pricing tier based on your app's requirements (the free tier is suitable for small applications).
    Click Review + Create and then Create to provision the App Service Plan.

Azure app service plan

create

2. Create an Azure App Service

  • Navigate to "App Services" and click "Create".

app services

app services

Provide the necessary details:
Subscription: Select the subscription you used in the previous step.

Resource Group: Choose the resource group where your App Service Plan is located.

Name: Give a unique name to your web app.

Publish: Choose Code.

Runtime stack: Select the language stack (e.g., Node.js, .NET, Python).

Region: Choose the same region as your App Service Plan.

App Service Plan: Select the App Service Plan you created earlier.

Click Review + Create and then Create to deploy your App Service.

webapp

webapp

Create

  • Click Go to resource.

goto

3. Prepare Your Web Application.

  • Log in to your Github account and create a new repository.

Github

New repo

New repo

wepapp repo

  • Click on Code and copy the web URL.

  • Open Visual Studio code and select the Terminal => New terminal

  • Change the terminal to Bash

VScode

  • Create a folder which will contain all the files for your site and then clone the repository you created in Github.

Git repo

git clone

  • In Visual Studio code, navigate to the folder created and create a new file called index.php and add a simple code below.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple PHP Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Simple PHP Website</h1>
        <nav>
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Home Page</h2>
        <p>This is the home page of my simple PHP website.</p>
    </main>

    <footer>
        <p>&copy; 2024 Simple PHP Website</p>
    </footer>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

VScode

-
Use the commands Git add ., git commit and git push to add the newly created file index.php to Github.

git push

4. Configure GitHub Actions for CI/CD

GitHub Actions is a powerful tool to automate your CI/CD process directly from your GitHub repository.

  • In the Azure Portal, navigate to your App Service.

  • Select Deployment Center in the Deployment blade.

  • Select Github as the Source.

Image description

Top comments (0)