Deploy a Web App to Azure App Service

Deploy a live website to Azure App Service using the Azure CLI.

Introduction

30 Second Summary

Every website you visit lives on a server somewhere. Cloud platforms like Azure let you put your own site on the internet in minutes, without buying or managing any hardware.

In this project, you will deploy a website to Azure App Service using the Azure CLI. You'll create cloud resources, push your code live, and end up with a public URL that anyone on the internet can visit.

What You'll Build

You'll deploy an HTML website to Azure App Service and manage it entirely through command-line tools.

By the end of this project, you'll have:

  • A configured Azure free account with the Azure CLI installed and authenticated on your machine.
  • A Resource Group containing an App Service Plan and a deployed Web App.
  • A live website at a public URL that you deployed and updated using az commands.
  • Secret Mission: Configure application settings and enable log streaming to monitor your app in real-time.

Are there any prerequisites?

None. This project includes setup instructions for everything you need, including your Azure account and the Azure CLI. All you need is a Windows machine and a code editor.

Set Up Your Azure Account

Before you can deploy anything to the cloud, you need an Azure account. Azure gives new users $200 in free credits for 30 days, plus access to always-free services.

In this step, you'll create your free account, confirm it's active, and take a quick tour of the Azure Portal. The Portal is the visual dashboard where you can see everything running in your cloud environment.

In this step, get ready to:
  • Create your Azure free account with $200 in credits.
  • Verify your subscription is active in the Azure Portal.
  • Explore the Portal dashboard to get familiar with the interface.
Create your Azure free account

Azure's free account gives you real cloud resources to work with at no cost. You'll get $200 in credits for 30 days, plus 12 months of select free services and 65+ always-free services.

  • Open your browser and go to the Azure free account signup page.
  • Click Try Azure for free or Start free to begin the signup process.
  • Sign in with an existing Microsoft account or create a new one.
  • Enter your phone number for identity verification.
  • Enter a credit or debit card (non-prepaid) for identity verification.

Will my card be charged?

No. Azure requires a card for identity verification only. You will not be charged unless you manually upgrade to a paid plan after your 30-day trial ends.

You may see a temporary authorization hold (around $1) that disappears within a few days. This is standard verification behavior from your bank.

  • Complete the signup form and wait for confirmation that your account is ready.

Having trouble signing up?

If your card is declined, make sure it is not a prepaid card. Azure does not accept prepaid cards for verification.

If the verification code never arrives by text, try the phone call option instead.

help me troubleshoot my Azure free account signup

Verify your account is active

Now that your account exists, you need to confirm your subscription is active. A subscription is what Azure uses to track your usage and billing.

  • Go to the Azure Portal at https://portal.azure.com and sign in with the same account you used during signup.
  • You should see the Portal dashboard. This is your home base for managing Azure resources.
  • Click Subscriptions in the left navigation menu.
  • Confirm that your subscription is listed with a status of Active.

Can't find Subscriptions?

If you don't see Subscriptions in the left menu, type Subscriptions into the search bar at the top of the Portal page. Click on the result to open it.

Explore the Portal briefly

The Azure Portal is the graphical interface where you can see and manage your cloud resources. You'll use the Portal alongside the CLI throughout this project. The Portal shows you what's there. The CLI does the work.

  • Look at the search bar at the top of the page. This is how you find any Azure service quickly.
  • Look at the left navigation menu. This contains shortcuts to common services like Resource Groups, Virtual Machines, and App Services.
  • Find the Create a resource button near the top left. This is where you'd provision new cloud resources through the Portal.

Why learn both the Portal and the CLI?

Cloud engineers use the Portal to visually verify resources and check status at a glance. They use the CLI to create, configure, and automate resource management.

Azure job postings specifically list CLI proficiency as a requirement. Learning both gives you the complete toolkit.

Your Azure account is live and ready to go. Next up, you'll install the Azure CLI on your machine so you can control your cloud resources directly from the terminal.

Install and Configure the Azure CLI

Your Azure account is set up and your subscription is active. Now you need a way to manage Azure resources from your terminal.

The Azure CLI is a command-line tool that lets you create, configure, and manage Azure resources directly from PowerShell. Cloud engineers use it daily because it's faster than clicking through the Portal for repetitive tasks.

In this step, get ready to:
  • Install the Azure CLI using Windows Package Manager.
  • Verify the installation is working.
  • Sign in to your Azure account from the command line.
Install the Azure CLI

The Azure CLI needs to be installed on your Windows machine before you can run any az commands. You'll install it using winget, the Windows Package Manager that comes built into Windows 11 and modern versions of Windows 10.

  • Open PowerShell by pressing the Windows key to open your search bar.
  • Type PowerShell and press Enter to open it.
  • Install the Azure CLI by running this command:
winget install --exact --id Microsoft.AzureCLI

What does this command do?

This command uses winget (Windows Package Manager) to download and install the Azure CLI. The --exact flag ensures you get the exact package named Microsoft.AzureCLI rather than a partial match.

The current version is 2.86.0. The installation may take a minute or two to complete.

  • Wait for the installation to finish. You'll see a success message in the terminal.
  • Close your PowerShell window completely after installation completes.

Why close the terminal?

After installing the Azure CLI, your terminal needs to reload its PATH environment variable to recognize the new az command. Closing and reopening PowerShell forces this reload.

winget is not recognized?

If you see an error saying winget is not recognized, your Windows version may not have it pre-installed. Open the Microsoft Store, search for App Installer, and click Get to install it. Then close and reopen PowerShell and try the install command again.

help me troubleshoot why winget is not working on my Windows machine

Verify the installation
  • Open a new PowerShell window by pressing the Windows key, typing PowerShell, and pressing Enter.
  • Confirm the Azure CLI installed correctly by running this command:
az version

You should see JSON output showing the azure-cli version number.

✔️ I see a version number

Your Azure CLI is installed and ready. The JSON output confirms everything is working.

ⓧ az is not recognized

This means your terminal hasn't picked up the new installation yet.

  • Make sure you closed the old PowerShell window and opened a brand new one after the install finished.
  • If that doesn't work, try restarting your computer, then opening a fresh PowerShell window and running az version again.

help me troubleshoot why az is not recognized in my PowerShell after installing the Azure CLI

Sign in to Azure

Now that the CLI is installed, you need to connect it to your Azure account so it can manage your resources.

  • Sign in to your Azure account by running this command:
az login

What happens when you run this?

This command opens your default web browser to a Microsoft sign-in page. Sign in with the same credentials you used to create your Azure account. After signing in successfully, you can close the browser tab and return to PowerShell.

Back in your terminal, you'll see JSON output showing your subscription information. This confirms the CLI is now authenticated.

  • Sign in with your Azure account credentials in the browser window that opens.
  • Return to your PowerShell window after signing in.
  • Confirm you're connected to the right subscription by running this command:
az account show

You should see JSON output showing your subscription name and a state of Enabled. This confirms your CLI is authenticated and ready to manage your Azure resources.

Browser didn't open or sign-in failed?

If the browser didn't open automatically, look in your PowerShell output for a URL and a code. Open that URL manually in your browser and enter the code to complete sign-in.

If your subscription shows as the wrong one, you may have multiple subscriptions. Use the Azure Portal to find the correct subscription ID, then set it in your CLI.

help me troubleshoot why az login is not working or showing the wrong subscription

Your Azure CLI is installed and authenticated. Next up, you'll use it to create your first cloud resources.

Create Azure Resources with the CLI

Your Azure CLI is installed and authenticated. Now it's time to put it to work by creating your first cloud resources.

Before deploying a web app, you need somewhere to put it. In this step, you'll create a Resource Group and explore the regions available for deployment.

In this step, get ready to:
  • Create a Resource Group to organize your web app resources.
  • Verify the Resource Group exists in the Azure Portal.
  • Explore available Azure deployment regions.
Create a Resource Group

Every resource you create in Azure needs to live inside a Resource Group. Think of it as a folder that holds all the pieces of your project together. When you're done with the project, you can delete the group and everything inside goes with it.

  • Create your Resource Group by running this command:
az group create --name myFirstWebApp-rg --location eastus

What does this command do?

  • `az group create` tells the Azure CLI to create a new Resource Group.
  • `--name myFirstWebApp-rg` sets the name of your Resource Group.
  • `--location eastus` places it in the East US data center region.

You should see JSON output in your terminal. Look for "provisioningState": "Succeeded" in the response, confirming your Resource Group was created successfully.

Seeing an error?

  • If you see a message about not being logged in, run az login again and sign in with your Azure credentials.
  • If the command is not recognized, make sure you closed and reopened your terminal after installing the Azure CLI.
  • Help me fix my az group create error
Understand what you just created

The CLI confirmed your Resource Group exists. Now verify it visually in the Azure Portal to see how Azure organizes resources.

  • Go back to the Azure Portal at https://portal.azure.com.
  • Type Resource groups in the search bar at the top of the page.
  • Click Resource groups in the search results.
  • You should see myFirstWebApp-rg listed. Click on it.

The Resource Group is empty for now. This is where your web app and its supporting resources will live after the next step.

Why group resources together?

Resource Groups let you manage related resources as a single unit. You can apply permissions, monitor costs, and delete everything together when you're done. This is how teams organize their Azure projects in the real world.

List available regions

You deployed to eastus above, but Azure has data centers all around the world. Exploring available regions helps you pick the best location for performance and compliance in future projects.

  • View all available Azure regions by running this command:
az account list-locations --output table

What does --output table do?

By default, Azure CLI returns results in raw JSON. The --output table flag formats the output into human-readable columns. This is a useful trick for any az command when you want to quickly scan results.

Your Resource Group is set up and ready. Next up, you'll build a simple HTML site and deploy it to Azure as a live web app.

Build and Deploy Your Web App

Your Resource Group is ready and waiting in Azure. Now it's time to fill it with something real.

In this step, you'll create a simple HTML website on your machine, then deploy it to Azure App Service with a single CLI command. By the end, your site will be live on the internet at a public URL.

In this step, get ready to:
  • Create a local HTML website.
  • Deploy it to Azure App Service using the CLI.
  • Visit your live site at its public URL.
Create your HTML site locally

Every web app starts with source code on your machine. You'll create a project folder and an HTML file that becomes the site Azure serves to the world.

  • Move to your Desktop by running this command in PowerShell:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir my-azure-site
cd my-azure-site
  • Confirm the folder was created by running:
ls

The folder will be empty for now. That's expected.

Seeing a 'path not found' error?

Make sure your Desktop folder exists at the default location. If you've moved your Desktop to another drive or use OneDrive syncing, navigate to that location manually instead.

Help me find my Desktop folder in PowerShell

  • Now open your code editor. Press the Windows key to open your search bar.
  • Type the name of your code editor (e.g. VS Code) and press Enter to open it.
  • In your code editor, click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop and select the my-azure-site folder, then click Select Folder.
  • Create a new file called index.html by right-clicking in the file explorer panel and selecting New File.
  • Paste the following HTML code into your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Azure Web App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f0f2f5;
            color: #333;
        }
        h1 {
            color: #0078d4;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .badge {
            display: inline-block;
            background-color: #0078d4;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>Hello from Azure! ☁️</h1>
    <div class="card">
        <p><span class="badge">Live</span> This website is hosted on <strong>Azure App Service</strong>.</p>
        <p>I deployed this using the Azure CLI from my local machine. No servers to manage, no infrastructure to worry about.</p>
        <p>Skills demonstrated:</p>
        <ul>
            <li>Azure Resource Groups</li>
            <li>App Service Plans (F1 Free tier)</li>
            <li>Azure CLI deployment with <code>az webapp up</code></li>
            <li>Cloud resource management</li>
        </ul>
    </div>
</body>
</html>

What does this HTML do?

This is a single-page website with inline CSS styling. The page has a blue heading, a card component with a "Live" badge, and a list of skills you're demonstrating by deploying it.

The Azure blue color (#0078d4) is used for the heading and badge. Everything is self-contained in one file with no external dependencies.

  • Save index.html by pressing Ctrl+S.
  • Open the file directly in your browser by double-clicking index.html in File Explorer. You should see a grey page with a blue "Hello from Azure!" heading and a white card listing your skills.

Page looks blank or broken?

Make sure you saved the file with the .html extension, not .txt. Check that you copied the full code starting from <!DOCTYPE html> all the way to the closing </html> tag.

My HTML page isn't rendering correctly in the browser

✔️ Awesome, I've got everything!

Great. Make sure you've saved your file before moving on to deployment.

ⓧ I'd like to double check the full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Azure Web App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f0f2f5;
            color: #333;
        }
        h1 {
            color: #0078d4;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .badge {
            display: inline-block;
            background-color: #0078d4;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>Hello from Azure! ☁️</h1>
    <div class="card">
        <p><span class="badge">Live</span> This website is hosted on <strong>Azure App Service</strong>.</p>
        <p>I deployed this using the Azure CLI from my local machine. No servers to manage, no infrastructure to worry about.</p>
        <p>Skills demonstrated:</p>
        <ul>
            <li>Azure Resource Groups</li>
            <li>App Service Plans (F1 Free tier)</li>
            <li>Azure CLI deployment with <code>az webapp up</code></li>
            <li>Cloud resource management</li>
        </ul>
    </div>
</body>
</html>
Deploy to Azure App Service

Your HTML file is ready on your machine. Now you'll push it to Azure with a single command that creates the App Service Plan, the Web App, and deploys your code all at once.

  • Back in your PowerShell terminal, make sure you're inside the my-azure-site folder. You can confirm by running:
pwd

You should see a path ending in my-azure-site.

  • Deploy your site to Azure App Service by running this command:
az webapp up --name [[APP_NAME="your unique app name e.g. jessica-web-42"]] --resource-group myFirstWebApp-rg --sku F1 --os-type windows --html

What does this command do?

  • --name sets your app's unique name. This becomes part of your URL. Valid characters are a-z, 0-9, and hyphens.
  • --resource-group myFirstWebApp-rg places all new resources inside the Resource Group you created earlier.
  • --sku F1 selects the Free pricing tier. No cost, shared compute, 60 CPU minutes per day.
  • --os-type windows runs your app on a Windows host.
  • --html tells Azure this is a static HTML site, so it skips runtime detection.

Behind the scenes, this single command creates an App Service Plan, creates the Web App, and performs a ZIP deployment of your code.

Why a single command instead of separate steps?

The az webapp up command is Microsoft's recommended quickstart approach. It bundles resource creation and deployment together, reducing the number of commands you need to run.

You created the Resource Group separately in the previous step so you could see the hierarchy. Now az webapp up handles the rest.

The command takes about 1-2 minutes to complete. Wait until you see JSON output confirming the deployment.

  • Look for the URL field in the JSON output. It will look something like https://your-unique-app-name.azurewebsites.net. Copy this URL.

Seeing a 'name not available' error?

App names must be globally unique across all of Azure. If someone else already took your name, try adding more numbers or your initials. For example, jess-webapp-2026 or myfirstapp-abc-99.

Help me fix an error with az webapp up

Visit your live site

The deployment command gave you a public URL. That URL is your website, live on the internet, hosted on Azure's infrastructure.

  • Open a new browser tab.
  • Paste the URL from the command output into the address bar and press Enter.
  • You should see your HTML page live on the internet. The blue heading, the white card, the skills list. All served from Azure.

What is Platform-as-a-Service?

You just deployed a website without configuring a single server. Azure App Service is a Platform-as-a-Service (PaaS). Azure handles the operating system, networking, scaling, and patching. You just provide the code.

Page not loading or showing an error?

Give it 30-60 seconds after deployment. The F1 Free tier can be slow on first load because the app may need to cold-start.

If you see a default Azure placeholder page instead of your HTML, the deployment may not have uploaded your files correctly. Make sure your terminal was inside the my-azure-site folder (not a parent folder) when you ran the command.

My Azure web app isn't showing my HTML page

Your site is live. Next up, you'll learn how to manage and update your app through both the Portal and the CLI.

Manage and Update Your App

Your web app is live on the internet. Deploying once is great, but cloud engineers spend most of their time updating, monitoring, and managing apps after the initial launch.

In this step, you'll learn the update-redeploy cycle and how to check on your resources using both the Azure Portal and the CLI. This is the day-to-day workflow of anyone managing cloud infrastructure.

In this step, get ready to:
  • View your Azure resources in the Portal.
  • Update your site and redeploy with a single command.
  • Query your app's status using the CLI.
View your resources in the Portal

Every resource you create through the CLI also appears in the Azure Portal. This gives you a visual way to confirm what exists and explore how Azure organizes things.

  • Go back to the Azure Portal at https://portal.azure.com.
  • Type Resource groups in the search bar at the top of the page.
  • Select Resource groups from the results under Services.
  • Click on myFirstWebApp-rg in the list.
  • You should now see two resources listed inside: an App Service plan and an App Service (your web app).
  • Click on the App Service resource (your web app's name) to open its Overview page.

What does the Overview page show?

The Overview page shows your app's URL, its current status (Running or Stopped), the region it's deployed in, and the App Service plan it belongs to.

You'll also see management options like Browse, Stop, Restart, and Delete in the toolbar. The left menu provides pages for configuration, deployment, and monitoring.

Update and redeploy your site

One of the biggest advantages of Azure App Service is how quickly you can push updates. A single CLI command handles everything.

  • Open index.html in your code editor.
  • Make a visible change to the file. For example, change the heading text from Hello from Azure! ☁️ to something personal like Hello from [Your Name] on Azure! ☁️.
  • Save the file.
  • Redeploy your updated site by running this command in your terminal (make sure you're still in the my-azure-site folder):
az webapp up

Why no arguments this time?

The first time you ran az webapp up, it cached your app name, resource group, and App Service plan in a local .azure/config file. On subsequent runs, the CLI reads those cached values automatically.

This means you can iterate quickly. Edit your code, run az webapp up, and your changes are live in seconds.

  • Open your browser and visit your app's URL (https://your-unique-app-name.azurewebsites.net).
  • You should see your updated heading live on the internet.

Still seeing the old version?

Try a hard refresh in your browser by pressing Ctrl+Shift+R (Windows). Browsers often cache pages and show stale content.

If the deploy command itself failed, make sure your terminal is still inside the my-azure-site folder where the .azure/config file lives.

Help me troubleshoot why my redeployed Azure site still shows the old content.

Check your app status via the CLI

The Portal is great for browsing, but the CLI is faster when you know exactly what you want to check. You can query specific properties of your web app and display them in a clean table format.

  • Check your app's status by running this command:
az webapp show --name [[APPNAME="your-unique-app-name"]] --resource-group myFirstWebApp-rg --query "{name:name, state:state, hostName:defaultHostName}" --output table

What does this command do?

The az webapp show command retrieves details about your web app. The --query flag uses a JMESPath expression to extract just the name, state, and hostname. The --output table flag formats the result as a readable table instead of raw JSON.

This is how cloud engineers check on resources without opening the Portal. You can use this pattern with any az command to pull exactly the data you need.

  • You should see a table with three columns: Name (your app name), State (Running), and HostName (your app's URL without the https:// prefix).

Getting an error about the app not found?

Double-check that the --name value matches the exact app name you chose during deployment. App names are case-sensitive.

Also confirm the --resource-group matches myFirstWebApp-rg exactly. Typos in either value will cause a "resource not found" error.

Help me fix this az webapp show error.

Secret mission

Configure App Settings and Enable Log Streaming

You've deployed and managed a web app. Now go further by configuring environment variables and streaming live logs, two essential skills for any cloud engineer working with production applications.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. The F1 Free tier App Service costs nothing, so there are no ongoing charges while your resources exist.

What about your Azure free account credits?

Your $200 credit expires after 30 days. After that, you must upgrade to pay-as-you-go to keep free-tier services running. The F1 plan stays free even after upgrading. If you do not upgrade, your account and resources will be disabled.

Resources you used:

  • Resource Group (myFirstWebApp-rg) containing your App Service Plan and Web App.
  • App Service Plan (F1 Free tier, $0/month).
  • App Service (Web App) live at https://your-unique-app-name.azurewebsites.net.
  • Local project folder (my-azure-site) on your Desktop.
  • Azure CLI installed on your machine.

Keep everything running

No action needed. Choose this if you are still actively building or want your site to stay live.

  • Your web app stays live at its URL as long as you do not exceed the F1 tier quotas (60 CPU minutes/day, 1 GB storage).
  • The Azure CLI remains installed on your machine for future projects.
  • Your local my-azure-site folder remains on your Desktop.
  • Remember to upgrade your Azure account to pay-as-you-go before the 30-day credit expires if you want to keep your free-tier resources active.

Pause - I'll come back to this later

Stop your web app so it is no longer serving traffic, but keep the resources in place so you can restart later.

  • Stop your web app by running:
  • This stops the app from serving requests but keeps all configuration and deployed files intact.
az webapp stop --name [[APPNAME="your-unique-app-name"]] --resource-group myFirstWebApp-rg
  • When you are ready to resume, start it again by running:
az webapp start --name [[APPNAME="your-unique-app-name"]] --resource-group myFirstWebApp-rg

Delete - I don't want to use this again

Remove all project resources and start fresh. This permanently deletes your web app and all associated Azure resources.

  • Delete your Resource Group and everything inside it (App Service Plan and Web App) by running:
az group delete --name myFirstWebApp-rg --yes --no-wait
  • Delete your local project folder by running:
cd ~/Desktop
rmdir /s /q my-azure-site
  • Remove the Azure CLI cached configuration by running:
rmdir /s /q %USERPROFILE%\.azure
  • Uninstall the Azure CLI from your machine. Open Settings, then select Apps.
  • On Windows 11, select Installed apps. On Windows 10, select Apps & Features.
  • Search for Azure CLI in the search bar. The program is listed as Microsoft CLI 2.0 for Azure.
  • Select it and click Uninstall.

Nice Work!

Nice Work!

You just deployed your first web app to Azure App Service. You now have a live site on the internet that you created, deployed, and managed entirely through cloud tools.

You've learned how to:

  • Installed and authenticated the Azure CLI on Windows, then used az group create and az webapp up to provision cloud resources from your terminal.
  • Deployed a live website to Azure App Service on the F1 Free tier and redeployed updates with a single CLI command.
  • Queried resource status using az webapp show with custom JMESPath queries and table output to inspect your app without opening the Portal.
  • Secret Mission: Configured application settings as environment variables and streamed live logs with az webapp log tail to monitor your app in real-time.

Ready to quiz yourself?