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

  • 5 minutos

Neste exercício, irá criar uma instância das Aplicações Web Estáticas do Azure, incluindo uma ação do GitHub Actions que irá automaticamente compilar e publicar a sua aplicação.

Criar uma aplicação Web estática

Agora que criou o seu repositório do GitHub, pode criar uma instância das Aplicações Web Estáticas 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 avançar, certifique-se de que ativou o sandbox no topo desta página.

O sandbox do Azure que ativou permite-lhe utilizar os serviços do Azure sem incorrer em custos.

Instalar a extensão Aplicações Web Estáticas do Azure para o Visual Studio Code

  1. Aceda ao Visual Studio Marketplace e instale a extensão Aplicações Web Estáticas do Azure do 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 solicitado.

Iniciar sessão no Azure no Visual Studio Code

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

    Importante

    Inicie sessão no Azure com a mesma conta utilizada para criar o sandbox. A sandbox dá-lhe acesso a uma Subscrição de Assistente.

  2. Siga as instruções para copiar e colar o código fornecido no seu browser, que autentica a sua sessão do Visual Studio Code.

Selecionar a Subscrição

  1. Abra o Visual Studio Code e selecione Arquivo > Abrir e abra o repositório clonado para seu computador no editor.

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

  3. Selecione Assinatura do concierge e pressione Enter.

    Captura de ecrã do VS Code a mostrar como filtrar por subscrição.

Criar uma aplicação Web estática

  1. Abra o Visual Studio Code e selecione Arquivo > Abrir para abrir o repositório clonado para seu computador no editor.

  2. No Visual Studio Code, selecione o logótipo do Azure na Barra de Atividade para abrir a janela de extensões do Azure.

    Captura de ecrã do logótipo do Azure no VS Code.

    Nota

    É preciso iniciar sessão no Azure e no GitHub. Se ainda não tiver sessão iniciada no Azure e no GitHub a partir do Visual Studio Code, a extensão irá pedir-lhe que a inicie durante o processo de criação.

  3. Coloque o mouse sobre o cabeçalho Static Web Apps, clique com o botão direito do mouse e selecione Create Static Web App.

    Captura de ecrã a mostrar onde ir para criar uma aplicação Web.

  4. Introduza my-first-static-web-app e prima Enter.

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

  5. Selecione a sua localização e prima Enter.

    Captura de ecrã a mostrar como selecionar uma subscrição.

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

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

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

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

  3. Insira dist/angular-app como o local de saída de compilação onde os arquivos são criados para produção em seu aplicativo e pressione Enter.

    Captura de tela mostrando como inserir o local de saída de compilação para Angular.

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

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

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

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

  3. Insira build como o local de saída de compilação onde os arquivos são criados para produção em seu aplicativo e pressione Enter.

    Captura de tela mostrando como inserir o local de saída da compilação para React.

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

    Captura de ecrã a mostrar a opção esbelta selecionada.

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

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

  3. Insira public como o local de saída de compilação onde os arquivos são criados para produção em seu aplicativo e pressione Enter.

    Captura de tela mostrando como inserir o local de saída de compilação para o Svelte.

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

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

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

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

  3. Insira dist como o local de saída de compilação onde os arquivos são criados para produção em seu aplicativo e pressione Enter.

    Captura de tela mostrando como inserir o local de saída de compilação para Vue

Nota

Seu repositório pode ser um pouco diferente daqueles que você pode ter usado no passado. Contém quatro aplicações diferentes em quatro pastas distintas. Cada pasta contém uma aplicação criada numa arquitetura JavaScript diferente. Normalmente, tem uma aplicação na raiz do seu repositório e especifica / para a localização do caminho da aplicação. Este é um excelente exemplo do motivo pelo qual as Aplicações Web Estáticas do Azure lhe permitem configurar as localizações em primeiro lugar – tem o controlo total sobre a forma como a aplicação é compilada.

  1. Assim que a aplicação for criada, é apresentada uma notificação de confirmação no Visual Studio Code.

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

    À medida que a implantação está em andamento, a extensão Visual Studio Code relata o status da compilação para você.

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

  2. Você pode visualizar o progresso da implantação usando as Ações do GitHub expandindo o menu Ações .

    Captura de tela mostrando como verificar o progresso por meio das Ações do GitHub.

    Quando a implantação estiver concluída, você poderá navegar diretamente para seu site.

  3. Para visualizar o site no navegador, clique com o botão direito do mouse no projeto na extensão Static Web Apps e selecione Browse Site.

    Captura de ecrã a mostrar como navegar para o site da aplicação Web estática.

Parabéns! Implementou a sua primeira aplicação nas Aplicações Web Estáticas 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. Atualize rapidamente o browser. A ação do GitHub Actions é executada automaticamente quando são criadas as Aplicações Web Estáticas do Azure. Se vir a página inicial, significa que a aplicação ainda está a ser implementada.