Exercício – Criar uma Aplicação Web Estática do Azure

  • 5 minutos

Neste exercício, você cria uma instância de Aplicativos Web Estáticos do Azure, incluindo uma Ação do GitHub que cria e publica automaticamente seu aplicativo.

Criar uma Aplicação Web Estática

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

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

  1. Inicie sessão no portal do Azure, certificando-se de que utiliza a mesma conta para iniciar sessão que utilizou para ativar a sandbox.

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

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

  4. Selecione Criar. O painel Criar aplicativo Web estático é exibido. Configure seu novo aplicativo e vincule-o ao repositório GitHub.

  5. Na guia Noções básicas , insira os seguintes valores para cada configuração.

    Definição Valor
    Detalhes do Projeto
    Subscrição Subscrição de Assistente
    Grupo de Recursos [Nome do grupo de recursos Sandbox]
    Detalhes do aplicativo Web estático
    Nome Atribuir um nome à aplicação. Os carateres válidos são a-z (não sensível a maiúsculas e minúsculas), 0-9 e -.
    Plano de hospedagem
    Nível de preços para seu aplicativo Selecione Grátis
    Azure Functions e detalhes de preparação
    Região para API do Azure Functions e ambientes de preparo Selecione a região mais próxima de si
    Detalhes da implantação
    Origem Selecione GitHub
    Conta do GitHub Selecione Entrar com o GitHub. O painel Autorizar Aplicativos Web Estáticos do Azure é exibido. Selecione Autorizar Azure-App-Service-Static-Web-Apps. Introduzir a palavra-passe.
    Organização Selecione a Organização onde criou o repositório
    Repositório my-static-blazor-app
    Filial principal
    Detalhes da construção
    Predefinições de construção Blazor
    Localização da aplicação Cliente
    Localização da API Api
    Local de saída wwwroot [en]

  6. Selecione Revisar e criar>Criar.

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

Rever a ação do GitHub Actions

Nesta fase, a sua instância de Aplicações Web Estáticas é criada no Azure, mas a sua aplicação ainda não está implementada. A Ação do GitHub que o Azure cria em seu repositório é executada automaticamente para acionar a primeira compilação e implantação do seu aplicativo, mas leva alguns minutos para ser concluída.

Você pode verificar o status de sua ação de compilação e implantação selecionando o link a seguir para ir para a página Ações do seu repositório GitHub:

Captura de tela mostrando como navegar para ver o progresso do fluxo de trabalho de Ações do GitHub.

Depois que você estiver lá:

  1. Selecione Azure Static Web Apps CI/CD.

  2. Selecione o commit intitulado ci: adicionar ficheiro de fluxo de trabalho do Azure Static Web Apps.

  3. Selecione o link Criar e implantar trabalho

A partir daqui, pode observar o progresso da sua aplicação à medida que é compilada.

Ver site

Após o GitHub Actions concluir a criação e publicação da aplicação Web, pode navegar para ver a aplicação em execução.

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

Seu aplicativo agora está disponível globalmente, mas ainda diz Carregando dados porque ainda não há dados ou API. Irá adicionar a API para a sua aplicação Web na secção seguinte.

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

Nota

Não se preocupe se vir uma página Web a indicar que a aplicação ainda não foi compilada e implementada. Experimente atualizar o browser dentro de instantes. A ação do GitHub Actions é executada automaticamente quando são criadas as Aplicações Web Estáticas do Azure. Por isso, se vir a página inicial, significa que a aplicação ainda está a ser implementada.

Próximos passos

A aplicação tem uma API em falta para a lista de compras. Em seguida, você explora como adicionar uma API do Azure Functions ao seu aplicativo que publica no Azure ao lado dos ativos estáticos.