Exercício – Criar um Aplicativo Web Estático do Azure

  • 5 minutos

Neste exercício, você criará uma instância de dos Aplicativos Web Estáticos do Azure, incluindo um GitHub Action que compila e publica automaticamente seu aplicativo.

Criar um Aplicativo Web Estático

Agora que você criou seu repositório do GitHub, você pode criar uma instância dos Aplicativos Web Estáticos no portal do Azure.

Este módulo usa a área restrita do Azure para fornecer uma assinatura temporária e gratuita do Azure que você pode usar para concluir o exercício. Antes de continuar, ative a área restrita na parte superior desta página.

  1. Entre no portal do Azure, certificando-se de usar a mesma conta que a utilizada para ativar a área restrita.

  2. Na home page do Azure, em Serviços do Azure, selecione Criar um recurso. O painel Criar um recurso será exibido.

  3. Na caixa de pesquisa do marketplace, procure e selecione Aplicativo Web Estático. O painel Aplicativo Web Estático é exibido.

  4. Selecione Criar. O painel Criar Aplicativo Web Estático será exibido. Configure o novo aplicativo e vincule-o ao seu repositório do GitHub.

  5. Na guia Básico, insira os valores a seguir para cada configuração.

    Configuração Valor
    Detalhes do projeto
    Subscription Assinatura do Concierge
    Grupo de recursos [Nome do grupo de recursos da área restrita]
    Detalhes do Aplicativo Web Estático
    Name Dê um nome para o aplicativo. Os caracteres válidos são a-z (não diferencia maiúsculas de minúsculas), 0-9 e -.
    Plano de hospedagem
    Tipo de preço do seu aplicativo Selecione Gratuito
    Azure Functions e detalhes de preparo
    Região da API do Azure Functions e dos ambientes de preparo Selecione a região mais próxima de você
    Detalhes de implantação
    Fonte Selecione GitHub
    Conta do GitHub Selecione Entrar com o GitHub. O painel Autorizar os Aplicativos Web Estáticos do Azure é exibido. Selecione Autorizar Azure-App-Service-Static-Web-Apps. Digite sua senha.
    Organização Selecione a Organização em que você criou o repositório
    Repositório my-static-blazor-app
    Branch main
    Detalhes do build
    Predefinições de build Blazor
    Localização do aplicativo Cliente
    Local da API Api
    local de saída wwwroot

  6. Selecione Examinar + criar>Criar.

  7. Após a implantação ser concluída, selecione Ir para o recurso. O painel Aplicativo Web Estático é exibido.

Examinar a GitHub Action

Nesta fase, sua instância dos Aplicativos Web Estáticos foi criada no Azure, mas o aplicativo ainda não foi implantado. O GitHub Action que o Azure cria em seu repositório é executado automaticamente para disparar o primeiro build e a implantação do seu aplicativo, mas leva alguns minutos para ser concluído.

Você pode verificar o status da ação de build e implantação selecionando o seguinte link para acessar a página Ações do repositório do GitHub:

Screenshot showing how to browse to see the progress of the GitHub Actions workflow.

Depois de acessar a página:

  1. Selecione CI/CD dos Aplicativos Web Estáticos do Azure.

  2. Selecione o commit intitulado ci: adicionar arquivo de fluxo de trabalho dos Aplicativos Web Estáticos do Azure.

  3. Selecione o link Criar e Implantar Trabalho

Aqui, você pode observar o progresso do aplicativo enquanto ele é compilado.

Exibir site

Após o término da compilação e publicação do aplicativo Web pelo GitHub Action, é possível vê-lo em execução.

Selecione o link da URL no portal do Azure para visitar o aplicativo no navegador.

Screenshot of the Azure Static Web Apps overview page.

Seu aplicativo agora está disponível globalmente, mas ainda diz que está carregando dados porque ainda não há dados ou API. Você adicionará a API do aplicativo Web na próxima seção.

Parabéns! Você implantou seu primeiro aplicativo nos Aplicativos Web Estáticos do Azure!

Observação

Não se preocupe se você vir uma página da Web informando que o aplicativo ainda não foi compilado e implantado. Tente atualizar o navegador depois de um minuto. A GitHub Action é executada automaticamente quando o Aplicativos Web Estático do Azure é criado. Portanto, se você vê a página inicial, o aplicativo ainda está sendo implantado.

Próximas etapas

O aplicativo ainda não tem uma API para a lista de compras. Em seguida, você explorará como adicionar uma API do Azure Functions ao seu aplicativo que publica no Azure junto com os ativos estáticos.