31/10/2019 | Autor: Claudio Romão | Categoria: Técnico | Comentários

Configurando um site estático no Azure Storage Account

Imagina que você tem um site estático e precisar hospedar esse site em algum servidor. Usualmente você deve contratar um provedor de hospedagem e ele vai fazer toda a configuração do servidor web e urls para você ou vai ter dar uma portal adminitrativo para isso. Outra forma seria utilizar o Azure Web App, que seria uma solução de PaaS para hospedar sites dentro da plataforma do Azure. Mas o nosso site só tem conteúdo estático e não preciso de nenhum framework para rodar, preciso realmente ter um serviço de hospedagem estilo o Azure Web App ou algum provedor? A resposta é não!

No Azure, nós temos como criar um Storage Account e fazer ele hospedar nosso site estático de uma maneira bem simples e barata.

Nesse post veremos como configurar o Azure Storage Account para hospedar seu site web. Para isso, vamos primeiro acessar o portal do Azure e criar um novo storage account.

página para criação do storage account

Agora vamos entrar com as informações necessárias para criar a storage account. Selecione a sua subscription e defina em qual resource group você irá criar essa nova storage account. No Storage account name, coloque o nome da sua storage account

Performance e Account Kind eu deixei as padrões e a Replication eu coloquei apenas Loccaly para baratear a hospedagem. Até porque nós veremos em outros posts como criar um no Azure DevOps services um CI para fazer publicação automática nessa storage account e com isso atualizar o nosso site.

Configuração inicial do Storage Account

Agora podemos clicar no Review + Create e veremos a seguinte tela:

revisão dos dados para criação do storage account

Vamos esperar um pouco para que o Azure crie o nosso recurso e assim que criar vamos navegar para a página dele, conforme imagem

página do storage account

No menu à esquerda, onde temos as opções de configuração do storage account, vamos procurar a opção Static Website, conforme mostrado na figura

menu lateral de configuração do storage account

Ao clicar, vamos ver a tela para habilitar o storage account para funcionar como um site estático, para isso, selecione a opção Enabled e defina o nome do arquivo padrão do site e um caminho para uma página de error customizada. Vamos definir o nosso como index.html e o outro como 404.html. Feito isso, clique no botão save e já veremos o nosso website configurado

habilitando a funcionalidade do storage account

Reparem que já temos uma URL para acessar nosso site, ela é o nome do nosso storage account com mais algumas informações do endpoint do site.

Agora precisamos colocar arquivos dentro do nosso storage para podermos acessá-los. Para isso, vamos navegar para o cointainer especial que foi criado $web, conforme imagem abaixo

[upload dos arquivos para o storage account

Vamos fazer o upload dos arquivos do nosso site nesse container. Para isso, clique no botão upload

Nela, iremos selecionar todos os arquivos que precisamos, no nosso exemplo eu tenho três arquivos o index.html que é a página princial e a que configuramos na habilitação do static website. Tenho a 404.html que é a nossa página customizada de erro e adicionei uma página a mais para navegarmos que é a secundaria.html.

arquivos no storage account

Agora, vamos acessar nosso website e ver nossa página. Para isso, volte nas configurações do static website conforme vimos anteriormente e copie a url disponibilizada. Essa url vai ser parecida com https://nome_do_storage_account.z**.web.core.windows.net

Cole a URL em uma nova janela e você poderá ver seu site no ar.

imagem do site

E pronto, com isso você já terminou a configuração do seu site estático de uma maneira bem simples e barata.

Espero que tenha gostado e se tiver algum dúvida específica me manda um e-mail ou deixe nos comentários.

Até a próxima, Claudio Romão