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

  • 15 minutos

O sandbox gratuito permite-lhe criar recursos num subconjunto das regiões globais do Azure. Selecione uma região na seguinte lista quando criar recursos:

  • E.U.A. Oeste 2
  • E.U.A. Centro-Sul
  • E.U.A. Central
  • E.U.A. Leste
  • Europa Ocidental
  • Sudeste Asiático
  • Leste do Japão
  • Sul do Brasil
  • Austrália Sudeste
  • Índia Central

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

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

  • Crie um grupo de recursos padrão se um não for especificado.
  • Cria um plano do serviço de aplicações predefinido.
  • Cria uma aplicação com o nome especificado.
  • Implementa os ficheiros zip do diretório atual de trabalho para a aplicação Web.

Importante

Para concluir este exercício, você precisa mudar o Cloud Shell para a versão Classic. Depois que o carregamento do Cloud Shell terminar, selecione Configurações no menu diretamente na parte superior do Cloud Shell e, em seguida, selecione Ir para a versão clássica.

Transferir a aplicação de exemplo

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

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

    mkdir htmlapp

cd htmlapp

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

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

  3. Defina as 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 a aplicação Web

  1. Mude 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 está em execução, ele exibe 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 um novo separador no seu browser e navegue até ao URL da aplicação (https://<myAppName>.azurewebsites.net) e verifique se a aplicação está a ser executada - tome nota do título na parte superior da página. Deixe o navegador aberto no aplicativo para a próxima seção.

    Nota

    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 e reimplementar a aplicação

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

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

  3. Reimplante o aplicativo com o mesmo az webapp up comando usado anteriormente.

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

    Gorjeta

    Pode utilizar a seta para cima no teclado para percorrer os comandos anteriores.

  4. Após a conclusão da implantação, volte para o navegador na etapa 2 na seção "Criar o aplicativo Web" e atualize a página.