Partilhar via

Inspecionar solicitações de API emitidas por serviços de nuvem

  • Artigo

Quando você integra seu aplicativo com serviços de nuvem, um dos desafios que você pode enfrentar é entender como o serviço de nuvem interage com as APIs que usa. Ser capaz de inspecionar solicitações de API é especialmente importante quando você está solucionando problemas ou quando está tentando entender como o serviço de nuvem funciona. Normalmente, é um desafio, porque você não tem acesso ao tempo de execução do serviço de nuvem e também pode não ter acesso às ferramentas de monitoramento para a API da nuvem. Usando o Dev Proxy e os túneis de desenvolvimento, você pode inspecionar as solicitações de API que os serviços de nuvem emitem para APIs de nuvem.

Importante

Antes de continuar, instale os túneis de desenvolvimento e configure a ferramenta para uso.

Como os serviços de nuvem chamam APIs de nuvem

Quando você integra seu aplicativo com serviços de nuvem, o serviço de nuvem chama sua API na nuvem. O diagrama a seguir ilustra esse cenário:

Diagrama que mostra como um serviço de nuvem chama uma API de nuvem.

Para inspecionar solicitações de API que o serviço de nuvem emite, você precisa acessar as ferramentas de monitoramento para a API de nuvem. Muitas vezes, você não tem acesso a essas ferramentas. Você pode contornar essa limitação usando um ambiente de preparação. No entanto, é demorado configurar e manter um ambiente de preparação. Além disso, se você não possui a API de nuvem, talvez não consiga configurar um ambiente de preparação.

Inspecione solicitações de API usando Dev Proxy e túneis de desenvolvimento

Usando o Dev Proxy e os túneis de desenvolvimento, você pode inspecionar as solicitações de API que o serviço de nuvem emite para a API de nuvem.

Diagrama que mostra como você pode inspecionar chamadas de API na nuvem usando túneis de desenvolvimento e Proxy de Desenvolvimento.

Em vez de chamar a API de nuvem diretamente, você configura o serviço de nuvem para chamar o túnel de desenvolvimento executado em sua máquina local (1). Configure o túnel de desenvolvimento para usar um cabeçalho de host intercetado pelo Proxy de Desenvolvimento. Cada vez que o serviço de nuvem chama o túnel de desenvolvimento, ele passa a solicitação para o Dev Proxy, que o interceta (2). Usando o Dev Proxy RewritePlugin, você altera a URL da solicitação intercetada e a encaminha para a API de nuvem (3). A API na nuvem processa a solicitação e retorna uma resposta ao Dev Proxy (4). O Dev Proxy passa a resposta para o túnel de desenvolvimento (5), que a encaminha para o serviço de nuvem (6). Como a solicitação é roteada por meio de sua máquina local, você pode inspecionar suas informações, incluindo URL, cabeçalhos e corpo, e a resposta da API de nuvem.

Cenário

Digamos que você queira inspecionar solicitações de API que um serviço de nuvem emite para a API JSONPlaceholder de demonstração localizada em https://jsonplaceholder.typicode.com. Ao combinar o Dev Proxy e os túneis de desenvolvimento, você pode intercetar as solicitações e inspecionar suas informações.

Você pode inspecionar as solicitações usando ferramentas de inspeção de túneis de desenvolvimento ou usando o DevToolkit Proxy de Desenvolvimento. Ambas as ferramentas usam as Ferramentas de desenvolvimento do Chrome para mostrar informações sobre solicitações e respostas intercetadas. Ao usar as ferramentas de inspeção de túneis de desenvolvimento, você vê a URL do túnel de desenvolvimento como a URL de solicitação. Em comparação, quando você usa o Dev Proxy DevToolsPlugin, você vê como o Dev Proxy interceta a solicitação, usando a URL local ou reescrita.

Inspecione solicitações de API usando Proxy de Desenvolvimento, túneis de desenvolvimento e ferramentas de inspeção de túneis de desenvolvimento

  1. Configure o Dev Proxy para intercetar solicitações para https://jsonplaceholder.typicode.com e http://jsonplaceholder.typicode.local:

    {
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

    O arquivo de configuração usa o RewritePlugin para reescrever a URL das solicitações intercetadas. Ele também configura o Dev Proxy para intercetar solicitações https://jsonplaceholder.typicode.com e http://jsonplaceholder.typicode.local URLs.

    Nota

    Embora não seja necessário usar um .local domínio, é uma boa prática que ajuda a distinguir entre as solicitações reais e intercetadas. Observe também que, para o .local domínio, você usa o protocolo HTTP, em vez de HTTPS. Os túneis de desenvolvimento não suportam HTTPS para rotear solicitações para cabeçalhos de host personalizados em sua máquina local, e é por isso que você precisa usar HTTP.

  2. Crie um arquivo de regravação chamado devproxy-rewrites.json que altere a URL das solicitações intercetadas:

    {
  "rewrites": [
    {
      "in": {
        "url": "^http://jsonplaceholder.typicode.local(.*)"
      },
      "out": {
        "url": "https://jsonplaceholder.typicode.com$1"
      }
    }
  ]
}

    O arquivo de regravação altera a URL das solicitações intercetadas de http://jsonplaceholder.typicode.local para https://jsonplaceholder.typicode.com.

  3. Inicie o Dev Proxy executando na linha devproxyde comando.

    Captura de tela da linha de comando com o Dev Proxy em execução.

  4. Inicie o túnel de desenvolvimento executando na linha devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comando.

    Captura de tela da linha de comando executando o Dev Proxy e o dev tunnel.

    Usando este comando, você abre um novo túnel de desenvolvimento em sua máquina. Você o mapeia para a porta 8000, que é onde o Dev Proxy escuta as solicitações de entrada. Você também especifica o cabeçalho do host que o Dev Proxy interceta.

  5. Observe a URL do túnel de desenvolvimento que você pode usar para configurar o serviço de nuvem para chamar sua máquina local, por exemplo https://tunnel_id-8000.euw.devtunnels.ms.

  6. Em um navegador da Web, abra a URL de inspeção do túnel de desenvolvimento, por exemplo https://tunnel_id-8000-inspect.euw.devtunnels.ms.

  7. Simule um serviço de nuvem chamando a API de nuvem usando a URL do túnel de desenvolvimento, executando na linha de comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

    Nota

    Observe que o nome do host corresponde à URL do túnel de desenvolvimento em sua máquina. O caminho corresponde ao caminho da API que você deseja inspecionar.

    Captura de tela da linha de comando executando o Dev Proxy e um túnel de desenvolvimento, e curl chamando o túnel de desenvolvimento.

  8. Observe como o Dev Proxy interceta a solicitação e a encaminha para a API na nuvem, eventualmente retornando a resposta ao cliente.

  9. No navegador da Web, observe as informações sobre a solicitação intercetada e a resposta da API na nuvem.

    Captura de tela de um navegador da Web com ferramentas de inspeções de túnel de desenvolvimento mostrando a solicitação intercetada.

    Nota

    Observe que a URL da solicitação gravada é a URL do túnel de desenvolvimento. O cabeçalho de host gravado é o cabeçalho de host que o Dev Proxy interceta.

  10. Feche o túnel de desenvolvimento e pare o Dev Proxy pressionando Ctrl+C em suas respetivas sessões na linha de comando.

Inspecione solicitações de API usando Dev Proxy e DevToolsPlugin

Outra maneira de inspecionar as solicitações de API que o serviço de nuvem emite é usando o DevToolsPlugin do Dev Proxy. A diferença entre usar o DevToolsPlugin e as ferramentas de inspeção de túneis de desenvolvimento é que o DevToolsPlugin mostra como o Dev Proxy interceta a solicitação, usando a URL local ou reescrita.

Configure o Dev Proxy para usar o DevToolsPlugin para inspecionar solicitações de API usando a URL intercetada

Primeiro, vamos configurar o Dev Proxy para inspecionar solicitações de API na nuvem. Vamos configurar o DevToolsPlugin para mostrar as informações sobre a URL antes que o Dev Proxy a reescreva.

  1. Atualize o arquivo de configuração do Dev Proxy para usar o DevToolsPlugin:

    {
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
    },
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

    Nota

    Observe que adicionamos o DevToolsPlugin antes do RewritePlugin. Ao adicionar o DevToolsPlugin primeiro, ele mostra as informações sobre a solicitação intercetada antes de ser reescrita.

  2. Inicie o Dev Proxy executando na linha devproxyde comando. Observe que o Dev Proxy abre uma janela do navegador da Web com as Ferramentas de Desenvolvimento do Chrome visíveis.

  3. Inicie o túnel de desenvolvimento executando na linha devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comando.

  4. Simule um serviço de nuvem chamando a API de nuvem usando a URL do túnel de desenvolvimento, executando na linha de comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

  5. No navegador da Web com as Ferramentas de Desenvolvimento do Chrome, observe as informações sobre a solicitação intercetada e a resposta da API na nuvem.

    Captura de tela de um navegador da Web com ferramentas de inspeções do Dev Proxy mostrando a solicitação intercetada.

    Nota

    Observe que a URL da solicitação gravada é a URL da API na nuvem. O cabeçalho de host gravado é o cabeçalho de host que o Dev Proxy interceta.

  6. Feche o túnel de desenvolvimento e pare o Dev Proxy pressionando Ctrl+C em suas respetivas sessões na linha de comando.

Configure o Dev Proxy para usar o DevToolsPlugin para inspecionar solicitações de API usando a URL reescrita

Em seguida, vamos atualizar a configuração do Dev Proxy para mostrar as informações sobre a URL reescrita.

  1. Atualize o arquivo de configuração do Dev Proxy movendo o DevToolsPlugin após o RewritePlugin:

    {
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.23.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "rewritePlugin"
    },
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}

  2. Inicie o Dev Proxy executando na linha devproxyde comando. Observe que o Dev Proxy abre uma janela do navegador da Web com as Ferramentas de Desenvolvimento do Chrome visíveis.

  3. Inicie o túnel de desenvolvimento executando na linha devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymousde comando.

  4. Simule um serviço de nuvem chamando a API de nuvem usando a URL do túnel de desenvolvimento, executando na linha de comando: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

  5. No navegador da Web com as Ferramentas de Desenvolvimento do Chrome, observe as informações sobre a solicitação intercetada e a resposta da API na nuvem.

    Captura de tela de um navegador da Web com ferramentas de inspeções do Dev Proxy mostrando a solicitação intercetada com URLs de API na nuvem.

    Nota

    Observe que tanto a URL de solicitação gravada quanto o cabeçalho do host mostram a URL da API de nuvem.

  6. Feche o túnel de desenvolvimento e pare o Dev Proxy pressionando Ctrl+C em suas respetivas sessões na linha de comando.

Resumo

Usando o Dev Proxy e os túneis de desenvolvimento, você pode inspecionar as solicitações de API que os serviços de nuvem emitem para APIs de nuvem. Você pode usar as ferramentas de inspeção de túneis de desenvolvimento ou o DevToolsPlugin do Dev Proxy para inspecionar as solicitações. Ambas as ferramentas mostram as informações sobre as solicitações intercetadas, incluindo a URL, cabeçalhos e corpo, e a resposta da API na nuvem. Usando o Dev Proxy e os túneis de desenvolvimento, você pode entender melhor como os serviços de nuvem interagem com APIs de nuvem e solucionar problemas de forma mais eficaz.

Próximos passos

Saiba mais sobre o RewritePlugin.

RewritePlugin