Deploy to Azure App Service with CLI

Install the Azure CLI and deploy a static website to App Service from VS Code.

Introduction

30 Second Summary

If you already manage AWS resources from the terminal, you know how powerful a CLI workflow can be. Azure has its own CLI, and learning it is the fastest way to add a second cloud platform to your engineering toolkit.

In this project, you will install the Azure CLI and deploy a static website to Azure App Service, all from VS Code's integrated terminal.

What You'll Build

Picture typing a single deploy command in your terminal, then opening a browser to see your own website live at a public Azure URL.

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

  • A live website at a public Azure URL you can open in any browser and share with anyone.
  • Azure CLI connected to your account and running from VS Code's terminal, letting you create, deploy, and tear down resources in seconds.
  • Full visibility into your Azure infrastructure from VS Code's Azure panel, so you can browse and manage resources without leaving your editor.
  • Secret Mission: Style up the site with CSS, redeploy, and stream live logs from your app using the CLI.

Are there any prerequisites?

You'll need an Azure account and VS Code installed before starting. Your AWS CLI experience will come in handy as we compare Azure and AWS patterns throughout the project.

Before We Start

Before any installations or commands, let's lock in what you're about to build and why it matters. This is your moment to connect the project goal to your multicloud engineering journey.

Install Azure CLI and VS Code Extensions

You already manage AWS resources from your terminal. To do the same with Azure, you need the Azure CLI installed locally.

In this step, you will install the Azure CLI, add two Azure extensions to VS Code, and verify everything is ready to go.

In this step, get ready to:
  • Install the Azure CLI on Windows.
  • Add the Azure Tools and Azure CLI Tools extensions to VS Code.
  • Verify the Azure icon appears in VS Code's Activity Bar.
Install the Azure CLI
  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Visual Studio Code and press Enter to open it.
  • Open VS Code's integrated terminal by pressing Ctrl+`.

WinGet is the built-in package manager for Windows 10 and later. It lets you install software from the command line, similar to Homebrew on macOS.

  • Install the Azure CLI by running this command:
winget install --exact --id Microsoft.AzureCLI

WinGet not recognized?

WinGet ships with Windows 10 version 1809 and later through the App Installer package. If the command is not recognized, open the Microsoft Store, search for App Installer, and install or update it.

Help me install WinGet on Windows so I can use it to install the Azure CLI.

  • Wait for the installation to finish. You will see progress messages in the terminal.
  • Close the current terminal by clicking the trash can icon in the terminal panel.
  • Open a new terminal by pressing Ctrl+`.

Why do I need to reopen the terminal?

The installer adds the az command to your system PATH. Your current terminal session loaded the old PATH when it opened, so it does not know about the new command. A fresh terminal picks up the updated PATH.

Before you run the next command, what output do you think will confirm the Azure CLI is installed?

  • Verify the installation by running this command:
az version

✔️ I see a JSON version output

You should see a JSON object listing version numbers for the Azure CLI and its components. The Azure CLI is installed and ready to use.

ⓧ Command not found

This usually means the terminal did not pick up the updated PATH.

  • Click the trash can icon in the terminal panel to close the current terminal.
  • Press Ctrl+` to open a fresh terminal.
  • Run az version again.

If it still does not work, close VS Code entirely, reopen it, and try az version in a new terminal.

Help me get the az version command working after installing Azure CLI on Windows.

Install Azure extensions in VS Code

VS Code extensions add extra capabilities to the editor. Two Azure extensions give you visual resource browsing and CLI command assistance without leaving the editor.

  • Open the Extensions view by pressing Cmd+Shift+X (macOS) or Ctrl+Shift+X (Windows).
  • Type Azure Tools in the search bar.
  • Find the result published by Microsoft and click Install.

What is the Azure Tools extension pack?

This is an extension pack that installs support for App Service, Functions, Storage, Container Apps, and more in a single click. Think of it as the Azure equivalent of the AWS Toolkit extension you may already use.

  • Clear the search bar and type Azure CLI Tools.
  • Find the result published by Microsoft and click Install.

What does Azure CLI Tools do?

This extension provides IntelliSense for Azure CLI commands. As you type az commands in the terminal, it suggests flags and arguments so you do not have to memorize them.

Check the Azure panel in VS Code
  • Look at the Activity Bar on the left side of VS Code. You should see a new Azure icon.
  • Click the Azure icon to open the Azure Resources panel.

The Azure Resources panel opens. It prompts you to sign in to Azure.

Skip the sign-in prompt for now. You will authenticate through the Azure CLI in the next step, and the VS Code panel uses a separate sign-in flow that you will set up afterward.

Don't see the Azure icon?

  • Go back to the Extensions view and confirm that the Azure Tools extension pack shows as installed (you should see a gear icon instead of an Install button).
  • Try closing and reopening VS Code. Some extensions need a restart to fully activate.

Why isn't the Azure icon showing up in my VS Code Activity Bar?

Your tools are in place. Next up, you will sign into Azure from the CLI and explore your account.

Connect to Azure and Explore Your Account

Your Azure CLI is installed and your VS Code extensions are ready. Now it's time to connect the CLI to your Azure account so you can start managing resources.

Before you can create anything in Azure, you need to authenticate and understand your subscription context. This is the same idea as running aws configure for AWS CLI.

In this step, get ready to:
  • Sign in to Azure using the CLI.
  • Confirm your active subscription details.
  • Connect VS Code's Azure panel to your account.
Sign in with the Azure CLI
  • Sign in to Azure by running this command in VS Code's integrated terminal. After you press Enter, a Web Account Manager dialog appears on your screen:
az login
  • Sign in with your Azure credentials in the dialog.

After you sign in, the terminal displays your subscription details in JSON format. This confirms your CLI is authenticated.

What just happened?

Your CLI session is now authenticated. Azure stores your credentials locally so you won't need to sign in again until the session expires.

Every az command you run from now on uses this identity and the active subscription shown in the output.

WAM dialog not appearing?

If the dialog does not show up or you see an error mentioning User cancelled the Accounts Control Operation, you can switch to browser-based login instead. Run these three commands in order:

az account clear
az config set core.enable_broker_on_windows=false
az login

This disables WAM and opens your default browser for sign-in. Help me troubleshoot Azure CLI login issues.

Check your active subscription

Azure organizes resources under subscriptions. Before creating anything, confirm which subscription your CLI is pointing at.

Before you run the next command, think about what information Azure might show you about your account. What details would you need to confirm your identity?

  • Check your active subscription by running this command:
az account show --output table

You should see a table showing your subscription name, ID, and state. This confirms which subscription the CLI will use for every command going forward.

How does this compare to AWS?

Running az account show is similar to running aws sts get-caller-identity in AWS. Both confirm your authenticated identity and the active context your CLI is using.

Working with multiple subscriptions

If you have more than one Azure subscription, run az account list --output table to see them all. To switch your active subscription, run:

az account set --subscription [[SUBSCRIPTION_ID="your-subscription-id"]]
Sign into Azure in VS Code

VS Code's Azure panel gives you a visual way to browse and manage resources alongside your terminal. Signing in here is separate from the CLI authentication you just completed.

  • Click the Azure icon in the Activity Bar on the left side of VS Code.
  • Click Sign in to Azure... in the Resources view.
  • A Microsoft sign-in prompt appears. Complete the sign-in using your Azure credentials.

After signing in, your subscription appears in the Resources view. Expand it to see any existing resources in your account.

Why sign in twice?

The CLI (az login) and VS Code's Azure panel use separate authentication sessions. The CLI handles terminal commands, while the panel uses VS Code's built-in Microsoft authentication to power the visual resource browser.

Don't see your subscription?

  • Make sure you completed the full sign-in process in the Microsoft authentication prompt.
  • Try clicking the refresh icon at the top of the Resources view to reload your subscriptions.

Help me see my Azure subscription in VS Code's Azure panel.

Your Azure CLI is authenticated and your VS Code panel is connected. Next up, you will create the Azure resources that will host your website.

Create Your Azure Resources

Your Azure CLI is authenticated and your subscription is confirmed. Now it's time to create the infrastructure that will host your website.

Azure requires a resource hierarchy before you can deploy anything. You need three pieces working together: a resource group to hold everything, an App Service plan to define compute, and a web app to serve your site.

In this step, get ready to:
  • Create a resource group to organize your Azure resources.
  • Create a free App Service plan to define your compute tier.
  • Create a web app and confirm it's live at a public URL.
Create a resource group

Every Azure resource lives inside a resource group. Think of it as a folder that holds related resources together so you can manage, monitor, and delete them as a unit.

  • Create a resource group named mysite-rg in the eastus region by running this command:
az group create --name mysite-rg --location eastus

What is a resource group?

A resource group is Azure's organizational container. It groups related resources so you can manage their permissions, billing, and lifecycle together.

In AWS, you might use tags or separate accounts to organize resources. Azure uses resource groups instead, and the biggest payoff is cleanup: deleting the group deletes everything inside it in one command.

The terminal displays JSON output confirming the resource group was created. You should see a provisioningState field showing the group is ready.

Seeing a permissions error?

Make sure you ran az login and signed in successfully in the previous step. Run az account show --output table to confirm your subscription is active.

Help me troubleshoot my az group create error

Create a free App Service plan

An App Service plan defines the compute resources your web app runs on. The FREE tier gives you shared compute at no cost, which is perfect for this project.

  • Create an App Service plan named mysite-plan using the free tier by running this command:
az appservice plan create --name mysite-plan --resource-group mysite-rg --sku FREE

What does the FREE SKU include?

The --sku FREE flag selects the F1 tier: shared compute with 60 CPU minutes per day, 1 GB RAM, and 1 GB storage at no cost. This is designed for learning and experimentation.

In AWS terms, this is closest to a free-tier t2.micro EC2 instance, but with Azure handling all the server management for you.

The terminal displays JSON output confirming the plan was created inside your mysite-rg resource group.

Seeing a resource group not found error?

Double check that the --resource-group value matches the name you used in the previous command. It should be mysite-rg exactly.

Help me fix my App Service plan creation error

Create the web app and confirm it's live

Your web app name must be globally unique across all of Azure because it becomes part of your public URL. A good pattern is your name plus the word site, like janedoe-site.

  • Create your web app by running this command, replacing the app name with your own unique name:
az webapp create --name [[APP_NAME="your-unique-app-name"]] --resource-group mysite-rg --plan mysite-plan

What does this command do?

This creates an App Service web app inside your resource group and attaches it to your free plan. Azure immediately provisions a public URL for it at https://your-app-name.azurewebsites.net.

In AWS, this is comparable to creating an Elastic Beanstalk environment or deploying to an EC2 instance behind a load balancer. Azure handles the hosting infrastructure for you.

The terminal displays JSON output confirming the web app was created. Look for the defaultHostName field in the output. That's your app's public URL.

Seeing an error about the app name?

If the name you chose is already taken, the CLI returns an error because the name must be globally unique. Try a more specific name by adding numbers or extra words, like janedoe-site-2026.

Help me fix my az webapp create error

Before you visit the URL, what do you think you'll see? Your own content, or something else?

  • Open your browser.
  • In the address bar, type https:// followed by the app name you chose, followed by .azurewebsites.net, and press Enter.

You'll see Azure's default placeholder page. The web app is running, but it has no content from you yet. That's exactly what the next step fixes.

Why a placeholder page?

Azure places a default hostingstart.html file in your web app's directory when it's first created. This proves the app is live and reachable. Your deployment in the next step will overwrite it with your own index.html.

Not seeing the placeholder page?

Make sure you typed the full URL correctly, including https:// at the start and .azurewebsites.net at the end. The app name in the URL must match the name you used in the az webapp create command exactly.

If you see a browser error, wait 30 seconds and refresh. New web apps can take a moment to become reachable.

Help me figure out why my Azure web app URL isn't loading

Your Azure resources are in place and your web app is live at a public URL. Next up, you'll build an HTML page and deploy it to replace that placeholder with your own website.

Build and Deploy Your Website

Your Azure resources are in place. You have a resource group, an App Service plan, and a web app, all created from the command line.

The web app is running, but it still shows Azure's default placeholder page. Time to replace it with your own content by creating an HTML file, packaging it, and deploying it.

In this step, get ready to:
  • Create an index.html file with your website content.
  • Package the file into a ZIP archive using PowerShell.
  • Deploy the ZIP to your web app using the Azure CLI.
Create your project folder and HTML file

You need a project folder to hold your website files. You'll create one on your Desktop so it's easy to find.

  • Move to your Desktop by running this command in VS Code's integrated terminal:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir azure-site
cd azure-site

Now open this folder as your VS Code workspace so the Explorer panel and terminal both point to the right place.

  • In VS Code, click File in the menu bar.
  • Click Open Folder.
  • Navigate to your Desktop and select the azure-site folder.
  • Click Select Folder.
  • If VS Code asks whether you trust the authors of this folder, click Yes, I trust the authors.

VS Code reloads with azure-site as your workspace. The Explorer panel on the left shows an empty folder, and the integrated terminal starts in this directory automatically.

  • In VS Code's Explorer panel on the left, hover over the AZURE-SITE heading to reveal the action icons.
  • Click the New File icon (a file with a plus sign).
  • Type index.html and press Enter.

VS Code opens the empty index.html file in the editor. This is the page your web app will serve to visitors.

  • Copy this 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 Site</title>
</head>
<body>
    <h1>Hello from Azure App Service!</h1>
    <p>This site was deployed using the Azure CLI from VS Code.</p>
    <p>Built by a multicloud engineer learning Azure.</p>
</body>
</html>

What does this code do?

  • The <head> section sets the page title and makes the page responsive on mobile devices.
  • The <h1> tag creates the large heading visitors see first.
  • The two <p> tags add descriptive text that identifies this as your Azure-deployed project.
  • Save index.html by pressing Ctrl+S (Windows) or Cmd+S (macOS).
  • Confirm the file exists by running:
ls

You should see index.html listed in the output.

Don't see index.html?

  • Make sure you saved the file. Look for a dot on the index.html tab in the editor. A dot means unsaved changes.
  • Run pwd in the terminal to check your current directory. You should be inside the azure-site folder on your Desktop.
  • Still stuck? Help me figure out why my index.html file isn't showing up in the terminal output.

✔️ Awesome, I've got everything!

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

ⓧ I'd like to double check the full code

Here is the complete index.html file. Compare it against yours line by line.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Azure Site</title>
</head>
<body>
    <h1>Hello from Azure App Service!</h1>
    <p>This site was deployed using the Azure CLI from VS Code.</p>
    <p>Built by a multicloud engineer learning Azure.</p>
</body>
</html>
Package your site into a ZIP

Azure App Service accepts ZIP packages for deployment. PowerShell has a built-in Compress-Archive cmdlet that creates the ZIP without any extra tools.

  • Create a ZIP package of your HTML file by running this command:
Compress-Archive -Path index.html -DestinationPath site.zip

What does this command do?

Compress-Archive takes the file specified by -Path and compresses it into the ZIP archive specified by -DestinationPath. This cmdlet is built into PowerShell 5.1+, which ships with Windows 10 and 11.

  • Confirm the ZIP was created by running:
ls

You should see both index.html and site.zip in the output.

Don't see site.zip?

  • Make sure you ran the command in PowerShell. VS Code's default terminal on Windows is PowerShell, but if you switched to a different shell, Compress-Archive will not be recognized.
  • Check that index.html exists in the current folder. Run ls first to confirm.
  • Still stuck? Help me troubleshoot why Compress-Archive is not creating my site.zip file.
Deploy the ZIP to your web app

The az webapp deploy command pushes your ZIP package to Azure's deployment engine and restarts the app. This is the moment your custom page replaces the default placeholder.

Before you run the next command, what do you think will happen to the default placeholder page at your web app's URL?

  • Deploy your site by running this command:
az webapp deploy --resource-group mysite-rg --name [[APPNAME="your-unique-app-name"]] --src-path site.zip

What does this command do?

This sends your site.zip to Azure's Kudu deployment engine, which extracts the contents and places them in your web app's root directory. Azure then restarts the app so the new content is served immediately.

If you've deployed static sites to AWS using S3, this is the Azure equivalent. Instead of uploading files to a bucket, you push a ZIP to App Service.

The terminal displays a JSON response confirming the deployment succeeded. Now it's time to see it live.

  • Open your web app's URL in your browser:
https://[[APPNAME="your-unique-app-name"]].azurewebsites.net

The default Azure placeholder is gone. You should see your heading "Hello from Azure App Service!" along with the two paragraphs of text you wrote.

Still seeing the default placeholder page?

  • Try a hard refresh. Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (macOS) to bypass any cached version of the page.
  • Deployment can take a few seconds. Wait about 10 seconds and refresh again.
  • Double-check the JSON output from the deploy command. If you see an error mentioning the resource not being found, make sure the --name value matches the app name you created in the previous step.
  • Still stuck? Help me figure out why my deployed site still shows the Azure placeholder instead of my custom HTML.

Your website is live on Azure. In the next step, you'll explore your Azure resources through VS Code's Azure panel and learn how to inspect them from the CLI.

Explore Your Resources in VS Code

Your custom HTML page is live on the internet. You deployed it entirely from VS Code's terminal using the Azure CLI.

The command line is powerful, but visual tools make managing cloud resources faster. In this step, you'll browse your resources in VS Code's Azure panel, inspect them with the CLI, and clean everything up with a single command.

In this step, get ready to:
  • Browse your Azure resources in the VS Code Azure panel.
  • Inspect your web app's status and URL using the CLI.
  • Clean up all resources with a single command.
Browse your resources in the Azure panel

The Azure panel in VS Code mirrors what you see in the Azure portal, without leaving your editor. This is similar to how the AWS Toolkit extension lets you browse AWS resources from VS Code.

  • Return to the Azure panel by clicking the Azure icon in the Activity Bar (left sidebar).
  • In the Resources view, click the arrow next to your subscription name to expand it.
  • Expand the mysite-rg resource group.

You should see your App Service plan (mysite-plan) and your web app listed inside the resource group.

  • Click on your web app name to view its properties in the panel.

What am I looking at?

This tree view shows the same resource hierarchy you built with CLI commands. The resource group acts as a folder that contains your App Service plan and web app.

Where the AWS Toolkit shows S3 buckets, Lambda functions, and EC2 instances, the Azure panel shows your resource groups, App Service plans, and web apps.

Don't see your resources?

Click the refresh button at the top of the Resources view. If you still don't see anything, make sure you signed into Azure in the panel back in Step 2.

If your subscription has multiple resource groups, scroll through the list to find mysite-rg.

Why can't I see my resources in the Azure panel?

Inspect your web app using the CLI

The Azure panel gives you a visual overview. The CLI gives you precise, filterable queries you can use in scripts and automation.

  • Check your web app's status and URL by running this command in VS Code's terminal:
az webapp show --name [[APP_NAME="your unique app name"]] --resource-group mysite-rg --query "{name:name, state:state, url:defaultHostName}" --output table

What does this command do?

  • az webapp show retrieves the full details of your web app from Azure.
  • --query filters the JSON output to only the three fields you care about: name, state, and URL.
  • --output table formats the result as a readable table instead of raw JSON.

You should see a table with three columns showing your app's name, its state as Running, and its azurewebsites.net URL.

How does this compare to AWS?

This is comparable to running aws elbv2 describe-target-groups or aws s3 ls in the AWS CLI to check resource status. Azure's --query flag lets you filter JSON output the same way the AWS CLI's --query flag does.

Seeing a resource not found error?

Make sure the app name in your command matches exactly what you chose in Step 3. The name is case-sensitive.

Double-check that the --resource-group value is mysite-rg.

Why is my az webapp show command returning an error?

Clean up all resources

Azure's resource group model makes cleanup simple. Because your App Service plan and web app both live inside mysite-rg, you can remove everything with a single command.

Before you run the next command, what do you think will happen to your App Service plan and web app when you delete the resource group?

  • Delete the entire resource group and everything inside it by running this command:
az group delete --name mysite-rg --yes --no-wait

What does this command do?

  • --yes skips the confirmation prompt so you don't have to type y.
  • --no-wait returns control to your terminal immediately while Azure handles the deletion in the background.
  • This single command removes the resource group, the App Service plan, and the web app all at once.
  • Return to the Azure panel in VS Code.
  • Click the refresh button at the top of the Resources view.

After a few moments, mysite-rg disappears from the panel. The resource group, App Service plan, and web app are all gone.

Why is this so useful?

In AWS, deleting a multi-resource setup often means removing each resource individually or tearing down a CloudFormation stack. In Azure, the resource group is the cleanup boundary.

One az group delete command tears down everything inside it. This is one of Azure's most useful patterns for keeping your account clean.

Still seeing mysite-rg in the panel?

The --no-wait flag means deletion happens in the background. Wait about 30 seconds, then click the refresh button in the Resources view again.

Why is my resource group still showing after I deleted it?

Secret mission

Style It Up and Stream Live Logs

Ready to go beyond a basic deployment? In this bonus mission, you will add CSS styling to your page, redeploy it, and stream real-time application logs from the CLI. This is the update-and-observe cycle that multicloud engineers use every day.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running or delete them entirely. This project uses Azure's free F1 tier, so there are no ongoing costs while your resources exist.

Resources you used:

  • Resource group mysite-rg containing your App Service plan mysite-plan and web app.
  • Local project files (index.html, style.css, site.zip).
  • Azure CLI installed via WinGet.
  • Azure Tools and Azure CLI Tools extensions in VS Code.

Keep everything running

No action needed. Choose this if you plan to keep building on your Azure site or want to revisit it later.

  • Your site stays live at its .azurewebsites.net URL at no cost on the F1 free tier.
  • The free plan has a 60 CPU minutes per day quota. Your static site will stay well within this limit.
  • If you are still streaming logs, press Ctrl+C in the terminal to stop the log tail.
  • Azure CLI and the VS Code extensions remain installed for future Azure projects.

Pause - I'll come back to this later

Stop any running processes to free up your terminal. Your Azure resources stay in place at no cost on the free tier.

  • Press Ctrl+C in VS Code's terminal to stop any active log streaming.
  • Close VS Code when you are done. Your Azure resources remain in place and the site stays accessible at its public URL.
  • When you return, reopen VS Code and run your Azure CLI commands from the integrated terminal.

Delete - I don't want to use this again

Remove all Azure resources and local project files to start fresh.

Delete your Azure resources
  • Delete the entire resource group by running this command in VS Code's terminal:
az group delete --name mysite-rg --yes

Why delete the resource group?

Deleting the resource group removes everything inside it: the App Service plan, the web app, and any associated configuration. If you only delete the web app, the App Service plan continues to exist.

Always delete the resource group for complete cleanup.

If you already deleted the resource group in Step 5, this command returns an error saying the group was not found. That is fine.

Delete your local project files
  • Close VS Code.
  • Open File Explorer (Windows) or Finder (macOS).
  • Navigate to where you created your project folder and delete it. This removes index.html, style.css, and site.zip.
Uninstall Azure CLI and extensions
  • To uninstall Azure CLI on Windows, open Settings.
  • Select Apps, then Apps & features.
  • Search for Azure CLI, select it, and click Uninstall.
  • To remove the VS Code extensions, open the Extensions view (Ctrl+Shift+X).
  • Find Azure Tools and click Uninstall. Do the same for Azure CLI Tools.

Nice Work!

Nice Work!

Nice work! You just deployed a live website to Azure App Service entirely from VS Code's integrated terminal using the Azure CLI.

You've learned how to:

  • Install and authenticate the Azure CLI, then create Azure's resource hierarchy (resource group, App Service plan, and web app) entirely via CLI commands.
  • Build a static HTML page and deploy it to a live public URL using ZIP deployment with az webapp deploy.
  • Configure VS Code with the Azure Tools extension pack to visually browse and manage Azure resources alongside the CLI.
  • Secret Mission: Added CSS styling, redeployed, and streamed live application logs from the CLI.

Ready to quiz yourself?