Neste artigo irei demonstrar o quão fácil é realizar o deploy de uma aplicação web estática (que não faz uso de processamento do lado do servidor) na infraestrutura do Azure utilizando o Azure Storage e fazendo a entrega usando o Visual Studio Code.
Introdução
Muitas vezes quando temos requisitos onde não é necessário haver algum tipo de processamento do front-end do lado do servidor, podemos fazer uso de aplicações web estáticas (SPA, MPA). Com o advento dos frameworks javascript (react, angular, vue, etc…) e os geradores de site estáticos (gatsbyjs, jekyll, hugo e etc…) os sites estáticos passaram a ficar cada vez melhores, além de performarem muito bem (desde que otimizados) e até muitas vezes atender a maioria dos requisitos de qualquer projeto.
Neste artigo introdutório, irei mostrar como realizar o deploy na infraestrutura do Azure, usando o Azure Storage utilizando o fonte de um website que oferece um jogo da velha.
Requisitos
Criando o Azure Storage
O Azure Storage é a solução de armazenamento de objetos (estruturados e não-estruturados) da Microsoft para cloud. Ele engloba vários serviços, para diferentes fins:
- Azure Blobs: Uma object store massiva para guardar dados do tipo texto ou binário, suporta também analytics big data através do Data Lake Storage Gen2
- Azure Files: Um compartilhamento de arquivos (file share) completamente gerenciado para uso cloud ou on-premises
- Azure Queues: Uma área confiável para guardar dados de troca mensagens entre componentes de aplicações
- Azure Disks: Um storage para guardar volumes para máquinas virtuais Azure (Azure VMs)
Neste artigo iremos utilizar o serviço Azure Blobs, que irá armazenar os arquivos do nosso site estático.
Primeiramente, vamos criar um grupo de recursos - ou resource group (utilizado para agrupar recursos Azure), para separar os recursos deste guia do resto dos seus possível recursos. Acesse o Portal do Microsoft Azure, faça o login e clique em “Resource Groups” (ou Grupos de Recurso se estiver em português) no menu de favoritos (do lado esquerdo da tela), ou utilize a barra de pesquisa, em seguida clique no botão “Create”:
Criando um Resource Group no Portal da Azure
Escolha o nome do Resource Group e a localização do datacenter e clique em Create:
Preenchendo informações do Resource Group
Certifique-se de que está navegando dentro do Resource Group criado na etapa anterior e clique em Create > Marketplace para adicionar um recurso:
Adicionando um recurso
Pesquise por storage aperte enter e selecione “Storage Account” da Microsoft, clique em Create:
Pesquisando o Azure Storage
Preencha as informações necessárias conforme imagem, e clique em “Review + create”:
Preenchendo informações do storage
Lembre-se que o nome do storage deve ser único globalmente (único entre todos os storages registrados no Azure), ter entre 3 e 24 caracteres e deve conter apenas letras minúsculas e números, sem caracteres especiais
Deixe todas as informações com os valores padrão e clique em “Create”:
Adicionando o storage
O Azure irá iniciar o processo de criação do storage e quando estiver tudo pronto a tela a seguir será apresentada, clique no botão “Go to resource”:
Storage criado com sucesso
Se realmente estiver tudo certo, a dashboard do seu storage será exibida conforme a seguir:
Dashboard do Azure Storage
Instalando a extensão Azure Storage
Com a infraestrutura criada e pronta para abrigar seu site estático, é hora de garantir que seu Visual Studio Code tenha as extensões necessárias para poder publicar os arquivos do projeto no Azure Storage criado. Para isto, abra o vscode e no menu do lado esquerdo vá em Extensions ou aperte ctrl+shift+X e pesquise por azure storage:
Pesquisando a extensão do azure storage
Ou simplesmente siga este link e clique em Install.
Esta extensão irá instalar automáticamente a extensão Azure Account onde irá criar o menu Azure no lado esquerdo da tela, no qual você irá realizar login utilizando seu e-mail e senha Azure. Siga os passos que a extensão irá lhe pedir e garanta que sua conta esteja logada e suas subscriptions apareçam conforme imagem:
Extensão Azure Storage login com sucesso
Clonando e publicando a aplicação
Agora vamos preparar o site estático para o deploy no Azure, no Visual Studio Code abra o terminal (menu superior > terminal > new terminal ou ctrl+shift+` ou cmd+shift+` no mac) navegue e escolha o diretório que preferir para abrigar o projeto. Em seguida clone o projeto utilizando e navegue até ele com:
1
2
git clone https://github.com/danielpadua/js-tic-tac-toe.git my-static-website
cd my-static-website
Agora abra o diretório criado no Visual Studio Code: File > Open Folder > ...:
Estrutura do projeto
Para entregar o projeto no Azure Storage criado, é necessário simplesmente clicar no diretório que deseja entregar com o botão direito e em seguida escolher a opção Deploy to static Website via Azure Storage. Como queremos entregar todos os arquivos do diretório aberto, vamos clicar com o botão direito sobre o espaço vazio na raíz da árvore de arquivos conforme a seguir:
Clique na opção indicada em vermelho para entregar todos os arquivos
Na sequência irão aparecer algumas opções para que você possa indicar à extensão em qual Azure Storage você quer entregar os arquivos, caso você tenha mais de uma subscription, você deverá selecionar a mesma que criou o Storage nos passos anteriores e em seguida selecione-o:
Selecione o mesmo Storage criado nos passos anteriores
Ao selecionar, a extensão poderá te avisar que a opção de hospedar sites estáticos não está habilitada no Storage selecionado e irá perguntar se você deseja habilitar. Escolha a opção Enable website hosting.
Em seguida você será questionado sobre qual será o nome do arquivo html que deverá ser considerado o renderizado ao usuário atingir a URL raíz do website, deixe escrito index.html e aperte enter. Na sequência irá te perguntar sobre qual nome de arquivo considerar quando o usuário tentar acessar algum documento que não existe. No caso deste projeto não há tratamento então podemos seguir com o index.html sugerido, mas caso seu projeto tenha indique o nome do arquivo correto.
Pressione enter novamente e o deploy irá iniciar. Após o término com sucesso, a mensagem a seguir deverá aparecer no canto inferior direito de sua tela:
Deploy feito com sucesso
Navegue até o link indicado na mensagem e veja seu site!
Website Pronto!
Conclusão
Em apenas alguns minutos é possível entregar um site estático no Azure utilizando o Visual Studio Code. Mas não apenas fácil, é barato também. Na verdade acredito que o que torna este modelo mais atraente é o preço.
Neste momento eu mantenho 2 sites estáticos no Azure com poucos acessos e o custo gira em torno de R$13,00 ao mês, mas o cálculo de custo é feito com base por largura de banda (transferência de dados) e quantidade de storage usado (tamanho). O melhor jeito de ter uma noção de quanto irá gastar é ver na própria calculadora do Azure: https://azure.microsoft.com/en-us/pricing/calculator/?service=storage.
Espero que este guia tenha sido útil para você, obrigado e até a próxima!