Deploy Your First Web App to Azure

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 website on the internet without owning or managing physical hardware.

In this project, you will deploy a personal landing page to Azure App Service using the Azure CLI. You'll create real cloud resources, see your site live on the internet, and explore the monitoring and cost tools that the AZ-900 exam covers.

What You'll Build

A styled HTML landing page deployed to Azure App Service, accessible at a public .azurewebsites.net URL.

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

  • A live website running on Azure App Service that you deployed yourself.
  • Hands-on experience with Azure's resource hierarchy including resource groups, App Service plans, and web apps.
  • Familiarity with Azure Monitor metrics and Cost Management tools, reinforcing core AZ-900 exam concepts.
  • Secret Mission: Deploy a second version of your site using a deployment slot to practice zero-downtime releases.

Do I need any Azure experience?

No prior Azure experience is required. You do need an Azure free account already created before starting this project.

Install Your Tools

To deploy a website to Azure App Service, you need a way to write code and a way to talk to Azure from your terminal.

VS Code handles the code editing. The Azure CLI lets you create, manage, and deploy Azure resources directly from the command line.

In this step, get ready to:
  • Confirm your Azure CLI installation is working.
  • Verify your connection to your Azure subscription.
Verify your Azure CLI installation

The Azure CLI is already installed via Homebrew. Before you start creating resources, confirm it is working correctly.

  • Switch back to your Terminal and verify the Azure CLI installation by running this command:
az version

What does this command do?

The az version command displays the installed Azure CLI version along with its dependent libraries. It outputs JSON by default, showing you exactly which version is running on your machine.

You should see JSON output that includes a version number (such as 2.87.0 or similar). This confirms the CLI is installed and ready.

Not seeing a version number?

If you see a "command not found" error, Homebrew may not have linked the CLI correctly. Try running brew reinstall azure-cli and then open a new Terminal window before trying again.

Help me troubleshoot why az version is not working on my Mac.

Confirm your Azure account connection

You already signed in to Azure with az login and confirmed your subscription with az account show. Your subscription ID and name are the key details to note.

What is a subscription?

An Azure subscription is the billing container for all the resources you create. Every resource group, App Service plan, and web app you build in this project lives inside your subscription.

This maps directly to the AZ-900 concept of Azure's resource hierarchy: subscription > resource group > individual resources.

What is Azure CLI?

The Azure CLI is a cross-platform command-line tool for managing Azure resources. Instead of clicking through the Azure Portal, you type commands like az group create or az webapp deploy to create and configure services.

For the AZ-900 exam, the CLI is one of several management tools you should know about, alongside the Azure Portal, Azure PowerShell, and Azure Cloud Shell.

Your tools are confirmed and your Azure account is connected. Next up, you will create the Azure resources that will host your website.

Create Your Azure Resources

Your tools are installed and you're logged into Azure. Now it's time to create the cloud resources that will host your website.

Azure organizes everything into a hierarchy: your subscription contains resource groups, and resource groups contain individual resources like web apps and plans. In this step, you'll build that structure from the ground up using the Azure CLI.

In this step, get ready to:
  • Create a resource group to organize your Azure resources.
  • Create an App Service plan to define the compute resources for your app.
  • Create a web app and see it live on the internet.
Create a resource group

Every Azure resource needs a home. A resource group is a logical container that holds related resources together so you can manage them as a single unit.

  • Return to your Terminal and create a resource group by running this command:
az group create --name az900-project-rg --location eastus

What does this command do?

The --name flag sets the resource group name to az900-project-rg. You'll reference this name in every command that follows.

The --location eastus flag places your resources in the East US data center. This is one of Azure's regions, which are physical locations around the world where Azure operates.

  • You should see a JSON response in your terminal with "provisioningState": "Succeeded" confirming the resource group was created.

How does this map to the AZ-900 exam?

The AZ-900 exam tests your understanding of Azure's resource hierarchy: subscription > resource group > resources. You just created the middle layer. When you delete this resource group later, it will automatically remove everything inside it.

Seeing an authorization error?

Make sure you're logged in to the correct Azure account. Run az account show to verify your active subscription matches what you expect.

If you see a quota error for the East US region, try a different region by replacing eastus with eastus2 or centralus.

help me fix an Azure CLI authorization or quota error

Create an App Service plan

An App Service plan defines the compute resources your web app runs on. Think of it as choosing the size and power of the machine that hosts your site.

  • Create your App Service plan on the Free tier by running this command:
az appservice plan create --name az900-plan --resource-group az900-project-rg --sku F1

What does this command do?

The --sku F1 flag selects the Free tier. This gives you shared compute, 60 CPU minutes per day, and 1 GB of storage at no cost.

This is a PaaS (Platform as a Service) resource. Azure manages the operating system, patching, and networking. You only worry about your code.

  • You should see a JSON response with "provisioningState": "Succeeded" and "sku" showing "name": "F1" and "tier": "Free".

Getting a quota error?

Some Azure subscriptions have a regional quota limit of 0 for Free tier App Service plans. If you see a message mentioning quota, try changing the region. Delete the resource group and recreate it with a different location like eastus2.

help me resolve an Azure App Service quota error

Create the web app

The web app is the actual resource that hosts your website and gives it a public URL. The app name must be globally unique because it becomes part of your site's address on the internet.

  • Create your web app by running this command:
az webapp create --name [[AZURE_APP_NAME="yourname-az900-app"]] --resource-group az900-project-rg --plan az900-plan

Why does the app name need to be unique?

Your app name becomes the subdomain in the URL: yourname-az900-app.azurewebsites.net. Since this is a public internet address, no two Azure web apps can share the same name. Replace yourname with your actual name or initials to make it unique.

  • After the command succeeds, open your browser and visit your app's URL:
https://[[AZURE_APP_NAME="yourname-az900-app"]].azurewebsites.net
  • You should see Azure's default placeholder page. This confirms your web app is live on the internet and ready for your content.

Seeing a conflict or name-taken error?

If you get an error saying the name is already taken, choose a more unique app name. Try adding numbers or your full name, like janedoe-az900-app.

If the URL shows a 404 or blank page, wait a minute and refresh. New web apps can take a moment to become available.

help me fix my Azure web app creation error

Your cloud infrastructure is ready. You have a resource group, an App Service plan, and a live web app with a real URL. Next up, you'll build a custom website and deploy it to replace that placeholder page.

Build and Deploy Your Website

Your Azure infrastructure is ready. You have a resource group, an App Service plan, and a web app all configured and waiting for content.

Right now, your web app shows a default placeholder page. In this step, you'll build a custom HTML landing page and deploy it to your app using the Azure CLI.

In this step, get ready to:
  • Create a project folder with an HTML landing page.
  • Deploy the page to your Azure web app.
  • Verify your custom site is live on the internet.
Create your project folder and HTML file

You need a local folder to hold your website files before deploying them to Azure. You'll create this folder on your Desktop so it's easy to find.

  • Move to your Desktop and create your project folder by running these commands in your terminal:
cd ~/Desktop
mkdir az900-site
cd az900-site

What do these commands do?

  • `cd ~/Desktop` navigates your terminal to the Desktop folder.
  • `mkdir az900-site` creates a new folder called `az900-site`.
  • `cd az900-site` moves into that new folder so it becomes your working directory.
  • Confirm you're in the right place by running:
pwd

You should see a path ending in /Desktop/az900-site.

Seeing 'directory already exists'?

If you ran these commands before, the folder already exists. Skip the mkdir command and just run cd ~/Desktop/az900-site to move into it.

Help me fix a 'directory already exists' error in my terminal.

Now open this folder in VS Code so you can create your HTML file.

  • In VS Code, click File in the top menu bar.
  • Click Open Folder.
  • Navigate to Desktop, select the az900-site folder, and click Open.
  • In the Explorer sidebar on the left, hover over AZ900-SITE and click the New File icon (a page with a plus sign).
  • Type index.html and press Enter.

Your new file opens in the editor. This is the landing page that will appear on your live Azure URL.

  • Copy the following HTML into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Azure Skills</title>
    <style>
        /* Reset default browser spacing */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* Full-page gradient background */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        /* White card container */
        .container {
            background: white;
            border-radius: 16px;
            padding: 3rem;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        /* Page title in Azure blue */
        h1 {
            color: #0078d4;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        .subtitle {
            color: #666;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }
        /* Skills checklist styling */
        .skill-list {
            list-style: none;
            margin-bottom: 2rem;
        }
        .skill-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            color: #333;
            font-size: 1rem;
        }
        .skill-list li:last-child {
            border-bottom: none;
        }
        .skill-list li::before {
            content: "✓ ";
            color: #0078d4;
            font-weight: bold;
        }
        .footer {
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Azure Skills</h1>
        <p class="subtitle">Deployed to Azure App Service</p>
        <ul class="skill-list">
            <li>Created Azure resource groups</li>
            <li>Deployed a web app using Azure CLI</li>
            <li>Configured an App Service plan (F1 Free tier)</li>
            <li>Explored Azure Monitor metrics</li>
            <li>Analyzed costs with Cost Management</li>
        </ul>
        <p class="footer">Preparing for AZ-900 Azure Fundamentals</p>
    </div>
</body>
</html>

What does this HTML do?

  • The <style> block creates a purple gradient background and a centered white card layout using CSS Flexbox.
  • The .skill-list section displays your Azure skills as a styled checklist with blue checkmarks.
  • The #0078d4 color is Azure's official brand blue. You'll see it on the heading and checkmarks.
  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Confirm the file exists by switching to your terminal and running:
ls

You should see index.html in the output.

Not seeing index.html in the output?

Make sure your terminal is inside the az900-site folder. Run pwd to check your current location. It should end with /Desktop/az900-site.

Also confirm you saved the file in the correct folder in VS Code. The Explorer sidebar should show index.html under the az900-site folder name.

Help me figure out why my index.html file isn't showing up in my terminal.

✔️ Awesome, I've got everything!

Great. Make sure you've saved index.html before moving on to deployment.

ⓧ I'd like to double check the full code

Here's the complete index.html file for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Azure Skills</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .container {
            background: white;
            border-radius: 16px;
            padding: 3rem;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        h1 {
            color: #0078d4;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        .subtitle {
            color: #666;
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }
        .skill-list {
            list-style: none;
            margin-bottom: 2rem;
        }
        .skill-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            color: #333;
            font-size: 1rem;
        }
        .skill-list li:last-child {
            border-bottom: none;
        }
        .skill-list li::before {
            content: "✓ ";
            color: #0078d4;
            font-weight: bold;
        }
        .footer {
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Azure Skills</h1>
        <p class="subtitle">Deployed to Azure App Service</p>
        <ul class="skill-list">
            <li>Created Azure resource groups</li>
            <li>Deployed a web app using Azure CLI</li>
            <li>Configured an App Service plan (F1 Free tier)</li>
            <li>Explored Azure Monitor metrics</li>
            <li>Analyzed costs with Cost Management</li>
        </ul>
        <p class="footer">Preparing for AZ-900 Azure Fundamentals</p>
    </div>
</body>
</html>
Deploy your site using the Azure CLI

Your HTML file is ready locally. Now you'll push it to your App Service web app so it becomes live on the internet.

  • Deploy index.html to your web app by running this command:
az webapp deploy --resource-group az900-project-rg --name [[APPNAME="yourname-az900-app"]] --src-path index.html --type static

What does this command do?

  • `--resource-group az900-project-rg` tells Azure which resource group contains your web app.
  • `--name` specifies the web app you created in the previous step.
  • `--src-path index.html` points to the local file you want to upload.
  • `--type static` tells Azure to deploy this as a static file to the web server's root directory.

This is PaaS in action. You only provide the code. Azure handles the web server, operating system, and networking for you.

  • Wait for the command to finish. You should see output confirming the deployment completed successfully.

Seeing a 'resource not found' error?

Double check that the --name value matches the exact app name you created in the previous step. It's case-sensitive.

Also confirm your terminal is inside the az900-site folder where index.html lives. Run ls to verify you can see the file.

Help me fix a deployment error with az webapp deploy.

Verify the deployment

The deployment is complete. Time to see your custom page live on the internet.

  • Open your browser and navigate to your app's URL:
https://[[APPNAME="yourname-az900-app"]].azurewebsites.net

You should see your custom "My Azure Skills" landing page with a purple gradient background and a white card listing your skills.

What just happened?

You deployed a static HTML file to Azure App Service using a single CLI command. Azure placed your file on its managed web server and made it accessible at a public URL.

This is the core idea behind PaaS (Platform as a Service). You focus on your code. Azure manages the infrastructure, patches the OS, and handles incoming traffic.

Still seeing the default placeholder page?

Try a hard refresh in your browser. Press Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to bypass the cache.

If the page still doesn't update, wait 30 seconds and try again. Azure may take a moment to propagate your deployment.

Help me figure out why my deployed site still shows the default page.

Your website is live. Next up, you'll explore Azure Portal's monitoring and cost management tools to see how Azure tracks your app's performance and spending.

Explore Monitoring and Cost Management

You have a live website running on Azure. Now it is time to explore the tools Azure gives you to monitor performance and manage costs.

The AZ-900 exam tests your knowledge of Azure Monitor and cost management. In this step, you will use the Azure Portal to view real-time metrics for your web app and understand how Azure pricing tiers affect your bill.

In this step, get ready to:
  • Navigate the Azure Portal and explore your web app's Overview blade.
  • View monitoring metrics for CPU Time and HTTP requests.
  • Explore Cost Management and compare pricing tiers using the Azure Pricing Calculator.
Open Azure Portal and navigate to your web app
  • Open your browser and go to portal.azure.com.
  • Sign in with the same Microsoft account you used for az login earlier.
  • In the portal search bar at the top, type az900-project-rg and select it from the results.
  • Click on your web app (yourname-az900-app) inside the resource group.

You are now on the web app's Overview blade. Take a moment to note the key information displayed here.

  • Find the URL field showing your live site address.
  • Check the Status field. It should say Running.
  • Find the App Service plan field showing az900-plan.
  • Check the Location field confirming your app is in East US.

What is the Overview blade?

The Overview blade is your web app's dashboard in the Azure Portal. It shows the essential details about your resource at a glance: its URL, current status, the plan it runs on, and the Azure region where it lives.

On the AZ-900 exam, you will need to know that every Azure resource has an Overview blade as its landing page in the portal.

Don't see your resource group in search?

Make sure you are signed in with the same account you used for az login. If you have multiple Azure subscriptions, click the Directory + Subscription filter icon in the top toolbar to verify the correct subscription is selected.

Help me find my resource group in the Azure Portal.

Explore monitoring metrics

Azure automatically collects performance metrics for every App Service web app. On the Free tier, CPU Time is the most important metric because the F1 SKU limits you to 60 CPU minutes per day.

  • In the left sidebar of your web app, scroll down to the Monitoring section.
  • Click Metrics.
  • In the Metric dropdown, search for and select CPU Time.
  • A chart appears showing CPU time consumed by your app. It will be very low since no one has visited your site much yet.
  • Click Add metric to add a second line to the chart.
  • In the new Metric dropdown, search for and select Http 2xx.
  • Open a new browser tab and refresh your website URL a few times to generate some traffic.
  • Return to the Metrics chart and wait a minute or two. You should see the Http 2xx line tick upward, reflecting your successful page visits.

What do these metrics mean?

CPU Time measures the total seconds of CPU your app consumes. On the Free (F1) tier, Azure caps this at 60 minutes per day. If your app exceeds the quota, Azure stops it until the next day.

Http 2xx counts requests that returned a successful HTTP status code (200-299). Every time someone loads your page successfully, this counter goes up.

Now check your App Service plan quotas to see how much of your daily limits you have used.

  • In the left sidebar, click App Service plan (under the Overview section) to navigate to your plan.
  • In the plan's left sidebar, scroll down and click Quotas.
  • Review the quota charts. You should see metrics like CPU Time and Data Out with bars showing your usage as a fraction of the daily limit.

Why do Free tier apps have quotas?

The F1 Free tier uses shared compute infrastructure. Azure enforces quotas (60 CPU minutes/day, 1 GB storage) to keep free apps from monopolizing shared resources. This is a key AZ-900 concept: pricing tiers trade cost for capacity.

Metrics chart showing nothing?

Metrics can take 1-2 minutes to appear after generating traffic. Make sure the time range in the top-right of the chart is set to Last hour so recent data is visible. If it still shows nothing, try refreshing the Metrics page.

Help me see metrics for my Azure web app.

Explore Cost Management and the Pricing Calculator

Understanding Azure costs is a major part of the AZ-900 exam. You will now look at how Azure tracks spending for your resource group and compare what your app would cost on paid tiers.

  • In the portal search bar at the top, type Cost Management and select Cost Management from the results.
  • In the left sidebar, click Cost analysis.
  • At the top of the cost analysis view, set the Scope to your subscription, then add a filter for Resource group and select az900-project-rg.
  • The chart shows $0 in costs. This confirms the F1 Free tier generates no charges.

What is Cost Management?

Cost Management is Azure's built-in tool for tracking and analyzing spending. It lets you filter by resource group, subscription, or individual resource to see exactly where your money goes.

For the AZ-900 exam, remember that Azure uses a consumption-based pricing model. You only pay for what you use. The Free tier is the exception: it costs nothing but comes with strict resource limits.

Now compare what your setup would cost on paid tiers using the Azure Pricing Calculator.

  • Open a new tab and go to the Azure Pricing Calculator.
  • In the search box, type App Service and click the App Service tile to add it to your estimate.
  • Scroll down to the App Service configuration section.
  • Set the Region to East US.
  • Change the Tier to Basic and select the B1 instance. Note the estimated monthly cost.
  • Now change the Tier to Standard and select the S1 instance. Compare this price to B1.

Why does the Standard tier cost more?

The Standard (S1) tier includes features the Basic tier does not: deployment slots, custom domains with SSL, auto-scaling, and daily backups. You pay more for these operational capabilities.

The AZ-900 exam expects you to understand that Azure pricing tiers follow a trade-off: higher tiers cost more but provide more compute power and advanced features. The Free tier gives you zero cost but shared compute and strict quotas.

Can't find Cost Management?

Cost Management requires the right permissions on your subscription. If your Azure free account was just created, it may take a few minutes for Cost Management data to populate. The cost analysis page may display a message saying data is being prepared.

Help me access Cost Management in the Azure Portal.

You have explored the core Azure management tools that the AZ-900 exam covers: the portal, monitoring, and cost management. Next up, you will clean up your resources and review the key concepts from this project.

Secret mission

Add a Deployment Slot

Your website is live, but what happens when you need to update it? In production, you can't just push changes and hope for the best. Deploy a second version of your site using a deployment slot to see how Azure handles staging vs. production environments.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running or delete them entirely. The Free tier (F1) App Service plan costs $0, so there are no ongoing charges if you leave your resources in place.

Cost warning

If you completed the Secret Mission and did not scale your App Service plan back down to F1, the Standard (S1) tier costs approximately $0.075/hour. Run the delete command below or scale down immediately to avoid unexpected charges.

Resources you used:

  • Azure resource group az900-project-rg (contains your App Service plan, web app, and deployment slot).
  • Local project folder az900-site on your Desktop.
  • Azure CLI (installed via Homebrew).

Keep everything running

No action needed. Choose this if you want to keep your deployed website live and accessible. The F1 Free tier costs $0, so your web app can stay running indefinitely at no charge.

  • Your website remains live at yourname-az900-app.azurewebsites.net.
  • Azure CLI stays installed on your Mac for future projects.
  • Your local az900-site folder stays on your Desktop.

Pause - I'll come back to this later

The F1 Free tier does not incur any charges, so there is nothing to pause. Your resources can stay running at $0 cost until you are ready to return.

If you completed the Secret Mission and your plan is still on Standard (S1) tier, scale it back down to Free by running:

az appservice plan update --name az900-plan --resource-group az900-project-rg --sku F1

This brings your ongoing cost back to $0.

Delete - I don't want to use this again

Remove all project resources completely. This cannot be undone.

Delete your Azure resources
  • Delete the resource group and everything inside it (web app, App Service plan, deployment slot) by running:
az group delete --name az900-project-rg --yes
  • Confirm the resource group is gone by running:
az group list --output table

You should see that az900-project-rg no longer appears in the list. It may take a few minutes to fully delete.

Delete your local project folder
  • Remove the local project folder by running:
rm -rf ~/Desktop/az900-site
Uninstall Azure CLI (optional)

If you do not plan to use Azure CLI for future projects, you can remove it.

  • Uninstall Azure CLI by running:
brew uninstall azure-cli
  • Remove leftover configuration data by running:
rm -rf ~/.azure

Nice Work!

Nice Work!

You just deployed a live website to Azure App Service and explored the core Azure services tested on the AZ-900 exam.

You've learned how to:

  • Deployed a live website to Azure App Service using the Azure CLI, experiencing PaaS firsthand where Azure handled the server, OS, and networking while you focused on your code.
  • Created and managed Azure resources (resource group, App Service plan, web app) following Azure's resource hierarchy.
  • Explored Azure Monitor metrics and Cost Management tools to understand how Azure tracks performance and pricing.
  • Secret Mission: Used deployment slots to practice zero-downtime deployments, a real-world DevOps pattern.

Ready to quiz yourself?