MSDN Documentation

Deploy Your First Web App to Azure App Service

This tutorial will guide you through the essential steps to deploy a simple web application to Azure App Service, a fully managed platform for building, deploying, and scaling web apps and APIs.

Prerequisites

• An Azure account with an active subscription. If you don't have one, you can create a free account.
• A simple web application (e.g., HTML, CSS, JavaScript static site, or a basic Node.js/Python application). For this tutorial, we'll assume you have a basic static HTML file named index.html.

Step 1: Create an App Service Plan

An App Service plan defines a set of compute resources for your web app to run. You can choose different pricing tiers based on your needs.

1. Navigate to the Azure portal.
2. Click on Create a resource.
3. Search for "App Service plan" and select it.
4. Click Create.
5. Fill in the required details:
   • Subscription: Select your Azure subscription.
   • Resource group: Create a new one or select an existing one.
   • Name: A unique name for your App Service plan.
   • Region: Choose a region closest to your users.
   • Operating System: Select Windows or Linux.
   • Pricing Plan: For testing, you can choose a Free (F1) or Basic (B1) tier.
6. Click Review + create, then Create.

Step 2: Create a Web App

Now, let's create the actual web app resource that will host your application code.

1. In the Azure portal, click Create a resource again.
2. Search for "Web App" and select it.
3. Click Create.
4. Configure the web app settings:
   • Subscription: Your Azure subscription.
   • Resource group: Select the same resource group as your App Service plan.
   • Name: A globally unique name for your web app (e.g., my-first-web-app-tutorial). This will be part of your app's URL (my-first-web-app-tutorial.azurewebsites.net).
   • Publish: Select Code.
   • Runtime stack: Choose a stack relevant to your app. If you have a static HTML, you can select a generic stack like .NET or Node.js, or even leave it as is if deploying static files.
   • Operating System: Match the OS of your App Service plan.
   • Region: Same as your App Service plan.
   • App Service Plan: Select the plan you created in Step 1.
5. Click Review + create, then Create.

Step 3: Deploy Your Code

There are several ways to deploy your code. For simplicity, we'll use the built-in deployment center with Git.

Using Deployment Center (Git Locally

1. Once your web app is deployed, navigate to its resource in the Azure portal.
2. In the left-hand menu, under Deployment, click on Deployment Center.
3. Select Local Git as the source.
4. Click Continue.
5. Azure will provide you with a Git clone URI. Copy this URL.
6. Open a terminal or command prompt on your local machine.
7. Initialize a Git repository in your project folder:

   git init

8. Add your application files to the repository. If you have an index.html file, place it in this folder.
9. Stage your files:

   git add .

10. Commit your changes:

    git commit -m "Initial commit"

11. Add the Azure Git repository as a remote:

    git remote add azure <your-git-clone-uri>

    (Replace <your-git-clone-uri> with the URL you copied.)
12. Push your code to Azure:

    git push azure master

13. You will be prompted for your deployment credentials. If you haven't set them up, go to your App Service's Overview page in the Azure portal, click Get Deployment Credentials, and follow the instructions.

Step 4: Verify Your Deployment

After the deployment is complete, you should see a success message in the Git push output.

1. Navigate back to your web app's Overview page in the Azure portal.
2. Click on the URL provided (e.g., https://my-first-web-app-tutorial.azurewebsites.net).

You should now see your web application running live on Azure!

Next Steps

• Explore other deployment methods like Azure DevOps, GitHub Actions, or FTP.
• Learn about configuring custom domains for your web app.
• Discover how to scale your application based on traffic.