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.

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

  1. Vá para o Visual Studio Marketplace e instale a extensão Azure Static Web Apps 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 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.

  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ê entrou em sua assinatura preferida do Azure abrindo a paleta de comandos, digitando Azure: Select Subscriptionse pressionando Enter.

  3. Selecione sua assinatura (uma marca de seleção deve aparecer ao lado dela) e clique em Ok.

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. Digite my-first-static-web-app e pressione 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 ecrã mostrando o local do código introduzido como aplicação 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 React 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 ecrã mostrando o local do código inserido como aplicação 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 ecrã mostrando a localização do código inserido como aplicação 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 ecrã mostrando o local do código introduzido como aplicação 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.

  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 aceder ao 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.