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

  • 5 minutos

Neste exercício, você criará uma instância dos Aplicativos Web Estáticos do Azure, incluindo uma GitHub Action que compilará e publicará automaticamente o aplicativo.

Criar um aplicativo Web estático

Agora que 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, verifique se você ativou a área restrita na parte superior desta página.

A área restrita do Azure que você ativou permite o uso dos serviços do Azure sem nenhum custo.

Instalar a extensão dos Aplicativos Web Estáticos do Azure para Visual Studio Code

  1. Acesse o Visual Studio Marketplace e instale a extensão Aplicativos Web Estáticos do Azure para Visual Studio Code.

  2. Quando a guia de extensão for carregada no Visual Studio Code, selecione o botão Instalar.

  3. Após a conclusão da instalação, selecione Reiniciar para atualizar, se necessário.

Entre no Azure no Visual Studio Code

  1. No Visual Studio Code, entre no Azure selecionando Exibir>Paleta de Comandos e inserindo Azure: Entrar.

    Importante

    Faça logon no Azure usando a mesma conta usada para criar a área restrita. A área restrita fornece acesso a uma Assinatura do Concierge.

  2. Siga os prompts para copiar e colar o código fornecido no navegador da Web que autentica a sessão do Visual Studio Code.

Selecionar sua assinatura

  1. Abra o Visual Studio Code e clique em Arquivo > Abrir e abra o repositório que você clonou para o seu computador no editor.

  2. Verifique se você filtrou suas assinaturas do Azure para incluir a Assinatura do Concierge abrindo a paleta de comandos, inserindo Azure: Select Subscriptions e pressionando Enter.

  3. Selecione Assinatura do Concierge e pressione Enter.

    Screenshot of VS Code showing how to filter by subscription.

Criar um aplicativo Web estático

  1. Abra o Visual Studio Code e clique em Arquivo > Abrir para abrir o repositório que você clonou para o seu computador no editor.

  2. No Visual Studio Code, selecione o logotipo do Azure na barra de atividade para abrir a janela de extensões do Azure.

    Screenshot of the Azure Logo in VS Code.

    Observação

    É necessário entrar no Azure e no GitHub. Se você ainda não entrou no Azure e no GitHub por meio do Visual Studio Code, a extensão solicitará a você que entre em ambos durante o processo de criação.

  3. Coloque o mouse sobre o título Aplicativos Web Estáticos, clique com o botão direito do mouse e selecione Criar Aplicativo Web Estático.

    Screenshot showing where to go to create a web app.

  4. Insira my-first-static-web-app e pressione Enter.

    Screenshot showing how to create a Static Web App.

  5. Selecione sua localização e pressione Enter.

    Screenshot showing how to select a subscription.

  6. Selecione a opção Personalizado e pressione Enter

    Screenshot showing the custom option selected.

  1. Selecione angular-app como o local do código do aplicativo e pressione Enter.

    Screenshot showing the code location entered as Angular app.

  2. Insira dist/angular-app como a localização de saída de build em que os arquivos serão criados para produção em seu aplicativo e pressione Enter.

    Screenshot showing how to enter the build output location for Angular.

  1. Selecione react-app como o local do código do aplicativo e pressione Enter.

    Screenshot showing the code location entered as react app.

  2. Insira build como a localização de saída de build em que os arquivos serão criados para produção em seu aplicativo e pressione Enter.

    Screenshot showing how to enter the build output location for React.

  1. Selecione svelte-app como o local do código do aplicativo e pressione Enter.

    Screenshot showing the code location entered as Svelte app.

  2. Insira public como a localização de saída de build em que os arquivos serão criados para produção em seu aplicativo e pressione Enter.

    Screenshot showing how to enter the build output location for Svelte.

  1. Selecione vue-app como o local do código do aplicativo e pressione Enter.

    Screenshot showing the code location entered as Vue app.

  2. Insira dist como a localização de saída de build em que os arquivos serão criados para produção em seu aplicativo e pressione Enter.

    Screenshot showing how to enter the build output location for Vue

Observação

Seu repositório pode ser um pouco diferente daqueles que você usou anteriormente. Ele contém quatro aplicativos diferentes em quatro pastas distintas. Cada pasta contém um aplicativo criado com uma estrutura JavaScript diferente. Normalmente, você tem um aplicativo na raiz do repositório e especifica / como a localização do caminho do aplicativo. Este é um ótimo exemplo do motivo pelo qual os Aplicativos Web Estáticos do Azure permitem configurar as localizações: você tem controle total de como o aplicativo é compilado.

  1. Depois que o aplicativo é criado, uma notificação de confirmação é mostrada no Visual Studio Code.

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

    Enquanto a implantação está em andamento, a extensão do Visual Studio Code relata o status do build para você.

    Screenshot of the VS Code UI showing waiting for deployment.

  2. Você pode exibir o progresso da implantação usando o GitHub Actions, basta expandir o menu Ações.

    Screenshot showing how to check progress via GitHub Actions.

    Após a implantação, navegue diretamente para o site.

  3. Para ver o site no navegador, clique com o botão direito do mouse no projeto na extensão de Aplicativos Web Estáticos e selecione Procurar no Site.

    Screenshot showing how to browse to your static web app site.

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. Atualize o navegador depois de um minuto. A GitHub Action é executada automaticamente quando o Aplicativos Web Estático do Azure é criado. Se você está vendo a página inicial, significa que o aplicativo ainda está sendo implantado.