Dukungan API di Azure Static Web Apps dengan Azure API Management
Azure API Management adalah layanan yang memungkinkan Anda membuat gateway API modern untuk layanan back end yang ada.
Saat Anda menautkan layanan Azure API Management ke aplikasi web statis Anda, permintaan apa pun ke aplikasi web statis Anda dengan rute yang dimulai dengan /api diproksikan ke rute yang sama di layanan Azure API Management.
Layanan Azure API Management dapat ditautkan ke beberapa aplikasi web statis secara bersamaan. Produk API Management dibuat untuk setiap aplikasi web statis yang ditautkan. API apa pun yang ditambahkan ke produk tersedia untuk aplikasi web statis terkait.
Semua tingkat harga Azure API Management tersedia untuk digunakan dengan Azure Static Web Apps.
Opsi API untuk Static Web Apps mencakup layanan Azure berikut:
Lihat gambaran umum API untuk informasi selengkapnya.
Catatan
Integrasi dengan Azure API Management memerlukan paket Static Web Apps Standard.
Integrasi backend tidak didukung pada lingkungan permintaan penarikan Static Web Apps.
Prasyarat
Untuk menautkan instans manajemen API ke aplikasi web statis, Anda harus memiliki sumber daya Azure API Management yang ada dan aplikasi web statis.
| Sumber daya | Deskripsi |
|---|---|
| API Management Azure | Jika Anda belum memilikinya, ikuti langkah-langkah dalam panduan Membuat instans layanan Azure API Management baru. |
| Aplikasi web statis yang ada | Jika Anda belum memilikinya, ikuti langkah-langkah dalam panduan memulai untuk membuat aplikasi web statis Tanpa Kerangka Kerja . |
Contoh
Pertimbangkan instans Azure API Management yang ada yang mengekspos titik akhir melalui lokasi berikut.
https://my-api-management-instance.azure-api.net/api/getProducts
Setelah ditautkan, Anda dapat mengakses titik akhir yang sama melalui jalur api dari aplikasi web statis Anda, seperti yang ditunjukkan dalam URL contoh ini.
https://red-sea-123.azurestaticapps.net/api/getProducts
Kedua URL menunjuk ke titik akhir API yang sama. Titik akhir pada instans API Management harus memiliki /api awalan, karena Static Web Apps cocok dengan permintaan yang dibuat dan /api mencantumkan seluruh jalur ke sumber daya yang ditautkan.
Menautkan layanan Azure API Management
Menautkan instans API Management ke Static Web Apps
Untuk menautkan layanan Azure API Management sebagai backend API untuk aplikasi web statis, ikuti langkah-langkah berikut:
Di portal Azure, buka aplikasi web statis.
Pilih API dari menu navigasi.
Temukan lingkungan yang ingin Anda tautkan layanan API Management. Pilih Tautkan.
Di Jenis sumber daya backend, pilih API Management.
Di Langganan, pilih langganan yang berisi layanan Azure API Management yang ingin Anda tautkan.
Di Nama sumber daya, pilih layanan Azure API Management.
Pilih Tautkan.
Penting
Ketika proses penautan selesai, permintaan ke rute yang dimulai dengan /api diproksikan ke layanan Azure API Management Anda. Namun, tidak ada API yang diekspos secara default. Lihat Mengonfigurasi API untuk menerima permintaan untuk mengonfigurasi produk API Management untuk memungkinkan API yang ingin Anda gunakan.
Mengonfigurasi API untuk menerima permintaan
Azure API Management memiliki fitur produk yang menentukan bagaimana API muncul. Sebagai bagian dari proses penautan, layanan API Management Anda dikonfigurasi dengan produk bernama Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).
Untuk membuat API tersedia untuk aplikasi web statis tertaut Anda, tambahkan api ke produk.
Dalam instans API Management di portal, pilih tab Produk .
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)Pilih produk.Pilih + Tambahkan API.
Pilih API yang ingin Anda ekspos dari Static Web Apps Anda, lalu pilih tautan Pilih .
Proses penautan juga secara otomatis menerapkan konfigurasi berikut ke layanan API Management Anda:
- Produk yang terkait dengan aplikasi web statis tertaut dikonfigurasi untuk memerlukan langganan.
- Langganan API Management bernama
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>dibuat dan dilingkupkan ke produk dengan nama yang sama. - Kebijakan validasi-jwt masuk ditambahkan ke produk untuk hanya mengizinkan permintaan yang berisi token akses yang valid dari aplikasi web statis yang ditautkan.
- Aplikasi web statis tertaut dikonfigurasi untuk menyertakan kunci utama langganan dan token akses yang valid saat mem-proksi permintaan ke layanan API Management.
Penting
Mengubah kebijakan validasi-jwt atau meregenerasi kunci utama langganan mencegah aplikasi web statis Anda mem-proksi permintaan ke layanan API Management. Jangan ubah atau hapus langganan atau produk yang terkait dengan aplikasi web statis Anda saat ditautkan.
Membatalkan tautan layanan Azure API Management
Untuk membatalkan tautan layanan Azure API Management dari aplikasi web statis, ikuti langkah-langkah berikut:
Di portal Azure, buka aplikasi web statis.
Temukan lingkungan yang ingin Anda batalkan tautannya dan pilih nama layanan API Management.
Pilih Batalkan tautan.
Ketika proses pembatalan tautan selesai, permintaan ke rute yang dimulai dengan /api/ tidak lagi diproksikan ke layanan API Management Anda.
Catatan
Produk api Management dan langganan yang terkait dengan aplikasi web statis yang ditautkan tidak dihapus secara otomatis. Anda dapat menghapusnya dari layanan API Management.
Pemecahan Masalah
Jika API tidak terkait dengan produk API Management yang dibuat untuk sumber daya Static Web Apps, mengakses /api rute di aplikasi web statis Anda mengembalikan kesalahan berikut dari manajemen API.
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
Untuk mengatasi kesalahan ini, konfigurasikan API yang ingin Anda ekspos dalam Static Web Apps Anda ke produk yang dibuat untuknya, sebagaimana dirinci di bagian Konfigurasi API untuk menerima permintaan .