Azure Documentation

Deploy your first Web App on Azure

This quickstart guide will walk you through the process of deploying a simple web application to Azure App Service using the Azure portal.

Prerequisites

Before you begin, ensure you have:

• An Azure account. If you don't have one, you can create a free account.
• A simple web application project (e.g., a static HTML file, a Node.js app, a Python Flask app). For this guide, 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 on. You need to create one before you can create a web app.

1. Navigate to the Azure portal.
2. In the search bar at the top, search for "App Service plans" and select it.
3. Click Create.
4. On the Basics tab:
   • Subscription: Select your Azure subscription.
   • Resource group: Click Create new and enter a name (e.g., my-web-app-rg).
   • Name: Enter a unique name for your App Service plan (e.g., my-app-plan).
   • Region: Choose an Azure region close to you or your users.
   • Operating System: Select Linux or Windows.
   • Pricing tier: Select a suitable tier (e.g., F1 Free for testing, or a paid tier for production).
5. Click Review + create, then Create.

Step 2: Create a Web App

Now you'll create the actual web app that will host your application.

1. In the Azure portal search bar, search for "App Services" and select it.
2. Click Create App Service.
3. On the Basics tab:
   • Subscription: Select your Azure subscription.
   • Resource group: Select the resource group you created in Step 1 (e.g., my-web-app-rg).
   • Name: Enter a globally unique name for your web app (e.g., my-first-azure-webapp-12345). This will be part of your app's URL (your-app-name.azurewebsites.net).
   • Publish: Select Code.
   • Runtime stack: Choose the appropriate stack for your application (e.g., Node.js, Python, PHP, .NET). For a static HTML site, you can select HTML if available, or any basic stack like Node.js.
   • Operating System: Match this to your App Service Plan (Linux or Windows).
   • App Service Plan: Select the plan you created in Step 1 (e.g., my-app-plan).
4. Click Review + create, then Create.

Step 3: Deploy Your Code

Once the web app is created, you can deploy your code. For this simple example, we'll use the built-in deployment center.

1. Go to your newly created Web App resource in the Azure portal.
2. In the left-hand menu, under Deployment, select Deployment Center.
3. Choose Local Git as the source.
4. Click Continue.
5. You will see a Git clone URI and credentials. Note these down.
6. On your local machine, open a terminal or command prompt.
7. Navigate to the directory containing your web application code (e.g., where your index.html is located).
8. Initialize a Git repository if you haven't already: git init
9. Stage your files: git add .
10. Commit your changes: git commit -m "Initial commit"
11. Add the Azure Git remote: git remote add azure <Your_Git_Clone_URI> (Replace <Your_Git_Clone_URI> with the URI from the Deployment Center).
12. Push your code to Azure: git push azure master (You might be prompted for the Git credentials you noted earlier).

Step 4: Verify Your Deployment

After the deployment is complete, you can access your web app.

1. Go back to your Web App resource in the Azure portal.
2. On the overview page, you will find the URL for your web app. Click on it.
3. You should see your deployed web application (e.g., your index.html content).

Congratulations!

You have successfully deployed a web application to Azure App Service. Explore the Azure App Service documentation for more advanced features and configurations.