Dentre as diversas formas de se hospedar um app Angular na nuvem ou qualquer outro SPA, existem as boas e as ruins. No Azure, por exemplo, uma forma muito utilizada é fazê-lo por meio do App Service.

Porém, o Azure App Service não é uma boa opção para isso…

Ao criar um App Service, temos que escolher qual stack será usada dentre algumas opções como: .Net, Java, PHP ou Python. Todas elas servem pois só precisamos de um servidor web (como o IIS ou o Apache). Ainda existe a opção de criarmos uma imagem docker, com a configuração necessária para hospedarmos o app.

Seu app vai funcionar, mas será necessário pagar por um plano de serviço, além do tráfego de dados, e você terá que se preocupar com soluções para escalabilidade, já que existirá um limite de processamento e memória.

Tudo isso para hospedar os arquivos estáticos (Html e JS) gerados pelo Angular… Agora, isso não parece errado?

Nós só precisamos hospedar arquivos estáticos!

Toda esta complexidade é desnecessária! O Azure tem uma solução ótima para isso, apresentada por meio da Storage Account/Conta de Armazenamento, na qual teremos uma solução robusta para servir arquivos estáticos, que também dispõe de muitos outros recursos, como Geo Redundância e CDN.

Como faz?

Na criação da Storage Account, logo no primeiro passo, precisamos garantir que o Account Kind (tipo de conta) seja do StorageV2, que é o único tipo que possui a funcionalidade desejava.

Com a Storage Account criada, será necessário apenas ativar a função de website estático. Dentro do menu Settings, procure pela opção Static website e clique nela.

Na configuração, clique em Enabled e, para os campos Index document name e Error document path, coloque o valor index.html e clique em Save para salvar. Conforme o passo a passo do GIF:

O Index document name define qual será o arquivo principal da aplicação e Error document path define o arquivo principal em caso de erro, desta forma sempre iremos direcionar a requisição para o arquivo que vai carregar a aplicação. O Angular será responsável por rotas da aplicação.

Após salvar, será exibida duas informações: que um container chamado $web foi criado para hospedar os arquivos e que a url de sua aplicação.

Pronto! Agora é só subir os arquivos e o site já vai funcionar.

Você tem múltiplas formas de fazer o upload para a Azure Storage:

• No Azure DevOps, pode ser feita através da Task Azure File Copy;
• Existem plugins específicos para VSCode e o Visual Studio, ou outra IDE;
• Softwares como o Storage Explorer;
• Mas não faça pelo próprio painel do Azure, ele não vai colocar o content-type correto no arquivo e desta forma não vai funcionar.

Pronto! Seu site está no ar:

Quanto vai custar isso?

Pouco. Como já mencionado, não será necessário pagar por processamento e memória, somente pelo tráfego de dados. Como será hospedada uma aplicação Angular, ela vai ocupar no máximo poucos MBs. Em uma simulação simples (link para a simulação), teríamos um custo estimado de US$ 1,49 por mês.

Por fim

Esta é uma solução que vai simplificar muito o desenvolvimento e manutenção de sua aplicação. Caso queira saber mais sobre as features do Azure Storage, este é o link da documentação oficial. Nela existem informações de como usar um domínio customizados, como ativar CDN e muitas outras coisas.

Na Amazon é possível fazer algo equivalente através do S3. Em breve, traremos outro artigo para falar sobre isso.

A nuvem está aí para resolver seus problemas de infraestrutura, de forma simples, robusta e econômica e ter um parceiro que tem domínio desta tecnologia é essencial para usufruir destas vantagens! Consulte a Iteris para saber como podemos ajudar!