Azure Web App Deployment Quickstart

Deploy your first web application to Azure App Service.

Introduction

This quickstart guide will walk 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.

By the end of this guide, you will have a functional web app running on Azure.

Prerequisites

Before you begin, ensure you have the following:

  • An Azure account. If you don't have one, sign up for a free account.
  • An understanding of basic web development concepts (HTML, CSS, JavaScript, or your preferred backend language).
  • Your web application code ready for deployment. For this guide, we'll assume a simple static HTML page, but the principles apply to dynamic applications as well.

Step 1: Create an Azure App Service

Let's create a new Azure App Service to host your web application.

1.1 Navigate to the Azure portal and sign in.
1.2 Click on Create a resource in the top-left corner.
1.3 Search for "Web App" and select Web App from the results. Then click Create.
1.4 Fill in the following details in the "Create Web App" form:
  • Subscription: Select your Azure subscription.
  • Resource Group: Click Create new and name it something like my-web-app-rg.
  • Name: Enter a globally unique name for your web app (e.g., my-awesome-quickstart-app-12345). The URL will be {name}.azurewebsites.net.
  • Publish: Select Code.
  • Runtime stack: Choose your preferred runtime (e.g., Node.js, Python, PHP, .NET). For a static site, any will work, but choosing "Static HTML" or a language like Node.js is common.
  • Operating System: Select Linux or Windows.
  • Region: Choose a region close to you.
  • App Service Plan: Click Create new. Name it (e.g., my-app-service-plan) and select a Pricing tier (e.g., Free F1 for testing).
1.5 Click Review + create, then Create to deploy your App Service.

Deployment might take a few minutes. Once complete, you'll see a notification.

Note: For this quickstart, we're using the free tier, which is great for testing and learning. For production, consider a higher tier for better performance and features.

Step 2: Deploy Your Code

There are many ways to deploy code to Azure App Service. For this quickstart, we'll use the built-in deployment center with Git.

2.1 Once your App Service is deployed, click Go to resource.
2.2 In the App Service blade, scroll down to the Deployment section and click on Deployment Center.
2.3 Under the Source tab, select Local Git and click Continue.
2.4 You will be presented with Git credentials. Note down the Git clone URI and the username/password. You can also set up FTP credentials here if preferred.

Now, let's deploy your code from your local machine.

2.5 Open your terminal or command prompt and navigate to your web application's root directory.
2.6 Initialize a Git repository if you haven't already: 
git init
2.7 Add your application files. For a static HTML page, you might have an index.html file. 
git add .
2.8 Commit your changes: 
git commit -m "Initial web app deployment"
2.9 Add the Azure Git repository as a remote. Replace {YourGitCloneURI} with the URI from Step 2.4: 
git remote add azure {YourGitCloneURI}
2.10 Push your code to Azure. You will be prompted for the username and password you noted in Step 2.4. 
git push azure main
(Or master if your default branch is named master)

The push might take a moment. Once successful, your code will be deployed to Azure App Service.

Step 3: View Your App

It's time to see your deployed web application in action!

3.1 Go back to your App Service overview page in the Azure portal.
3.2 Click on the URL displayed at the top of the page (e.g., https://my-awesome-quickstart-app-12345.azurewebsites.net).

Your web application should now be visible in your browser!

Troubleshooting: If you see an error page or an empty site, double-check your code files and ensure your index.html (or equivalent startup file) is in the root directory of your Git repository. Sometimes, a quick restart of the App Service can resolve minor deployment issues.

Next Steps

Congratulations on deploying your first web app to Azure! Here are some ideas for what to do next:

  • Explore Deployment Methods: Learn about other deployment options like CI/CD pipelines with Azure DevOps or GitHub Actions, FTP, or WebDeploy.
  • Configure Custom Domains: Map your own domain name to your Azure App Service.
  • Scale Your App: Adjust the App Service plan to handle more traffic.
  • Integrate Databases: Connect your web app to Azure Database services like Azure SQL Database or Azure Cosmos DB.
  • Add HTTPS: Secure your web app with an SSL certificate.

For more advanced scenarios and detailed documentation, please refer to the official Azure App Service documentation.