Microsoft Docs

Tutorial: Create and Deploy a Web App to Azure App Service

This tutorial guides you through the process of creating a basic web application and deploying it to Azure App Service. Azure App Service is a fully managed platform that enables you to build and host web applications, mobile back ends, and RESTful APIs in the programming languages of your choice without managing infrastructure.

Prerequisites

• An Azure subscription. If you don't have one, you can sign up for a free account.
• A development environment set up for your chosen language (e.g., Visual Studio, VS Code, Node.js, Python).
• (Optional) Git installed for source control and deployment.

Step 1: Create a Sample Web Application

Let's start by creating a simple "Hello, World!" web application. The steps will vary slightly depending on your chosen language.

Example: Node.js with Express

If you're using Node.js, you can create a simple Express app. First, make sure you have Node.js and npm installed.

1. Create a new directory for your project:

   mkdir my-azure-webapp
   cd my-azure-webapp

2. Initialize a new Node.js project:

   npm init -y

3. Install the Express framework:

   npm install express

4. Create a file named app.js with the following content:

   const express = require('express');
   const app = express();
   const port = process.env.PORT || 3000;
   
   app.get('/', (req, res) => {
     res.send('Hello, World from Azure App Service!');
   });
   
   app.listen(port, () => {
     console.log(`App listening on port ${port}`);
   });

Example: Python with Flask

If you're using Python, you can create a simple Flask app.

1. Create a new directory and navigate into it.
2. Create a virtual environment (recommended):

   python -m venv venv
   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

3. Install Flask:

   pip install Flask

4. Create a file named app.py with the following content:

   from flask import Flask
   app = Flask(__name__)
   
   @app.route('/')
   def hello_world():
       return 'Hello, World from Azure App Service!'
   
   if __name__ == '__main__':
       app.run(debug=True, host='0.0.0.0', port=80)

Step 2: Deploy to Azure App Service

There are several ways to deploy your web app to Azure App Service. We'll cover two common methods: using the Azure CLI and using Git.

Method 1: Using Azure CLI

The Azure CLI is a powerful command-line tool for managing Azure resources.

1. Install the Azure CLI if you haven't already. You can find instructions on the official Azure CLI documentation.
2. Log in to your Azure account:

   az login

3. Create a new App Service plan. This defines the location, features, and scale of your web app's hosting environment.

   az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

   Replace myAppServicePlan and myResourceGroup with your desired names. B1 is a basic pricing tier. Use --is-linux for a Linux-based App Service.

4. Create your web app:

   az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name myuniquewebappname --runtime "node|18-lts"

   Replace myuniquewebappname with a globally unique name for your web app. For Node.js, use a runtime like node|18-lts. For Python, you might use python|3.9.

5. Deploy your code. If your code is in the current directory, you can deploy it directly:

   az webapp deployment source config-zip --resource-group myResourceGroup --name myuniquewebappname --src-path . --script-type zip

   If you are using Python, you might need to specify a different runtime and deployment method. For Flask, ensure your startup.txt or equivalent is configured correctly for the runtime.

Method 2: Using Git Deployment

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

1. Enable local Git deployment for your App Service:

   You can do this through the Azure portal by navigating to your App Service, then to Deployment Center > Local Git > Connect. This will provide you with a Git clone URL and credentials.

2. Initialize a Git repository in your project directory if you haven't already:

   git init
   git add .
   git commit -m "Initial commit"

3. Add the Azure remote repository. Replace the URL with the one provided by Azure:

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

4. Push your code to Azure:

   git push azure main

   You may be prompted for your Azure deployment credentials.

Step 3: Verify Your Web App

After deployment, your web app will be accessible via a URL like https://youruniquewebappname.azurewebsites.net.

Navigate to this URL in your web browser to see your "Hello, World!" message.

Next Steps

• Learn how to configure custom domains for your web app.
• Explore deployment slots for staging and production environments.
• Integrate with Azure databases or other services.
• Implement continuous integration and continuous deployment (CI/CD) pipelines using Azure DevOps or GitHub Actions.

For more advanced configurations and features, please refer to the full Azure App Service documentation.