Introdução
A sua empresa está a lançar uma aplicação Web de lista de compras. Através do site, os clientes podem adicionar, editar, ver e remover itens da lista.
À medida que compila a aplicação, as suas primeiras preocupações dizem respeito à segurança do alojamento, à disponibilidade global e à publicação automática da sua aplicação e API. Em vez de compilar um servidor Web para lidar com todas estas preocupações, decide utilizar uma solução de alojamento que apresente facilmente os seus elementos e API, sem ser necessário muito trabalho de configuração.
O que são as Aplicações Web Estáticas do Azure?
As Aplicações Web Estáticas do Azure resolvem os problemas difíceis, desde o seu código fonte até à disponibilidade global.
Enquanto você permanece focado no desenvolvimento de seu aplicativo, os Aplicativos Web Estáticos do Azure o criam e hospedam automaticamente a partir do GitHub ou do Azure DevOps.
As aplicações Web estáticas são normalmente compiladas com recurso a bibliotecas e arquiteturas, tais como Angular, React, Svelte ou Vue. Estas aplicações incluem HTML, CSS, JavaScript e elementos de imagem que compõem a aplicação. Ao utilizar uma arquitetura tradicional de servidor Web, estes ficheiros são apresentados a partir de um único servidor juntamente com quaisquer pontos finais de API necessários.
Com as Aplicações Web Estáticas do Azure, os elementos estáticos são separados de um servidor Web tradicional e são apresentados a partir de pontos distribuídos globalmente pelo mundo. Esta distribuição torna a apresentação de ficheiros muito mais rápida, uma vez que os ficheiros estão fisicamente mais próximos dos utilizadores. Os pontos de extremidade de API, que são opcionais, são hospedados usando uma arquitetura sem servidor, o que evita completamente a necessidade de um servidor back-end completo.
O modelo para os Aplicativos Web Estáticos do Azure é que você obtém exatamente o que precisa - nem mais, nem menos.
Quando você cria um recurso de Aplicativos Web Estáticos do Azure, o Azure configura um fluxo de trabalho de Ações do GitHub ou DevOps do Azure no repositório de código-fonte do aplicativo. O fluxo de trabalho monitoriza um ramo à sua escolha. Sempre que você envia por push commits ou cria solicitações pull na ramificação monitorada, o fluxo de trabalho cria e implanta automaticamente seu aplicativo e sua API no Azure.
O Azure aloja e apresenta a sua aplicação Web. As Funções do Azure alimentam a funcionalidade de API de back-end, o que proporciona dimensionamento horizontal e vertical automático com base na procura.
APIs opcionais
As Aplicações Web Estáticas do Azure são ideais para apresentar conteúdo puramente estático, mas também oferecem um excelente suporte para aplicações Web estáticas que precisam de APIs. Pode alojar a sua aplicação Web estática com ou sem uma API.
O Azure aloja e apresenta a sua aplicação Web, enquanto as Funções do Azure alimentam a funcionalidade de API de back-end, o que proporciona dimensionamento horizontal e vertical automático com base na procura da API.
Funcionalidades principais
- A hospedagem na Web distribuída globalmente coloca o conteúdo estático como HTML, CSS, JavaScript e imagens mais perto de seus usuários.
- Suporte integrado à API fornecido pelo Azure Functions.
- Integração de primeira classe do GitHub e do Azure DevOps, onde as alterações no repositório acionam compilações e implantações.
- Certificados SSL gratuitos, que são renovados automaticamente.
- URLs de visualização exclusivas para visualizar solicitações pull.
- Autenticação integrada com vários fornecedores.
Objetivos de aprendizagem
Neste módulo, você criará, modificará e implantará um aplicativo Web e uma API com autenticação de usuário nos Aplicativos Web Estáticos do Azure.
A escolha é sua
Este módulo fornece quatro variações do aplicativo de exemplo para você escolher: Angular, React, Svelte e Vue. O poder dos Aplicativos Web Estáticos do Azure é que todos esses sabores "simplesmente funcionam".
O código de arranque inclui as quatro aplicações e o ponto inicial para uma API que irá utilizar.
├ angular-app 👈 The Angular client app
├ api 👈 The API server app
├ react-app 👈 The React client app
├ svelte-app 👈 The Svelte client app
└ vue-app 👈 The Vue client app
O que irá fazer
Depois de escolher a aplicação cliente, irá:
- Crie e implante automaticamente seu aplicativo Web e sua API no Azure a partir de um repositório do GitHub com as Ações do GitHub.
- Modifique seu aplicativo Web para adicionar botões de login e logout e exibir informações sobre o usuário conectado atual.
- Modifique seu aplicativo Web e sua API para bloquear usuários não autenticados e permitir apenas provedores de autenticação específicos.
- Por fim, irá explorar e iniciar a aplicação, conforme se segue.
Próximos passos
No momento, você pode estar pensando que precisa criar os recursos do Azure primeiro, mas os Aplicativos Web Estáticos do Azure têm seu fluxo de trabalho diário em mente. Uma abordagem mais natural consiste em começar primeiro com o código no GitHub antes de criar recursos no Azure.