Deploying a Web App to Azure App Service

This tutorial guides you through the process of deploying a simple web application to Azure App Service. Azure App Service is a fully managed platform for building, deploying, and scaling web apps and APIs. It supports a variety of languages and frameworks, including .NET, Java, Node.js, Python, and PHP.

Prerequisites:
  • An Azure account with an active subscription. If you don't have one, you can create a free account.
  • A web application project ready for deployment (e.g., a simple HTML/CSS/JS site, or a dynamic application).

Step 1: Create an Azure App Service Web App

First, you need to create a Web App resource in Azure. This will be the environment where your application will run.

  1. 1 Navigate to the Azure portal.
  2. 2 Click on Create a resource in the top-left corner.
  3. 3 Search for "Web App" and select it from the results. Click Create.
  4. 4 In the Create Web App blade, fill in the following details:
    • Subscription: Select your Azure subscription.
    • Resource Group: Create a new one (e.g., my-webapp-rg) or select an existing one.
    • Name: Enter a globally unique name for your web app (e.g., my-unique-app-name). This name will be part of the URL (my-unique-app-name.azurewebsites.net).
    • Publish: Select Code.
    • Runtime stack: Choose your application's runtime (e.g., Node 18 LTS, .NET 6, PHP 8.1).
    • Operating System: Select Linux or Windows.
    • Region: Choose a region close to your users.
    • App Service Plan: Click Create new or select an existing one. For this tutorial, a Free (F1) tier is sufficient.
  5. 5 Click Review + create, then click Create.
Tip: You can automate this process using Azure CLI or ARM templates for more complex deployments.

Step 2: Deploy Your Web Application

There are several ways to deploy your code to Azure App Service. We'll cover a common method using Git deployment.

Option A: Deploying via Git Clone URL

Azure App Service provides a Git repository that you can push your code to.

  1. 1 Once your Web App is created, navigate to its resource page in the Azure portal.
  2. 2 In the left-hand menu, under Deployment, select Deployment Center.
  3. 3 Under the Source tab, select Local Git. Click Continue.
  4. 4 Note the Git Clone URI provided. It will look something like https://.scm.azurewebsites.net/.git.
  5. 5 On your local machine, open a terminal or command prompt. Navigate to your web application's project directory.
  6. 6 Initialize a Git repository if you haven't already: 
    git init
  7. 7 Add a remote repository using the Git Clone URI from the Azure portal: 
    git remote add azure
    Replace <Git Clone URI> with the actual URI.
  8. 8 Stage your files: 
    git add .
  9. 9 Commit your changes: 
    git commit -m "Initial commit of web app"
  10. 10 Push your code to Azure: 
    git push azure master
    You might be prompted for your Azure deployment credentials.

Option B: Deploying via Zip Push

You can also zip your application files and deploy them directly.

  1. 1 Navigate to your Web App in the Azure portal.
  2. 2 In the left-hand menu, under Development Tools, select Advanced Tools. Click Go.
  3. 3 This will open the Kudu console. Navigate to the site/wwwroot directory.
  4. 4 Use the zip upload functionality (often found at the top of the file explorer) to upload your zipped application files.
Important: Ensure your application's entry point is correctly configured. For example, if you're deploying a Node.js app, the server.js or app.js should be at the root of your deployment.

Step 3: Verify Your Deployment

After the deployment is complete, your web application should be accessible via its URL.

  1. 1 Go back to your Web App's overview page in the Azure portal.
  2. 2 Click on the URL provided (e.g., https://my-unique-app-name.azurewebsites.net).
  3. 3 Your deployed web application should now be visible.

Next Steps

Congratulations! You've successfully deployed a web app to Azure App Service.