Create a static HTML web app in Azure

Članak
03/24/2022
3 min. za čitanje

This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Prerequisites

Use the Bash environment in Azure Cloud Shell. For more information, see Azure Cloud Shell Quickstart - Bash.
If you prefer to run CLI reference commands locally, install the Azure CLI. If you're running on Windows or macOS, consider running Azure CLI in a Docker container. For more information, see How to run the Azure CLI in a Docker container.
- If you're using a local installation, sign in to the Azure CLI by using the az login command. To finish the authentication process, follow the steps displayed in your terminal. For other sign-in options, see Sign in with the Azure CLI.
- When you're prompted, install the Azure CLI extension on first use. For more information about extensions, see Use extensions with the Azure CLI.
- Run az version to find the version and dependent libraries that are installed. To upgrade to the latest version, run az upgrade.

1. Prepare your environment

If you don't have an Azure subscription, create an Azure free account before you begin.

In Cloud Shell, create a quickstart directory and then change to it.

mkdir quickstart

cd $HOME/quickstart

Next, run the following command to clone the sample app repository to your quickstart directory.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

2. Create a web app

Change to the directory that contains the sample code and run the az webapp up command. Replace <app-name> with a globally unique name.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

Troubleshooting

If the az command isn't recognized, be sure you have the Azure CLI installed as described in Prepare your environment.
Replace <app-name> with a name that's unique across all of Azure (valid characters are a-z, 0-9, and -). A good pattern is to use a combination of your company name and an app identifier.
The --sku F1 argument creates the web app on the Free pricing tier. Omit this argument to use a faster premium tier, which incurs an hourly cost.
The --html argument says to treat all folder content as static content and disable build automation.
You can optionally include the argument --location <location-name> where <location-name> is an available Azure region. You can retrieve a list of allowable regions for your Azure account by running the az account list-locations command.

The command may take a few minutes to complete.

What's az webapp up doing?

The az webapp up command does the following actions:

Create a default resource group.
Create a default App Service plan.
Create an App Service app with the specified name.
Zip deploy files from the current working directory to the app.
While running, it provides messages about resource creation, logging, and ZIP deployment.

When it finishes, it displays information similar to the following example:

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

You will need the resourceGroup value to clean up resources later.

3. Browse to the app

In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

The page is running as an Azure App Service web app.

Sample app home page

4. Update and redeploy the app

In the Cloud Shell, type nano index.html to open the nano text editor.

In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service".

Nano index.html

Save your changes by using command ^O.

Exit nano by using command ^X.

Redeploy the app with az webapp up command.

az webapp up --html

Switch back to the browser window that opened in the Browse to the app step.

Refresh the page.

Updated sample app home page

5. Manage your new Azure app

Navigate to the Azure portal.,

Search for and select App Services.

Select App Services in the Azure portal

Select the name of your Azure app.

Portal navigation to Azure app

You see your web app's Overview page. Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

App Service blade in Azure portal

The left menu provides different pages for configuring your app.

6. Clean up resources

In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell. Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_westeurope

This command may take a minute to run.

Next steps

Map custom domain