Exercício: Criar um aplicativo Web HTML estático usando o Azure Cloud Shell

  • 15 minutos

A área restrita gratuita permite criar recursos em um subconjunto das regiões globais do Azure. Selecione uma região na seguinte lista ao criar recursos:

  • Oeste dos EUA 2
  • Centro-Sul dos Estados Unidos
  • Centro dos EUA
  • Leste dos EUA
  • Europa Ocidental
  • Sudeste Asiático
  • Leste do Japão
  • Brazil South
  • Australia Southeast
  • Índia Central

Neste exercício, você implantará um site HTML+CSS básico no Serviço de Aplicativo do Azure usando o comando az webapp up da CLI do Azure. Em seguida, você atualizará o código e o reimplantará usando o mesmo comando.

O comando az webapp up facilita a criação e atualização de aplicativos Web. Quando executado, ele realiza as seguintes ações:

  • Crie um grupo de recursos padrão se ele não estiver especificado.
  • Criar um plano de serviço de aplicativo padrão.
  • Criar um aplicativo com o nome especificado.
  • Arquivos de implantação zip do diretório de trabalho atual para o aplicativo Web.

Importante

Para concluir esse exercício, você precisa alternar o Cloud Shell para a versão Clássica. Depois que o Cloud Shell terminar de carregar, selecione Configurações no menu diretamente na parte superior do Cloud Shell e selecione Ir para a versão clássica.

Baixar o aplicativo de exemplo

Nesta seção, você usará a área restrita para baixar o aplicativo de exemplo e definir variáveis para facilitar a inserção de alguns dos comandos.

  1. Na área restrita, crie um diretório e navegue até ele.

    mkdir htmlapp

cd htmlapp

  2. Execute o git comando a seguir para clonar o repositório de aplicativos de exemplo para o seu diretório htmlapp.

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

  3. Defina variáveis para manter o grupo de recursos e os nomes dos aplicativos executando os comandos a seguir.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Criar o aplicativo Web

  1. Altere para o diretório que contém o código de exemplo e execute o comando az webapp up.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

    Esse comando pode levar alguns minutos para ser executado. Enquanto o comando estiver sendo executado, ele exibirá informações semelhantes ao exemplo a seguir.

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

  2. Abra uma nova guia do navegador, navegue até a URL do aplicativo (https://<myAppName>.azurewebsites.net) e verifique se o aplicativo está em execução: anote o título na parte superior da página. Deixe o navegador aberto no aplicativo para a próxima seção.

    Observação

    Você pode copiar <myAppName>.azurewebsites.net da saída do comando anterior ou selecionar a URL na saída para abrir o site em uma nova guia.

Atualizar o aplicativo e reimplantar

  1. No Cloud Shell, digite code index.html para abrir o editor. Na marca de título <h1>, altere o Serviço de Aplicativo do Azure - Site HTML Estáticopara o Serviço de Aplicativo do Azure Atualizado – ou para qualquer outra coisa que você gostaria.

  2. Use os comandos ctrl-s para salvar e ctrl-q para sair.

  3. Reimplante o aplicativo com o mesmo comando az webapp up que você já usou.

    az webapp up -g $resourceGroup -n $appName --html

    Dica

    Você pode usar a seta para cima no teclado para rolar pelos comandos anteriores.

  4. Depois que a implantação for concluída, volte para o navegador da etapa 2 na seção "Criar o aplicativo Web" e atualize a página.