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 contentor numa conta de uso geral V2 ou BlockBlobStorage. Para saber mais, consulte Hospedagem de site estático no Armazenamento do Azure.

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

Habilitar hospedagem estática de sites

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

Portais

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 Site estático para exibir a página de configuração do site estático.

   

4. Selecione Ativado para habilitar a hospedagem estática de sites para a conta de armazenamento.

5. No campo Nome do documento de índice , 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 de 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 para uma página que não existe em seu site estático.

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

   

8. É apresentada uma mensagem de confirmação. Os pontos de extremidade estáticos do site e outras informações de configuração são mostrados na secção Visão geral.

   

Azure CLI

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

1. Primeiro, abra o Azure Cloud Shell ou, se você tiver instalado 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 como assinatura da conta de armazenamento que hospedará seu site estático.

   az account set --subscription <subscription-id>
   

   Substitua o valor do espaço reservado <subscription-id> pelo ID da sua subscrição.

3. Habilite a hospedagem de um site estático.

   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 marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

   • Substitua o espaço reservado <error-document-name> pelo nome do documento de erro que aparecerá para os usuários quando um navegador solicitar uma página no seu site que não existe.

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

PowerShell

Você pode habilitar a hospedagem estática de sites 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 do Azure PowerShell versão 0.7 ou posterior.

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

   Se precisar de instalar ou atualizar, veja Install Azure PowerShell module(Instalar o módulo do Azure PowerShell).

3. Inicie sessão na sua subscrição do Azure com o comando Connect-AzAccount e siga as instruções no ecrã.

   Connect-AzAccount
   

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

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

   Substitua o valor do espaço reservado <subscription-id> pelo ID da sua subscrição.

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 marcador de posição <resource-group-name> pelo nome do seu grupo de recursos.

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

6. Habilite a hospedagem de um site estático.

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

   • Substitua o espaço reservado <error-document-name> pelo nome do documento de erro que aparecerá para os usuários quando um navegador solicitar uma página no seu site que não existe.

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

Carregar ficheiros

Portais

As instruções a seguir mostram como carregar arquivos usando o portal do Azure. Você também pode usar AzCopy, PowerShell, CLI ou qualquer aplicativo personalizado que possa carregar arquivos para o contêiner $web da 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 deseja carregar, selecione-o e selecione Abrir para preencher o campo Arquivos . Opcionalmente, marque a caixa de seleção Substituir se os ficheiros 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 o painel Visão geral . Verifique se o valor está definido dentro do campo de propriedade CONTENT-TYPE .

   

   Observação

   Essa propriedade é definida automaticamente como text/html para extensões comumente reconhecidas, como .html. No entanto, em alguns casos, você mesmo terá que definir isso. 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. Esta propriedade pode ser definida no passo anterior.

Azure CLI

Carregue objetos para o contêiner $web a partir 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á anexar --content-type 'text/html; charset=utf-8' ao comando.

• Substitua o 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 a localização dos ficheiros que pretende carregar.

Observação

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

Se estiver a utilizar o Azure Cloud Shell, terá de fazer referência a uma partilha de ficheiros 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 a partir do Cloud Shell. Para saber como fazer isto, consulte Persistir ficheiros no Azure Cloud Shell.

PowerShell

Carregue objetos para o contêiner $web a partir 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á anexar -Properties @{ ContentType = "text/html; charset=utf-8";} ao comando.

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

• Substitua o espaço reservado <blob-name> pelo nome que pretende atribuir ao blob resultante (Por exemplo: index.html).

Encontrar o URL do site

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

Portais

No painel que aparece ao lado da página de visão geral da conta da sua conta de armazenamento, selecione Site estático. O URL do seu site aparece no campo Ponto de extremidade principal.

Azure CLI

Encontre 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 marcador de posição <storage-account-name> pelo nome da sua conta de armazenamento.

• Substitua o valor do marcador de posição <resource-group-name> pelo nome do seu grupo de recursos.

PowerShell

Localize o URL público 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 marcador de posição <resource-group-name> pelo nome do seu grupo de recursos.

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

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

Depois de habilitar as métricas, as estatísticas de tráfego em arquivos no contêiner $web sã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 pela conexão em diferentes APIs de métricas. O portal exibe apenas os membros da API usados dentro de 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, o primeiro passo é expandir o período de tempo.

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

   

3. Selecione Blob no menu de opções Namespace.

   

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

   

5. Selecione Soma no seletor de 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 Valores para preencher o relatório de métricas.

   

   Observação

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

Próximos passos

• 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.