Hospedar um site estático no Armazenamento do Azure

Você pode fornecer conteúdo estático (HTML, CSS, JavaScript e arquivos de imagem) diretamente de um contêiner em uma conta V2 ou BlockBlobStorage de uso geral. Para saber mais, confira a hospedagem de site estático no Armazenamento do Azure.

Este artigo mostra como habilitar a hospedagem de sites estáticos usando o portal do Azure, a CLI do Azure ou o PowerShell.

Habilitar hospedagem de site estático

A hospedagem de sites estáticos é um recurso que você precisa habilitar na conta de armazenamento.

Portal

1. Entre no portal do Azure para começar.

2. Localize sua conta de armazenamento e selecione-a para exibir o painel Visão Geral da conta.

3. No painel Visão geral , selecione a guia Recursos . Em seguida, selecione o site estático para exibir a página de configuração do site estático.

   

4. Selecione Habilitado para habilitar a hospedagem de site estático para a conta de armazenamento.

5. No campo Nome do documento Index, especifique uma página de índice padrão (por exemplo: index.html).

   A página de índice padrão é exibida quando um usuário navega até a raiz do seu site estático.

6. No campo Caminho do documento erro, especifique uma página de erro padrão (por exemplo: 404.html).

   A página de erro padrão é exibida quando um usuário tenta navegar até uma página que não existe em seu site estático.

7. Clique em Salvar para concluir a configuração de site estático.

   

8. Uma mensagem de confirmação é exibida. Os endereços de acesso do site estático e outras informações de configuração encontram-se no painel Visão Geral.

   

Azure CLI

Você pode habilitar a hospedagem de sites estáticos usando a CLI do Azure.

1. Primeiro, abra o Azure Cloud Shellou, se você instalou a CLI do Azure localmente, abra um aplicativo de console de comando, como o Windows PowerShell.

2. Se sua identidade estiver associada a mais de uma assinatura, defina sua assinatura ativa para a assinatura da conta de armazenamento que hospedará seu site estático.

   az account set --subscription <subscription-id>
   

   Substitua o valor de espaço reservado <subscription-id> pela ID da sua assinatura.

3. Habilitar hospedagem de sites estáticos.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • Substitua o valor do marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

   • Substitua o <error-document-name> marcador de posição pelo nome do documento de erro que será exibido aos usuários quando um navegador solicitar uma página em seu site que não exista.

   • Substitua o marcador de posição <index-document-name> pelo nome do documento de índice. Este documento geralmente é "index.html".

PowerShell

Você pode habilitar a hospedagem de site estático usando o módulo do Azure PowerShell.

1. Abra uma janela de comando do Windows PowerShell.

2. Verifique se você tem o módulo Az versão 0.7 ou posterior do Azure PowerShell.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Se você precisar instalar ou atualizar, consulte Instalar o módulo do Azure PowerShell.

3. Entre na sua assinatura do Azure com o comando Connect-AzAccount e siga as instruções na tela.

   Connect-AzAccount
   

4. Se sua identidade estiver associada a mais de uma assinatura, defina sua assinatura ativa para a assinatura da conta de armazenamento que hospedará seu site estático.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   Substitua o valor de espaço reservado <subscription-id> pela ID da sua assinatura.

5. Obtenha o contexto da conta de armazenamento que define a conta de armazenamento que você deseja usar.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • Substitua o valor do espaço reservado <resource-group-name> pelo nome do grupo de recursos.

   • Substitua o valor do marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

6. Habilitar hospedagem de sites estáticos.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Substitua o <error-document-name> marcador de posição pelo nome do documento de erro que será exibido aos usuários quando um navegador solicitar uma página em seu site que não exista.

   • Substitua o marcador de posição <index-document-name> pelo nome do documento de índice. Este documento geralmente é "index.html".

Carregar arquivos

Portal

As instruções a seguir mostram como carregar arquivos usando o portal do Azure. Você também pode usar o AzCopy, o PowerShell, a CLI ou qualquer aplicativo personalizado que possa carregar arquivos no contêiner $web de sua conta. Para obter um tutorial passo a passo que carrega arquivos usando o código do Visual Studio, consulte Tutorial: Hospedar um site estático no Armazenamento de Blobs.

1. No portal do Azure, navegue até a conta de armazenamento que contém seu site estático. Selecione Contêineres no painel de navegação esquerdo para exibir a lista de contêineres.

2. No painel Contêineres , selecione o contêiner $web para abrir o painel Visão Geral do contêiner.

   

3. No painel Visão geral, selecione o ícone Carregar para abrir o painel Carregar blob. Em seguida, selecione o campo Arquivos no painel Carregar blob para abrir o navegador de arquivos. Navegue até o arquivo que você deseja carregar, selecione-o e, em seguida, selecione Abrir para preencher o campo Arquivos . Opcionalmente, marque a caixa de seleção Substituir se os arquivos já existirem.

   

4. Se você pretende que o navegador exiba o conteúdo do arquivo, verifique se o tipo de conteúdo desse arquivo está definido como text/html. Para verificar isso, selecione o nome do blob que você carregou na etapa anterior para abrir seu painel visão geral . Verifique se o valor está definido dentro do campo de propriedade CONTENT-TYPE .

   

   Observação

   Essa propriedade é automaticamente definida para extensões comumente reconhecidas, como text/html e .html. No entanto, em alguns casos, você terá que definir isso por conta própria. Se você não definir essa propriedade como text/html, o navegador solicitará que os usuários baixem o arquivo em vez de renderizar o conteúdo. Essa propriedade pode ser definida na etapa anterior.

Azure CLI

Carregue objetos no contêiner $web de um diretório de origem.

Este exemplo pressupõe que você esteja executando comandos da sessão do Azure Cloud Shell.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Observação

Se o navegador solicitar que os usuários baixem o arquivo em vez de renderizar o conteúdo, você poderá acrescentar --content-type 'text/html; charset=utf-8' ao comando.

• Substitua o valor do marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

• Substitua o marcador de posição <source-path> por um caminho para o local dos arquivos que você deseja enviar.

Observação

Se você estiver usando uma instalação de localização da CLI do Azure, poderá usar o caminho para qualquer local no computador local (por exemplo: C:\myFolder.

Se você estiver usando o Azure Cloud Shell, precisará referenciar um compartilhamento de arquivos visível para o Cloud Shell. Esse local pode ser o compartilhamento de arquivos do próprio compartilhamento de nuvem ou um compartilhamento de arquivos existente que você monta no Cloud Shell. Para saber como fazer isso, consulte arquivos Persist no Azure Cloud Shell.

PowerShell

Carregue objetos no contêiner $web de um diretório de origem.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Observação

Se o navegador solicitar que os usuários baixem o arquivo em vez de renderizar o conteúdo, você poderá acrescentar -Properties @{ ContentType = "text/html; charset=utf-8";} ao comando.

• Substitua o valor do espaço reservado <path-to-file> pelo caminho totalmente qualificado para o arquivo que você deseja carregar (por exemplo: C:\temp\index.html).

• Substitua o valor do espaço reservado <blob-name> pelo nome que você deseja atribuir ao blob resultante (por exemplo: index.html).

Localizar a URL do site

Você pode exibir as páginas do seu site de um navegador usando a URL pública do site.

Portal

No painel que aparece ao lado da página de visão geral da conta de sua conta de armazenamento, selecione Site Estático. A URL do seu site é exibida no campo de Ponto de Extremidade Primária.

Azure CLI

Localize a URL pública do seu site estático usando o seguinte comando:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• Substitua o valor do marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

• Substitua o valor do espaço reservado <resource-group-name> pelo nome do grupo de recursos.

PowerShell

Localize a URL pública do seu site estático usando o seguinte comando:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• Substitua o valor do espaço reservado <resource-group-name> pelo nome do grupo de recursos.

• Substitua o valor do marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

Habilitar métricas em páginas de sites estáticos

Depois que você tiver habilitado as métricas, as estatísticas de tráfego nos arquivos no contêiner $web serão relatadas no painel de métricas.

1. Clique em Métricas na seção Monitor do menu da conta de armazenamento.

   

   Observação

   Os dados de métricas são gerados conectando-se a APIs de métricas diferentes. O portal exibe apenas os membros da API usados em um determinado período de tempo para se concentrar apenas nos membros que retornam dados. Para garantir que você possa selecionar o membro da API necessário, a primeira etapa é expandir o período de tempo.

2. Clique no botão de quadro de tempo, escolha um período e clique em Aplicar.

   

3. Selecione o Blob da lista suspensa Namespace.

   

4. Em seguida, selecione a métrica de Saída .

   

5. Selecione Somar do seletor Agregação.

   

6. Clique no botão Adicionar filtro e escolha o nome da API no seletor de propriedade .

   

7. Marque a caixa ao lado de GetWebContent no seletor de Valores para preencher o relatório de métricas.

   

   Observação

   A caixa de seleção GetWebContent será exibida somente se esse membro da API tiver sido usado em um determinado período de tempo. O portal exibe apenas os membros da API usados em um determinado período de tempo para se concentrar apenas nos membros que retornam dados. Se você não conseguir encontrar um membro específico da API nesta lista, expanda o período de tempo.

Próximas etapas

• Saiba como configurar um domínio personalizado com seu site estático. Consulte Mapear um domínio personalizado para um ponto de extremidade do Armazenamento de Blobs do Azure.