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.

    Captura de tela do VS Code mostrando como filtrar por assinatura.

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.

    Captura de tela do logotipo do Azure no 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.

    Captura de tela mostrando para onde ir para criar um aplicativo Web.

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

    Captura de tela que mostra como criar um aplicativo Web estático.

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

    Captura de tela mostrando como selecionar uma assinatura.

  1. Selecione a opção Angular e pressione Enter

    Captura de tela mostrando a opção angular selecionada.

  2. Insira angular-app como o local do código do aplicativo e pressione Enter.

    Captura de tela mostrando o local do código inserido como aplicativo do Angular.

  3. 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.

    Captura de tela mostrando como inserir o local de saída do build para o Angular.

  1. Selecione a opção React e pressione Enter

    Captura de tela mostrando a opção react selecionada.

  2. Insira /react-app como o local do código do aplicativo e pressione Enter.

    Captura de tela mostrando o local do código inserido como aplicativo do React.

  3. 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.

    Captura de tela mostrando como inserir o local de saída do build para o React.

  1. Selecione a opção Svelte e pressione Enter

    Captura de tela mostrando a opção svelte selecionada.

  2. Insira svelte-app como o local do código do aplicativo e pressione Enter.

    Captura de tela mostrando o local do código inserido como aplicativo do Svelte.

  3. 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.

    Captura de tela mostrando como inserir o local de saída do build para o Svelte.

  1. Selecione a opção Vue e pressione Enter

    Captura de tela mostrando a opção vue selecionada.

  2. Insira /vue-app como o local do código do aplicativo e pressione Enter.

    Captura de tela mostrando o local do código inserido como aplicativo do Vue.

  3. 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.

    Captura de tela mostrando como inserir o local de saída do build para o 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.

    Captura de tela do código de confirmação solicitando que o usuário abra ações no GitHub ou Exibir/Editar Configurar.

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

    Captura de tela da interface do usuário do VS Code mostrando a espera pela implantação.

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

    Captura de tela mostrando como verificar o progresso por meio do 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.

    Captura de tela mostrando como navegar até o site do aplicativo Web estático.

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.