Criar uma aplicação Web HTML estática no AzureCreate a static HTML web app in Azure

O Serviço de Aplicações do Azure oferece um serviço de alojamento na Web altamente dimensionável e com correção automática.Azure App Service provides a highly scalable, self-patching web hosting service. Este quickstart mostra como implementar um site básico HTML+CSS para o Serviço de Aplicações Azure.This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. Você completará este quickstart em Cloud Shell,mas também pode executar estes comandos localmente com Azure CLI.You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Página inicial da aplicação de exemplo

Se não tiver uma subscrição do Azure,crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Utilizar o Azure Cloud ShellUse Azure Cloud Shell

O Azure aloja o Azure Cloud Shell, um ambiente de shell interativo que pode utilizar através do seu browser.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Pode utilizar o Bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Pode utilizar os comandos pré-instalados do Cloud Shell para executar o código neste artigo sem ter de instalar nada no ambiente local.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Para iniciar o Azure Cloud Shell:To start Azure Cloud Shell:

OpçãoOption Exemplo/LigaçãoExample/Link
Selecione Experimentar no canto superior direito de um bloco de código.Select Try It in the upper-right corner of a code block. A seleção de Experimente não copia automaticamente o código para o Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemplo da opção Experimente para o Azure Cloud Shell
Aceda a https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir o Cloud Shell no browser.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell numa nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus, na parte direita do portal do Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botão Cloud Shell no portal do Azure

Para executar o código neste artigo no Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie o Cloud Shell.Start Cloud Shell.

  2. Selecione o botão Copiar num bloco de código para copiar o código.Select the Copy button on a code block to copy the code.

  3. Cole o código na sessão do Cloud Shell ao selecionar Ctrl+Shift+V no Windows e Linux ou Cmd+Shift+V no macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Selecione Introduzir para executar o código.Select Enter to run the code.

Transferir o exemploDownload the sample

No Cloud Shell, crie um diretório de início rápido e, em seguida, altere-o.In the Cloud Shell, create a quickstart directory and then change to it.

mkdir quickstart

cd $HOME/quickstart

Em seguida, execute o seguinte comando para clonar o repositório da aplicação de exemplo para o seu diretório de início rápido.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

Criar uma aplicação WebCreate a web app

Mude para o diretório que contém o código de exemplo e execute o comando az webapp up.Change to the directory that contains the sample code and run the az webapp up command. No comando a seguir, substitua <nome_aplicação> por um nome de aplicação exclusivo.In the following example, replace <app_name> with a unique app name. O conteúdo estático --html é indicado pela bandeira.Static content is indicated by the --html flag.

cd html-docs-hello-world

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

O comando az webapp up executa as seguintes ações:The az webapp up command does the following actions:

  • Cria um grupo de recursos predefinido.Create a default resource group.

  • Cria um plano do serviço de aplicações predefinido.Create a default app service plan.

  • Cria uma aplicação com o nome especificado.Create an app with the specified name.

  • Implementa os ficheiros zip do diretório atual de trabalho para a aplicação Web.Zip deploy files from the current working directory to the web app.

Este comando pode demorar alguns minutos a ser executado.This command may take a few minutes to run. Ao executar, apresenta informações semelhantes ao exemplo seguinte:While running, it displays information similar to the following example:

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

Anote o valor resourceGroup.Make a note of the resourceGroup value. Vai precisar dele na secção limpar recursos.You need it for the clean up resources section.

Navegar para a aplicaçãoBrowse to the app

Num browser, vá ao URL http://<app_name>.azurewebsites.netda aplicação: .In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

A página está a ser executada como uma aplicação Web do Serviço de Aplicações do Azure.The page is running as an Azure App Service web app.

Home page da aplicação de exemplo

Parabéns!Congratulations! Implementou a sua primeira aplicação HTML no Serviço de Aplicações.You've deployed your first HTML app to App Service.

Atualizar e reimplementar a aplicaçãoUpdate and redeploy the app

No Cloud Shell, escreva nano index.html para abrir o editor de texto nano.In the Cloud Shell, type nano index.html to open the nano text editor. No cabeçalho da etiqueta <h1>, altere o "Serviço de Aplicações do Azure – Site HTML Estático de Exemplo" para -"Serviço de Aplicações do Azure", conforme mostrado abaixo.In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

Guarde as alterações e feche o nano.Save your changes and exit nano. Utilize o comando ^O para guardar e ^X para sair.Use the command ^O to save and ^X to exit.

Agora irá implementar novamente a aplicação com o mesmo comando az webapp up.You'll now redeploy the app with the same az webapp up command.

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

Depois de concluída a implementação, volte para a janela do browser aberta que abriu no passo Navegar para a aplicação e atualize a página.Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Página inicial atualizada da aplicação de exemplo

Gerencie a sua nova app AzureManage your new Azure app

Para gerir a aplicação web que criou, no portal Azure,procure e selecione Serviços de Aplicações.To manage the web app you created, in the Azure portal, search for and select App Services.

Selecione Serviços de Aplicações no portal Azure

Na página de Serviços de Aplicações, selecione o nome da sua aplicação Azure.On the App Services page, select the name of your Azure app.

Navegação do portal para a aplicação do Azure

É apresentada a página de descrição geral da sua aplicação Web.You see your web app's Overview page. Aqui, pode realizar tarefas de gestão básicas, como navegar, parar, iniciar, reiniciar e eliminar.Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Painel Serviço de Aplicações no portal do Azure

O menu à esquerda fornece diferentes páginas para configurar a sua aplicação.The left menu provides different pages for configuring your app.

Limpar recursosClean up resources

Nos passos anteriores, criou os recursos do Azure num grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos.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. Lembre-se de que o nome do grupo de recursos foi gerado automaticamente para si no passo criar uma aplicação Web.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

Este comando pode demorar alguns minutos a ser executado.This command may take a minute to run.

Passos seguintesNext steps