Bawa fungsi Anda sendiri ke Azure Static Web Apps

Azure Static Web Apps menyediakan integrasi API untuk memungkinkan Anda membangun aplikasi web ujung depan yang bergantung pada API backend untuk data dan layanan. Dua opsi integrasi API adalah: fungsi terkelola dan membawa backend Anda sendiri. Untuk informasi selengkapnya tentang perbedaan antara opsi ini, lihat gambaran umum.

Artikel ini menunjukkan cara menautkan aplikasi Azure Functions yang sudah ada ke sumber daya Azure Static Web Apps.

Catatan

Integrasi dengan Azure Functions memerlukan paket Static Web Apps Standard.

Integrasi backend tidak didukung pada lingkungan permintaan penarikan Static Web Apps.

Prasyarat

Untuk menautkan aplikasi fungsi ke aplikasi web statis, Anda harus memiliki sumber daya Azure Functions yang sudah ada dan aplikasi web statis.

Sumber daya	Deskripsi
Azure Functions	Jika Anda belum memilikinya, ikuti langkah-langkah dalam panduan Mulai menggunakan Azure Functions .
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 aplikasi Azure Functions yang sudah ada yang mengekspos titik akhir melalui lokasi berikut.

https://my-functions-app.azurewebsites.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 titik akhir menunjuk ke fungsi yang sama. Titik akhir pada aplikasi fungsi harus memiliki /api awalan, karena Static Web Apps cocok dengan permintaan yang dibuat dan /api menproksi seluruh jalur ke sumber daya yang ditautkan.

Menautkan aplikasi Azure Functions yang sudah ada

Menghapus fungsi terkelola dari sumber daya Static Web Apps Anda (jika ada)

Sebelum mengaitkan aplikasi Functions yang ada, Anda harus menyesuaikan konfigurasi aplikasi web statis terlebih dahulu untuk menghapus fungsi terkelola jika Anda memilikinya.

1. Atur nilai api_location ke string kosong ("") dalam file konfigurasi alur kerja.

Menautkan aplikasi Azure Functions ke sumber daya Static Web Apps

1. Membuka situs Static Web Apps Anda di portal Azure.

2. Dari menu Pengaturan, pilih API.

3. Dari baris Produksi , pilih Tautan untuk membuka jendela Tautkan Backend baru.

   Masukkan pengaturan berikut.

   Pengaturan	Nilai
   Jenis sumber daya backend	Pilih Aplikasi Fungsi.
   Langganan	Pilih nama langganan Azure Anda.
   Nama sumber daya	Pilih nama aplikasi Azure Functions.
   Slot backend	Pilih nama slot untuk Azure Function.

4. Pilih Tautkan.

Aplikasi Azure Functions sekarang dipetakan ke /api rute aplikasi web statis Anda.

Penting

Pastikan untuk mengatur nilai api_location ke string kosong ("") dalam file konfigurasi alur kerja sebelum menautkan aplikasi Functions yang ada. Selain itu, panggilan mengasumsikan bahwa aplikasi fungsi eksternal mempertahankan awalan rute default api . Banyak aplikasi menghapus awalan ini di host.json. Pastikan awalan diberlakukannya dalam konfigurasi, jika tidak, panggilan gagal.

Penyebaran

Anda bertanggung jawab untuk menyiapkan alur kerja penyebaran untuk aplikasi Azure Functions Anda.

Membatalkan tautan aplikasi Azure Functions

Membatalkan tautan aplikasi Functions dari Static Web Apps

Untuk membatalkan tautan aplikasi fungsi dari aplikasi web statis, ikuti langkah-langkah berikut:

1. Di portal Azure, buka aplikasi web statis.

2. Pilih API dari menu navigasi.

3. Temukan lingkungan yang ingin Anda batalkan tautannya dan pilih nama aplikasi fungsi.

4. Pilih Batalkan tautan.

Saat proses pembatalan tautan selesai, permintaan ke rute yang dimulai dengan /api tidak lagi diproksikan ke aplikasi Azure Functions Anda.

Catatan

Untuk mencegah secara tidak sengaja mengekspos aplikasi fungsi Anda ke lalu lintas anonim, IdP yang dibuat oleh proses penautan tidak dihapus secara otomatis. Anda dapat menghapus penyedia identitas bernama Azure Static Web Apps (Tertaut) dari pengaturan autentikasi aplikasi fungsi.

Menghapus autentikasi dari sumber daya Azure Functions

Untuk mengaktifkan aplikasi Azure Functions Anda untuk menerima lalu lintas anonim, ikuti langkah-langkah berikut untuk menghapus idP:

1. Di portal Azure, navigasikan ke sumber daya Azure Functions.

2. Pilih Autentikasi dari menu navigasi.

3. Dari daftar Penyedia identitas, hapus idP yang terkait dengan sumber daya Static Web Apps.

4. Pilih Hapus autentikasi untuk menghapus autentikasi dan mengizinkan lalu lintas anonim ke sumber daya Azure Functions Anda.

Aplikasi fungsi Anda sekarang dapat menerima lalu lintas anonim.

Batasan keamanan

• Autentikasi dan otorisasi: Jika kebijakan autentikasi dan otorisasi belum disiapkan di aplikasi Functions yang ada, maka aplikasi web statis memiliki akses eksklusif ke API. Untuk membuat aplikasi Functions Anda dapat diakses oleh aplikasi lain, tambahkan penyedia identitas lain atau ubah pengaturan keamanan untuk memungkinkan akses yang tidak diautentikasi.

  Catatan

  Jika Anda mengaktifkan autentikasi dan otorisasi di aplikasi Functions tertauta, penyedia Autentikasi dan otorisasi Azure App Service versi 2 harus digunakan.

• Aksesibilitas publik yang diperlukan: Aplikasi Functions yang ada tidak perlu menerapkan konfigurasi keamanan berikut.

  • Membatasi alamat IP aplikasi Functions.
  • Membatasi lalu lintas melalui tautan atau titik akhir layanan privat.

• Tombol akses fungsi: Jika fungsi Anda memerlukan kunci akses, Anda harus memberikan kunci dengan panggilan dari aplikasi statis ke API.

Batasan

• Hanya satu aplikasi Azure Functions yang tersedia untuk satu aplikasi web statis.
• Nilai api_location dalam konfigurasi alur kerja harus ditetapkan ke string kosong.
• Tidak didukung di lingkungan permintaan pull Static Web Apps.
• Meskipun aplikasi Azure Functions Anda mungkin merespons berbagai pemicu, aplikasi web statis hanya dapat mengakses fungsi melalui titik akhir Http.

Langkah berikutnya

Menambahkan API