Deploying a Web App with a CI/CD Pipeline on Azure App Service: A Step-by-Step Guide

In today’s fast-paced development environment, automating deployments and integrating Continuous Integration/Continuous Deployment (CI/CD) pipelines are essential for efficient software delivery. Azure App Service provides a robust platform for hosting web apps, and setting up a CI/CD pipeline ensures your application is always up-to-date. In this blog, we’ll walk through the steps to deploy a web app with a CI/CD pipeline on Azure App Service using the Azure Portal.

Step 1: Create a Web App in Azure App Service

1. Log in to Azure Portal:

   • Open portal.azure.com and log in with your Azure account.

2. Create a New Web App:

   • In the left-hand menu, click on "Create a resource."
   • Search for "App Service" and select it from the list.
   • Click "Create" to start the configuration.

3. Configure the Web App:

   • Subscription: Choose your Azure subscription.
   • Resource Group: Select an existing resource group or create a new one.
   • Name: Enter a unique name for your web app.
   • Publish: Select "Code" if you are deploying code directly, or "Docker Container" if using a container.
   • Runtime Stack: Choose the runtime stack (e.g., Node.js, .NET, Python) based on your application.
   • Region: Select the region where you want to host your app.

4. Review and Create:

   • Review the configuration settings.
   • Click "Create" to deploy the web app. Wait for the deployment to complete.

Step 2: Set Up Continuous Integration

1. Navigate to Your Web App:

   • Go to "App Services" in the Azure Portal.
   • Select the web app you just created.

2. Configure Deployment Center:

   • In the left-hand menu, find and click on "Deployment Center."

3. Select Source Control:

   • Source Control: Choose where your source code is hosted. Options include GitHub, Azure Repos, Bitbucket, and local Git.
   • Authorize and Connect: If you choose GitHub or another service, authorize Azure to access your repository. Follow the prompts to connect to your source control account.

4. Configure Build Settings:

   • Build Provider: Select a build provider (e.g., GitHub Actions, Azure Pipelines). GitHub Actions is a popular choice and integrates directly with GitHub repositories.
   • Branch: Choose the branch you want to deploy from. Typically, this is the main branch of your repository.

5. Review and Finish:

   • Review the deployment settings.
   • Click "Finish" to set up the CI pipeline.

Step 3: Configure Continuous Deployment

1. Review Pipeline Configuration:

   • Once the CI pipeline is configured, Azure will create a build pipeline for you. For GitHub Actions, you will find a .github/workflows directory in your repository with a YAML file for deployment.
   • Review the YAML file or build pipeline configuration to ensure it meets your deployment needs.

2. Set Up Automatic Deployments:

   • Azure App Service automatically sets up deployment triggers based on the configuration. Whenever you push changes to the selected branch, the pipeline will automatically build and deploy the changes to your web app.

3. Verify Deployment:

   • After pushing changes to the repository, check the "Deployment Center" in Azure Portal to monitor the build and deployment process.
   • Go to the "Logs" section to view detailed logs of the deployment process.

Step 4: Test Your Deployment

1. Access Your Web App:

   • Navigate to the "Overview" section of your web app in Azure Portal.
   • Find the "URL" of your web app and open it in a web browser.

2. Verify Application Functionality:

   • Test your application to ensure it’s working as expected. Check for any issues and make sure all features are functioning correctly.

3. Monitor and Troubleshoot:

   • Use Azure’s monitoring tools, such as Application Insights, to track performance and diagnose any issues. Go to "Application Insights" in your web app’s menu and configure it if needed.

Conclusion

By following these steps, you’ve successfully deployed a web app with a CI/CD pipeline on Azure App Service. This setup allows you to automate the deployment process, ensuring that every change in your source code is tested and deployed efficiently. Azure App Service combined with CI/CD pipelines streamlines your development workflow, enabling faster delivery of features and updates to your users.

Feel free to explore additional Azure App Service features, such as scaling options, custom domains, and SSL certificates, to further enhance your web application’s performance and security. Happy coding! 🚀