Memeriksa permintaan API yang dikeluarkan oleh layanan cloud

Sekilas
Tujuan: Memeriksa permintaan API layanan cloud secara lokal
Waktu: 20 menit
Plugins:RewritePlugin, DevToolsPlugin
Prasyarat:Menyiapkan Dev Proxy, Dev Tunnels

Saat Mengintegrasikan aplikasi dengan layanan cloud, salah satu tantangan yang mungkin Anda hadapi adalah memahami bagaimana layanan cloud berinteraksi dengan API yang digunakannya. Mampu memeriksa permintaan API sangat penting ketika Anda memecahkan masalah atau ketika Anda mencoba memahami cara kerja layanan cloud. Biasanya, ini menantang, karena Anda tidak memiliki akses ke runtime layanan cloud, dan Anda juga mungkin tidak memiliki akses ke alat pemantauan untuk API cloud. Dengan menggunakan Dev Proxy dan dev tunnel, Anda dapat memeriksa permintaan API yang dikeluarkan layanan cloud ke API cloud.

Penting

Sebelum melanjutkan, instal dev tunnels dan konfigurasikan alat untuk digunakan.

Cara layanan cloud memanggil API cloud

Saat Mengintegrasikan aplikasi dengan layanan cloud, layanan cloud akan memanggil API Anda di cloud. Diagram berikut mengilustrasikan skenario ini:

Untuk memeriksa permintaan API yang dikeluarkan oleh layanan cloud, Anda memerlukan akses ke alat pemantauan API cloud. Seringkali, Anda tidak memiliki akses ke alat-alat ini. Anda dapat mengatasi batasan ini, dengan menggunakan lingkungan penahapan. Namun, butuh waktu untuk menyiapkan dan memelihara lingkungan penahapan. Terlebih lagi, jika Anda tidak memiliki API cloud, Anda mungkin tidak dapat menyiapkan lingkungan penahapan sama sekali.

Memeriksa permintaan API menggunakan Dev Proxy dan terowongan dev

Dengan menggunakan Dev Proxy dan Dev Tunnel, Anda dapat menginspeksi permintaan API yang dikeluarkan oleh layanan cloud ke API cloud.

Daripada memanggil API cloud secara langsung, Anda mengonfigurasi layanan cloud untuk memanggil terowongan dev yang Anda jalankan di komputer lokal Anda (1). Anda mengonfigurasi dev tunnel untuk menggunakan header host yang disadap Dev Proxy. Setiap kali layanan cloud memanggil terowongan dev, layanan ini meneruskan permintaan ke Dev Proxy yang mencegatnya (2). Dengan menggunakan Dev Proxy RewritePlugin, Anda mengubah URL permintaan yang disadap, dan meneruskannya ke API cloud (3). API cloud memproses permintaan dan mengembalikan respons ke Dev Proxy (4). Dev Proxy meneruskan respons ke terowongan dev (5), yang meneruskannya ke layanan cloud (6). Karena permintaan dirutekan melalui komputer lokal Anda, Anda dapat memeriksa informasinya, termasuk URL, header, dan isi, dan respons dari API cloud.

Skenario

Katakanlah Anda ingin memeriksa permintaan API yang dikirimkan oleh layanan cloud ke API JSONPlaceholder demo yang terletak di https://jsonplaceholder.typicode.com. Dengan menggabungkan Dev Proxy dan dev tunnel, Anda dapat mencegat permintaan dan memeriksa informasinya.

Anda dapat memeriksa permintaan baik dengan alat inspeksi tunnel pengembangan, atau menggunakan DevToolsPlugin Proxy Pengembangan. Kedua alat menggunakan Chrome Dev Tools untuk menampilkan informasi tentang permintaan dan respons yang disadap. Ketika Anda menggunakan dev tunnels inspection tools, Anda melihat dev tunnel URL sebagai URL permintaan. Sebagai perbandingan, ketika Anda menggunakan Dev Proxy DevToolsPlugin, Anda melihat bagaimana Dev Proxy mencegat permintaan, menggunakan URL lokal atau yang ditulis ulang.

Memeriksa permintaan API menggunakan Dev Proxy, terowongan pengembangan, dan alat inspeksi terowongan pengembangan

Konfigurasikan Dev Proxy untuk mencegat permintaan ke https://jsonplaceholder.typicode.com dan http://jsonplaceholder.typicode.local:

File: devproxyrc.json
```
{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "RewritePlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "rewritePlugin"
    }
  ],
  "urlsToWatch": [
    "https://jsonplaceholder.typicode.com/*",
    "http://jsonplaceholder.typicode.local/*"
  ],
  "rewritePlugin": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.schema.json",
    "rewritesFile": "devproxy-rewrites.json"
  },
  "logLevel": "information",
  "newVersionNotification": "stable",
  "showSkipMessages": true
}
```
File konfigurasi menggunakan RewritePlugin untuk menulis ulang URL permintaan yang disadap. Ini juga mengonfigurasi Dev Proxy untuk mencegat permintaan dari URL https://jsonplaceholder.typicode.com dan http://jsonplaceholder.typicode.local.

Catatan

Meskipun tidak perlu menggunakan .local domain, ini adalah praktik yang baik yang membantu Anda membedakan antara permintaan nyata dan yang disadap. Perhatikan juga, bahwa untuk .local domain, Anda menggunakan protokol HTTP, bukan HTTPS. Dev tunnels tidak mendukung HTTPS untuk permintaan routing ke header host kustom di komputer lokal Anda, itulah mengapa Anda perlu menggunakan HTTP.

Buat file penulisan ulang bernama devproxy-rewrites.json yang mengubah URL permintaan yang disadap:

File: devproxy-rewrites.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rewriteplugin.rewritesfile.schema.json",
  "rewrites": [
    {
      "in": {
        "url": "^http://jsonplaceholder.typicode.local(.*)"
      },
      "out": {
        "url": "https://jsonplaceholder.typicode.com$1"
      }
    }
  ]
}

File penulisan ulang mengubah URL permintaan yang disadap dari http://jsonplaceholder.typicode.local menjadi https://jsonplaceholder.typicode.com.

Mulai Proksi Dev dengan menjalankan di baris perintah devproxy.
Mulai terowongan pengembangan dengan menjalankan di baris perintah devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.

Dengan menggunakan perintah ini, Anda membuka terowongan dev baru di komputer Anda. Anda memetakannya ke port 8000 tempat Dev Proxy mendengarkan permintaan masuk. Anda juga menentukan header host yang disadap Proksi Dev.
Perhatikan URL terowongan dev yang dapat Anda gunakan untuk mengonfigurasi layanan cloud untuk memanggil komputer lokal Anda, misalnya https://tunnel_id-8000.euw.devtunnels.ms.
Dalam peramban web, buka URL inspeksi terowongan pengembangan, misalnya https://tunnel_id-8000-inspect.euw.devtunnels.ms.
Simulasikan layanan cloud yang memanggil API cloud dengan menggunakan URL terowongan dev, dengan menjalankan di baris perintah: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.

Catatan

Perhatikan, bahwa nama host sesuai dengan URL terowongan dev di komputer Anda. Jalur cocok dengan jalur API yang ingin Anda periksa.
Perhatikan bagaimana Dev Proxy mencegat permintaan, dan meneruskannya ke API cloud, akhirnya mengembalikan respons ke klien.
Di browser web, perhatikan informasi tentang permintaan yang disadap dan respons dari API cloud.

Catatan

Perhatikan bahwa URL permintaan yang direkam adalah URL terowongan dev. Header host yang direkam adalah header host yang disadap Dev Proxy.
Tutup terowongan dev dan hentikan Dev Proxy dengan menekan Ctrl+C di sesi masing-masing di baris perintah.

Memeriksa permintaan API menggunakan Dev Proxy dan DevToolsPlugin

Cara lain untuk memeriksa permintaan API yang dikeluarkan oleh layanan cloud adalah dengan menggunakan DevToolsPlugin Proksi Dev. Perbedaan antara menggunakan DevToolsPlugin dan alat inspeksi terowongan pengembang adalah bahwa DevToolsPlugin menunjukkan bagaimana Dev Proxy mencegat permintaan, menggunakan baik URL lokal atau yang sudah ditulis ulang.

Mengonfigurasi Dev Proxy untuk menggunakan DevToolsPlugin untuk memeriksa permintaan API menggunakan URL yang disadap

Pertama, mari kita konfigurasikan Dev Proxy untuk memeriksa permintaan API cloud. Mari kita konfigurasikan DevToolsPlugin untuk menampilkan informasi tentang URL sebelum Dev Proxy menulis ulang.

Perbarui file konfigurasi Dev Proxy untuk menggunakan DevToolsPlugin:

File: devproxyrc.json

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

Catatan

Perhatikan, bahwa kita menambahkan DevToolsPlugin sebelum RewritePlugin. Dengan menambahkan DevToolsPlugin terlebih dahulu, itu menunjukkan informasi tentang permintaan yang disadap sebelum ditulis ulang.

Mulai Proksi Dev dengan menjalankan di baris perintah devproxy. Perhatikan bahwa Dev Proxy membuka jendela browser web dengan Chrome Dev Tools terlihat.
Mulai terowongan pengembangan dengan menjalankan di baris perintah devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simulasikan layanan cloud yang memanggil API cloud dengan menggunakan URL terowongan dev, dengan menjalankan di baris perintah: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
Di browser web dengan Chrome Dev Tools, perhatikan informasi tentang permintaan yang disadap dan respons dari API cloud.

Catatan

Perhatikan bahwa URL permintaan yang direkam adalah URL API cloud. Header host yang direkam adalah header host yang disadap Dev Proxy.
Tutup terowongan dev dan hentikan Dev Proxy dengan menekan Ctrl+C di sesi masing-masing di baris perintah.

Mengonfigurasi Dev Proxy untuk menggunakan DevToolsPlugin untuk memeriksa permintaan API menggunakan URL yang ditulis ulang

Selanjutnya, mari kita perbarui konfigurasi Dev Proxy untuk menampilkan informasi tentang URL yang ditulis ulang.

Perbarui file konfigurasi Dev Proxy dengan memindahkan DevToolsPlugin setelah RewritePlugin:

File: devproxyrc.json

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

Mulai Proksi Dev dengan menjalankan di baris perintah devproxy. Perhatikan bahwa Dev Proxy membuka jendela browser web dengan Chrome Dev Tools terlihat.
Mulai terowongan pengembangan dengan menjalankan di baris perintah devtunnel host --host-header jsonplaceholder.typicode.local --port-numbers 8000 --allow-anonymous.
Simulasikan layanan cloud yang memanggil API cloud dengan menggunakan URL terowongan dev, dengan menjalankan di baris perintah: curl https://tunnel_id-8000.euw.devtunnels.ms/posts/1.
Di browser web dengan Chrome Dev Tools, perhatikan informasi tentang permintaan yang disadap dan respons dari API cloud.

Catatan

Perhatikan bahwa URL permintaan yang direkam, dan header host menunjukkan URL API cloud.
Tutup terowongan dev dan hentikan Dev Proxy dengan menekan Ctrl+C di sesi masing-masing di baris perintah.

Ringkasan

Dengan menggunakan Dev Proxy dan dev tunnel, Anda dapat memeriksa permintaan API yang dikeluarkan layanan cloud ke API cloud. Anda dapat menggunakan alat inspeksi terowongan pengembang, atau Plugin DevTools Dev Proxy untuk memeriksa permintaan. Kedua alat menunjukkan informasi tentang permintaan yang disadap, termasuk URL, header, dan isi, dan respons dari API cloud. Dengan menggunakan Dev Proxy dan dev tunnel, Anda dapat lebih memahami bagaimana layanan cloud berinteraksi dengan API cloud, dan memecahkan masalah secara lebih efektif.

Langkah berikutnya

Pelajari selengkapnya tentang RewritePlugin.

RewritePlugin

Lihat juga

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-01-06