Hospedar site estático no Armazenamento do Microsoft Azure

Artigo
05/11/2023

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

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

Habilitar hospedagem de sites estáticos

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

Entre no portal do Azure para começar.
Localize a conta de armazenamento e selecione-a para exibir o painel visão geral da conta.
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.
Selecione Ativado para habilitar a hospedagem de site estático para a conta de armazenamento.
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 para a raiz do site estático.
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 o usuário tenta navegar até uma página que não existe no site estático.
Clique em Salvar para concluir a configuração do site estático.
Uma mensagem de confirmação é exibida. Os pontos de extremidade do site estático e outras informações de configuração são mostrados no painel Visão geral.

Você pode habilitar a hospedagem de site estático usando a CLI do Azure.

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.
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.
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 de espaço reservado <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 será exibido aos usuários quando um navegador solicitar uma página no site que não existe.
- Substitua o espaço reservado <index-document-name> pelo nome do documento de indexação. Este documento é normalmente "index. html".

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

Abra uma janela de comando do Windows PowerShell.
Estes exemplos exigem a versão Az 0.7 ou posterior do módulo do Azure PowerShell.
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
Se você precisar instalá-lo ou atualizá-lo, confira Instalar o módulo do Azure PowerShell.
Entre na sua assinatura do Azure com o comando Connect-AzAccount e siga as instruções na tela.
```
Connect-AzAccount
```
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.
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 de espaço reservado <storage-account-name> pelo nome da sua conta de armazenamento.
Habilitar hospedagem de sites estáticos.
```
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 será exibido aos usuários quando um navegador solicitar uma página no site que não existe.
- Substitua o espaço reservado <index-document-name> pelo nome do documento de indexação. Este documento é normalmente "index. html".

Carregar arquivos

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 os arquivos para o contêiner $web da sua conta. Para obter um tutorial passo a passo que carrega arquivos usando o Visual Studio Code, consulte Tutorial: Hospedar um site estático no Armazenamento de Blobs.

No portal do Azure, navegue até a conta de armazenamento que contém o site estático. Selecione Contêineres no painel de navegação esquerdo para exibir a lista de contêineres.
No painel Contêineres, selecione o contêiner $web para abrir o painel visão geral do contêiner.
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ê quer 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.
Se você pretende que o navegador exiba o conteúdo do arquivo, certifique-se de que o tipo de conteúdo desse arquivo esteja 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á configurado no 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ê 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.

Carregar objetos para o 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 navegar solicitar que os usuários baixem o arquivo em vez de renderizar o conteúdo, você pode anexar --content-type 'text/html; charset=utf-8' ao comando.

Substitua o valor de espaço reservado <storage-account-name> pelo nome da sua conta de armazenamento.
Substitua o espaço reservado <source-path> por um caminho para o local dos arquivos que você deseja carregar.

Observação

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

Se estiver usando Azure Cloud Shell, você precisará fazer referência a um compartilhamento de arquivos que é visível para o Cloud Shell. Esse local pode ser o compartilhamento de arquivos do compartilhamento de nuvem em si ou um compartilhamento de arquivos existente que você monta na Cloud Shell. Para obter mais informações, consulte Persistir arquivos no Azure Cloud Shell.

Carregar objetos para o 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 navegar solicitar que os usuários baixem o arquivo em vez de renderizar o conteúdo, você pode anexar -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 dar ao blob resultante (por exemplo: index.html).

Localizar a URL do site

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

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

Métrica de métricas de sites estáticos de Armazenamento do Microsoft Azure

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 de espaço reservado <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.

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

Você pode 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.

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

Observação

Dados de métricas são gerados pendurando em diferentes APIs de métrica. O portal exibe apenas membros da API usados em um determinado período de tempo para se concentrar apenas em membros que retornam dados. Para garantir que você possa selecionar o membro de API necessário, a primeira etapa é expandir o intervalo de tempo.
Clique no botão de período, selecione o período e clique em Aplicar.
Selecione o Blob da lista suspensa Namespace.
Em seguida, selecione a métrica Egresso.
Selecione Somar do seletor Agregação.
Clique no botão Adicionar filtro e escolha Nome da API do seletor Propriedade.
Marque a caixa de seleção ao lado de GetWebContent no seletor Valores para preencher o relatório de métricas.

Observação

A caixa de seleção GetWebContent aparece somente se o membro da API foi usado em um período específico. O portal exibe apenas membros da API usados em um determinado período de tempo para se concentrar apenas em membros que retornam dados. Se você não encontrar um membro de API específico nessa lista, expanda o intervalo de tempo.