Introdução

  • 4 minutos

Scenario

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, como alimentos e necessidades domésticas.

O site e as APIs têm de ser seguros para garantir a privacidade do cliente. Os utilizadores estarão distribuídos por todo o mundo e pretende que todos obtenham um ótimo desempenho. Prefere uma solução que remova a maior parte do trabalho de infraestrutura, incluindo criação e publicação, conforme possível, para que possa concentrar-se nas funcionalidades e na experiência do utilizador.

Pode implementar os recursos Web no armazenamento na cloud, criar e atribuir o seu próprio certificado SSL, criar a API num servidor da cloud, estabelecer um proxy inverso que permite à aplicação fazer chamadas à API, distribuir a aplicação globalmente e configurar o seu próprio processo de CI/CD.

Quando utilizar Aplicações Web Estáticas do Azure, obterá tudo isto de imediato.

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 finais de API, que são opcionais, são alojados com recurso a uma arquitetura sem servidor, o que evita a necessidade de um servidor completo de back-end.

O modelo das Aplicações Web Estáticas do Azure é que obtém exatamente o que precisa.

Screenshot showing the Static Apps overview.

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. Deste modo, pode alojar a sua aplicação Web estática com ou sem uma API.

Nos exercícios deste módulo, irá implementar uma aplicação com a sua arquitetura Web preferida.

Nota

Irá implementar uma aplicação sem uma API neste módulo. Consulte a seção Próximas etapas na unidade final para obter informações sobre o próximo módulo, onde você implantará uma API junto com seu aplicativo.

Funcionalidades principais

  • Alojamento Web distribuído globalmente que coloca conteúdos estático, como HTML, CSS, JavaScript e imagens, mais próximos dos seus utilizadores
  • Suporte de API integrada prestado pelas Funções do Azure
  • 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 automaticamente renovados
  • URLs de pré-visualização exclusivos para a pré-visualização de pedidos Pull

Objetivos de aprendizagem

Neste módulo, você criará, modificará e implantará um aplicativo Web 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 das Aplicações Web Estáticas do Azure é que todas as variantes "simplesmente funcionam".

O código de arranque inclui as quatro aplicações que irá utilizar.

├ angular-app  👈 The Angular client 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á:

  • Criar e executar a aplicação de front-end.
  • Criar e implementar automaticamente a aplicação Web no Azure a partir de um repositório do GitHub com o GitHub Actions.
  • Por fim, irá explorar e iniciar a aplicação, conforme se segue.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the Vue sample application.

Próximos passos

Deve estar a pensar que tem de criar os recursos do Azure primeiro, mas as Aplicações Web Estáticas do Azure têm o fluxo de trabalho diário em atenção. Uma abordagem mais natural consiste em começar primeiro com o código no GitHub antes de criar recursos no Azure.