Anterior

Avançar

Exercício – Executar e depurar o Azure Functions e o Angular

Concluído

Neste exercício, você executa e depura o aplicativo do Angular e o aplicativo do Azure Functions juntos. Você define pontos de interrupção no código Angular que exibe o aplicativo Web no navegador e no código do Functions que busca e renderiza as férias. Em seguida, use os pontos de interrupção do Angular e do Functions para percorrer o código do Functions e do Angular com o depurador.

Observação

Os arquivos .vscode/launch.json e .vscode/tasks.json são integrais à experiência de depuração para este projeto.

Iniciar o Azurite para armazenamento de funções locais

O Azure Functions usa o Armazenamento do Microsoft Azure para armazenar os seus dados. Você pode usar o Azurite, um emulador local para o Armazenamento do Microsoft Azure, para executar o aplicativo do Functions localmente. O Azurite fornece um ambiente local que emula os serviços de Blob, Fila e Tabela do Azure para fins de desenvolvimento.

1. Abra um novo terminal no Visual Studio Code.

2. Execute o comando a seguir para iniciar o Azurite.

   npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
   

   Esse comando instala o Azurite e o inicia no diretório atual. O sinalizador --location especifica o local dos dados e o sinalizador --debug especifica o local dos logs.

3. Abra o arquivo .gitignore e adicione a linha a seguir para ignorar os logs e os dados do Azurite.

   .azurite
   

   Esta linha garante que os logs e os dados do Azurite não sejam confirmados no repositório.

Definir Pontos de Interrupção

Quando o aplicativo de pilha completa é iniciado, o cliente front-end do Angular solicita os dados de férias do aplicativo de back-end do Functions. Esses dois aplicativos funcionam em conjunto para obter os dados e renderizá-los no navegador.

Para exibir uma lista de férias, o aplicativo do Angular executa a função getVacations() no arquivo vacations.component.ts, que chama o ponto de extremidade vacations na API do Azure Functions. O arquivo functions/getVacations.ts define a rota do ponto de extremidade. Defina pontos de interrupção nesses arquivos para que, durante a depuração, você possa percorrer o código que busca as férias.

1. No Visual Studio Code, abra o arquivo src/app/vacations/vacations.component.ts do aplicativo e localize a função getVacations().

2. Defina um ponto de interrupção selecionando a medianiz do editor à esquerda da primeira linha de código, this.vacationService.getAll();, dentro da função getVacations().

   

3. Abra o arquivo functions/src/functions/getVacations.ts e defina um ponto de interrupção selecionando a medianiz do editor à esquerda da linha try {.

Executar e depurar o aplicativo

Agora que você tem pontos de interrupção nos aplicativos do Angular e do Functions, você pode percorrê-los e depurá-los juntos.

Observação

Não execute as funções no Azure ainda. Você está usando o Azure Functions Core Tools (CLI) para executar e depurar localmente.

Fazer proxy das solicitações do Angular para o Functions

A API do Azure Functions é executada na porta 7071, enquanto o aplicativo do Angular é executado na porta 4200. O aplicativo do Angular não pode fazer solicitações entre os domínios para o aplicativo do Functions, portanto, você faz proxy das chamadas do aplicativo do Angular para o aplicativo do Functions.

Para habilitar o aplicativo do Angular a se comunicar com solicitações de proxy e com o aplicativo do Functions, abra proxy.conf.json e altere a porta para 7071.

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

Observação

O aplicativo Node.js Express usou a porta 7070. Se você removeu o aplicativo Node.js Express, também poderá usar a porta 7070 para o aplicativo do Functions. Porém, para fins de aprendizado, você mantém ambos os aplicativos.

Depurar ambos os aplicativos

Quando você executa e depura os aplicativos juntos, o aplicativo pausa nos pontos de interrupção para que você tenha a oportunidade de explorar como esses aplicativos funcionam juntos.

1. Pressione F1 para abrir a paleta de comandos do Visual Studio Code.

2. Digite e selecione Exibir: Mostrar Executar e Depurar.

3. Na parte superior do painel Executar e Depurar, selecione Depurar o Functions e o Angular na lista suspensa.

4. Pressione F5 para iniciar o depurador.

   O aplicativo é iniciado para obter a lista de férias. O VacationComponent Angular inicia a solicitação HTTP para obter as férias. Quando o navegador é aberto, a execução do código pausa no primeiro ponto de interrupção no arquivo vacations.component.ts na função getVacations().

   

5. Tire a execução do estado de pausa e continue pressionando F5.

6. O código pausa no segundo ponto de interrupção no arquivo functions/vacations-get/index.ts, pois o aplicativo do Angular atinge a rota vacations do Functions. Tire a execução do estado de pausa e continue pressionando F5.

7. Há dois processos de depuração em execução: um para o Angular e outro para o Azure Functions. Pressione SHIFT + F5 para interromper o depurador ativo.

8. Pressione SHIFT + F5 para interromper o depurador restante.

Continuar