Compartilhar via


Hospedar site estático no Armazenamento do Microsoft Azure

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.

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

  2. Localize a 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.

    Imagem mostrando como acessar a página de configuração do site estático no portal do Azure

  4. Selecione Ativado para habilitar a hospedagem de site estático 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 para a raiz do 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 o usuário tenta navegar até uma página que não existe no site estático.

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

    Imagem mostrando como definir as propriedades do site estático no portal do Azure

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

    Imagem mostrando as propriedades do site estático no portal do Azure

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.

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

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

    Imagem mostrando onde localizar o contêiner de armazenamento do site no portal do Azure

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

    Imagem mostrando como carregar arquivos no contêiner de armazenamento do site estático

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

    Imagem mostrando como verificar os tipos de conteúdo de blob

    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.

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

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.

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

    Link de métricas

    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.

  2. Clique no botão de período, selecione o período e clique em Aplicar.

    Intervalo de tempo de métricas de sites estático do Armazenamento do Microsoft Azure

  3. Selecione o Blob da lista suspensa Namespace.

    Namespace de métricas de sites estático do Armazenamento do Microsoft Azure

  4. Em seguida, selecione a métrica Egresso.

    Captura de tela que mostra a métrica de saída dos sites estáticos do Armazenamento do Microsoft Azure.

  5. Selecione Somar do seletor Agregação.

    Agregação de métricas de sites estáticos de Armazenamento do Microsoft Azure

  6. Clique no botão Adicionar filtro e escolha Nome da API do seletor Propriedade.

    Nome da API de métricas de sies estáticos do Armazenamento do Microsoft Azure

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

    O GetWebContent de métricas de websites estáticos do Armazenamento do Microsoft Azure

    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.

Próximas etapas