Tutorial: Hospedar um web site estático no Blob Storage

Neste tutorial, você aprenderá a criar e implantar um site estático no Armazenamento do Azure. Quando terminar, você terá um site estático que os usuários podem acessar publicamente.

Neste tutorial, você aprenderá como:

• Configurar hospedagem de site estático
• Implantar um site do Hello World

Os sites estáticos têm algumas limitações. Por exemplo, se você desejar configurar cabeçalhos, precisará usar a CDN do Azure (Rede de Distribuição de Conteúdo do Azure). Não há como configurar cabeçalhos como parte do recurso de site estático. Além disso, AuthN e AuthZ não têm suporte.

Se esses recursos forem importantes para seu cenário, considere usar Aplicativos Web Estáticos do Azure. É uma ótima alternativa para sites estáticos e também é adequada nos casos em que você não precisa de um servidor Web para renderizar o conteúdo. Você pode configurar os cabeçalhos, e AuthN/AuthZ tem suporte completo. Os Aplicativos Web Estáticos do Azure fornecem ‘um fluxo de trabalho de CI/CD (integração contínua e entrega contínua) totalmente gerenciado desde a origem do GitHub até a implantação global.

Este vídeo mostra como hospedar um site estático no Armazenamento de Blobs.

As etapas no vídeo também são descritas nas seções a seguir.

Pré-requisitos

Para acessar o Armazenamento do Azure, você precisará de uma assinatura do Azure. Se você ainda não tiver uma assinatura, crie uma conta gratuita antes de começar.

Todo o acesso ao Armazenamento do Azure ocorre por meio de uma conta de armazenamento. Para este início rápido, crie uma conta de armazenamento usando o portal do Azure, o Azure PowerShell ou a CLI do Azure. Para obter ajuda para criar uma conta de armazenamento, consulte Criar uma conta de armazenamento.

Observação

Os sites estáticos agora estão disponíveis para contas de armazenamento padrão v2 de uso geral, bem como contas de armazenamento com namespace hierárquico habilitado.

Este tutorial usa o Visual Studio Code, uma ferramenta gratuita para programadores, para criar o site estático e implantá-lo em uma conta de Armazenamento do Azure.

Depois de instalar o Visual Studio Code, instale a extensão de visualização do Armazenamento do Azure. Essa extensão integra a funcionalidade de gerenciamento do Armazenamento do Azure ao Visual Studio Code. Você usará a extensão para implantar seu site estático no Armazenamento do Azure. Para instalar a extensão:

1. Inicie o Visual Studio Code.

2. Na barra de ferramentas, clique em Extensões. Pesquise por Armazenamento do Azure e selecione a extensão Armazenamento do Azure na lista. Em seguida, clique no botão Instalar para instalar a extensão.

   

Configurar hospedagem de site estático

A primeira etapa é configurar sua conta de armazenamento para hospedar um site estático no portal do Azure. Quando você configura sua conta para hospedagem de site estático, o Armazenamento do Azure cria automaticamente um contêiner chamado $web. O contêiner $web conterá os arquivos do seu site estático.

1. Entre no portal do Azure no navegador da Web.

2. Localize sua conta de armazenamento e exiba a visão geral dela.

3. Selecione o site estático para exibir a página de configuração de sites estáticos.

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 de 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 de 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. O portal do Azure agora exibe o endpoint do site estático.

   

Implantar um site do Hello World

Em seguida, crie uma página da Web Hello World com o Visual Studio Code e implante-a no site estático hospedado em sua conta de Armazenamento do Azure.

1. Crie uma pasta vazia chamada mywebsite no sistema de arquivos local.

2. Inicie o Visual Studio Code e abra a pasta que você acabou de criar no painel do Explorer .

   

3. Crie o arquivo de índice padrão na pasta mywebsite e nomeie-o index.html.

   

4. Abra index.html no editor, cole o seguinte texto no arquivo e salve-o:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>Hello World!</h1>
     </body>
   </html>
   

5. Crie o arquivo de erro padrão e nomeie-o 404.html.

6. Abra 404.html no editor, cole o seguinte texto no arquivo e salve-o:

   <!DOCTYPE html>
   <html>
     <body>
       <h1>404</h1>
     </body>
   </html>
   

7. Clique com o botão direito do mouse na pasta mywebsite no painel Do Explorer e selecione Implantar no Site Estático... para implantar seu site. Você será solicitado a fazer logon no Azure para recuperar uma lista de assinaturas.

8. Selecione a assinatura que contém a conta de armazenamento para a qual você habilitou a hospedagem de sites estáticos. Em seguida, selecione a conta de armazenamento quando solicitado.

O Visual Studio Code carregará seus arquivos para o endpoint da web e exibirá a barra de status de sucesso. Inicie o site para exibi-lo no Azure.

Você concluiu com êxito o tutorial e implantou um site estático no Azure.

Suporte de funcionalidades

O suporte para esse recurso pode ser afetado ao habilitar o Data Lake Storage Gen2, o protocolo NFS (Sistema de Arquivos de Rede) 3.0 ou o protocolo SFTP (Protocolo de Transferência de Arquivo SSH). Se você tiver habilitado um desses recursos, veja o Suporte a recursos do Armazenamento de Blobs nas contas do Armazenamento do Microsoft Azure para avaliar o suporte para esse recurso.

Próximas etapas

Neste tutorial, você aprendeu a configurar sua conta de Armazenamento do Azure para hospedagem de sites estáticos e como criar e implantar um site estático em um ponto de extremidade do Azure.

Em seguida, saiba como configurar um domínio personalizado com seu site estático.

Mapear um domínio personalizado para um ponto de extremidade do Armazenamento de Blobs do Azure