Introdução

  • 2 minutos

A sua empresa está a lançar uma aplicação Web de lista de compras. Através do site, os clientes podem adicionar, editar, visualizar e remover itens da sua lista.

À medida que você cria o aplicativo, suas primeiras preocupações são que seu aplicativo e sua API sejam hospedados com segurança, estejam disponíveis globalmente e sejam publicados automaticamente. Em vez de montar um servidor web para lidar com todas estas preocupações, decides usar uma solução de hospedagem que sirva facilmente os teus recursos e API, sem necessidade de muita configuração ou ajuste.

O que são os Aplicativos Web Estáticos do Azure?

Os Aplicativos Web Estáticos do Azure resolvem os problemas difíceis desde o código-fonte até a 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.

Os aplicativos Web estáticos geralmente são criados usando bibliotecas e estruturas como Angular, React, Svelte ou Vue. Esses aplicativos incluem HTML, CSS, JavaScript e ativos de imagem que compõem o aplicativo. Em uma arquitetura de servidor web tradicional, esses arquivos são servidos a partir de um único servidor, juntamente com quaisquer endpoints de API necessários.

Com os Aplicativos Web Estáticos do Azure, os ativos estáticos são separados de um servidor Web tradicional e, em vez disso, são servidos a partir de pontos distribuídos globalmente em todo o mundo. Essa distribuição torna o serviço de arquivos mais rápido, pois os arquivos estão fisicamente mais próximos dos usuários finais. Os endpoints de API, que são opcionais, são hospedados usando uma arquitetura sem servidor, o que evita a necessidade de um servidor back-end por completo.

O modelo para os Aplicativos Web Estáticos do Azure é que você obtém exatamente o que precisa, nem mais, nem menos.

Diagrama mostrando o modelo de visão geral estático de Aplicativos.

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 monitora uma ramificação de sua escolha. Quando faz push de commits ou cria pull requests na branch monitorada, o workflow cria e implanta automaticamente o seu aplicativo e a sua API no Azure.

O Azure hospeda e serve seu aplicativo Web. O Azure Functions potencializa a funcionalidade de API de back-end, que fornece expansão automática e redução automática com base na demanda.

APIs opcionais

Os Aplicativos Web Estáticos do Azure são ideais para veicular conteúdo puramente estático, mas também têm ótimo suporte para aplicativos Web estáticos que precisam de APIs por trás deles. Você pode hospedar seu aplicativo Web estático com ou sem uma API.

O Azure hospeda e serve a sua aplicação web, enquanto o Azure Functions suporta a funcionalidade da API de back-end, que fornece dimensionamento automático e redução automática com base na procura para a API.

Principais características

  • Hospedagem na Web distribuída globalmente coloca conteúdo estático como HTML, CSS, JavaScript e imagens mais perto de seus usuários.
  • Suporte integrado de API fornecido pelo Azure Functions.
  • Integração superior do GitHub e do Azure DevOps as alterações no seu repositório desencadeiam compilações e implementações.
  • Certificados SSL gratuitos, que são renovados automaticamente.
  • URLs de visualização exclusivas para visualizar solicitações pull.

Objetivos de aprendizagem

Neste módulo, você cria, modifica e implanta um aplicativo Web e uma API nos Aplicativos Web Estáticos do Azure.

Escolha o seu próprio caminho

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 todos esses sabores funcionam.

O código inicial inclui os quatro aplicativos e o ponto de partida para uma API que você usa mais tarde.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

O que você vai fazer

Depois de escolher seu aplicativo cliente, você:

  1. Crie e implante automaticamente seu aplicativo Web no Azure a partir de um repositório do GitHub com as Ações do GitHub.
  2. Crie sua API com o Azure Functions.
  3. Modifique seu aplicativo Web para fazer solicitações HTTP para sua API.
  4. Crie e implante automaticamente seu aplicativo Web no Azure a partir de um repositório do GitHub com as Ações do GitHub.
  5. Finalmente, você explora e inicia seu aplicativo, como mostra a imagem a seguir.

Uma captura de tela ilustrando o aplicativo de amostra angular.

Uma captura de tela ilustrando o aplicativo de exemplo de reação.

Uma captura de ecrã ilustrando o aplicativo de exemplo esbelto.

Uma captura de tela ilustrando o aplicativo de exemplo vue.

Próximos passos

Neste 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 é começar com o código no GitHub primeiro, antes de criar recursos no Azure.