Exercício – Começar

  • 7 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 compila e publica automaticamente a sua aplicação.

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 que ativou a sandbox na parte superior desta página.

Gorjeta

Se você encontrar problemas com as dependências do nó, certifique-se de ter o Node Version Manager instalado e possa alternar para uma versão anterior.

Criar um repositório

Em seguida, crie um novo repositório através da utilização de um modelo de repositório do GitHub. Estão disponíveis vários modelos, em que cada um contém uma aplicação de arranque compilada com uma arquitetura de front-end diferente.

  1. Vá para a página criar a partir do modelo para o repositório de modelos.

    • Se for apresentado o erro 404 Página Não Encontrada, inicie sessão no GitHub e tente novamente.

  2. Se lhe for pedido o Proprietário, escolha uma das suas contas do GitHub.

  3. Nomeie seu repositório como my-static-web-app-authn.

  4. Selecione Criar repositório a partir de modelo.

Clone seu aplicativo localmente

Você acabou de criar um repositório do GitHub chamado my-static-web-app-authn em sua conta do GitHub. Em seguida, irá clonar o repositório e executar o código localmente no computador.

  1. Abra um terminal no computador.

  2. Comece por clonar o repositório do GitHub para o computador.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Aceda à pasta do código fonte.

    cd my-static-web-app-authn

Configurar a CORS localmente

Você não precisará se preocupar com o compartilhamento de recursos entre origens (CORS) ao publicar nos Aplicativos Web Estáticos do Azure. As Aplicações Web Estáticas do Azure configuram automaticamente a sua aplicação para que possa comunicar com a sua API no Azure com recurso a um proxy inverso. Porém, no caso de ser executada localmente, é necessário configurar a CORS para permitir a comunicação entre a aplicação Web e a API.

Agora, instrua o Azure Functions para permitir que seu aplicativo Web faça solicitações HTTP para a API em seu computador.

  1. Crie um arquivo chamado api/local.settings.json.

  2. Adicione o seguinte conteúdo ao ficheiro:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Nota

O ficheiro local.settings.json está listado no ficheiro .gitignore, o que impede a emissão deste ficheiro para o GitHub. Isto porque podia armazenar segredos neste ficheiro que não quereria que se encontrassem no GitHub. Foi por isso que teve de criar o ficheiro quando criou o seu repositório a partir do modelo.

Executar a API

A api pasta contém o projeto do Azure Functions com os pontos de extremidade HTTP para o aplicativo Web. Comece executando a API localmente seguindo estas etapas:

Nota

Certifique-se de instalar as Ferramentas Principais do Azure Functions, que permitirão executar o Azure Functions localmente.

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

  2. Entre e selecione Terminal: Criar novo terminal integrado.

  3. Vá para a pasta api :

    cd api

  4. Execute o aplicativo Azure Functions localmente:

    func start

Executar a aplicação Web

  1. Em seguida, vá para a pasta da sua estrutura de front-end preferida, da seguinte maneira:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Agora instale as dependências da aplicação.

    npm install

  3. Por fim, execute a aplicação cliente de front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Navegar para a aplicação

Chegou a altura de ver a sua aplicação a ser executada localmente. Cada aplicação de front-end é executada numa porta diferente.

  1. Selecione a ligação para navegar para a aplicação.

  1. Navegue para http://localhost:4200.

    Screenshot showing the UI of your Angular web app.

  1. Navegue para http://localhost:3000.

    Screenshot showing the UI of your React web app.

  1. Navegue para http://localhost:5000.

    Screenshot showing the UI of your Svelte web app.

  1. Navegue para http://localhost:8080.

    Screenshot showing the UI of your Vue web app.

Seu aplicativo deve exibir uma lista de produtos.

  1. Agora, pare a execução da aplicação ao premir Ctrl+C no terminal.

Compilou a sua aplicação e esta está agora a ser executada localmente no seu browser.

Em seguida, irá publicar a sua aplicação nas Aplicações Web Estáticas do Azure.

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 com a extensão Aplicações Web Estáticas do Azure para o Visual Studio Code.

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

  3. Após a conclusão da instalação, selecione Recarregar.

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.

Selecione a sua subscrição

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

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

  3. Selecione Assinatura do concierge e pressione Enter.

    Screenshot showing how to filter by subscription.

Criar um aplicativo Web estático com o Visual Studio Code

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

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

    Screenshot of the Azure Logo in 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 rótulo Aplicativos Web estáticos e selecione + (sinal de adição).

    Screenshot showing the application name typed out.

  4. Quando a paleta de comandos for aberta na parte superior do editor, selecione Assinatura do concierge e pressione Enter.

    Screenshot showing how to select a subscription.

  5. Digite my-static-web-app-authn e pressione Enter.

    Screenshot showing how to create Static Web Apps.

  6. Selecione a região mais próxima de você e pressione Enter.

    Screenshot showing location selection.

  7. Selecione a opção de estrutura correspondente e pressione Enter.

  1. Selecione angular-app como a localização do código da aplicação e prima Enter.

    Screenshot showing the Angular application code location.

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

    Screenshot showing the Angular app files path.

  1. Selecione react-app como a localização do código da aplicação e prima Enter.

    Screenshot showing the React application code location.

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

    Screenshot showing the React app files path.

  1. Selecione svelte-app como a localização do código da aplicação e prima Enter.

    Screenshot showing the Svelte application code location.

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

    Screenshot showing the Svelte app files path.

  1. Selecione vue-app como a localização do código da aplicação e prima Enter.

    Screenshot showing the Vue application code location.

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

    Screenshot showing the Vue app files path.

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. Depois da criação da aplicação, é apresentada uma notificação de confirmação no Visual Studio Code.

    Screenshot showing the Open Actions in GitHub or View/Edit Config pop-up window.

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Screenshot showing the GitHub Actions menu in VS Code.

    Após a conclusão da implantação, você pode ir diretamente para o seu site.

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

    Screenshot showing the browse site button.

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

Nota

Não se preocupe se vir uma página Web que indique que a aplicação ainda não foi criada 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.

Solicitar as alterações do GitHub

Obtenha as alterações mais recentes do GitHub para derrubar o arquivo de fluxo de trabalho que foi criado pelos Aplicativos Web Estáticos do Azure:

  1. Abra a paleta de comandos ao premir F1.

  2. Digite e selecione Git: Pull e pressione Enter.

Próximos passos

Em seguida, você aprenderá como integrar a autenticação do usuário ao seu aplicativo.