Membuild API dengan Azure Functions
Sekarang saatnya bagi Anda untuk membuat API untuk aplikasi daftar belanja Anda.
Azure Functions
Salah satu keuntungan terbesar Azure Static Web Apps adalah bahwa layanan ini menghosting aplikasi web Anda dan API yang dibuild dengan Azure Functions bersama-sama! Azure Static Web Apps secara global mendistribusikan aset statis aplikasi web dan menghosting API Anda di Azure Functions. Dengan pengaturan ini, Anda mendapatkan ketersediaan dan kecepatan yang hadir dengan distribusi global aset aplikasi web Anda. Apa yang tidak Anda dapatkan juga penting.
Anda tidak perlu mengonfigurasi dan memelihara server lengkap untuk front-end atau back-end Anda. Fitur ini adalah spot manis untuk Azure Static Web Apps: Anda mendapatkan kemudahan menerbitkan aplikasi dan API Anda dengan konfigurasi dan pemeliharaan minimal.
Azure Functions melayani titik akhir rute Anda, tidak perlu mengonfigurasi atau memelihara server back-end penuh, dan menyediakan perluasan skala dan penskalaan otomatis berdasarkan permintaan. Fitur-fitur ini menjadikan Azure Functions mitra API yang bagus untuk aplikasi web daftar belanja Anda yang melayani aset statis.
Azure Static Web Apps menghasilkan URL unik untuk situs, yang dapat Anda temukan pada tab Ringkasan di portal. API tersedia melalui URL yang sama ini dengan menambahkan /api ke URL.
API daftar belanja Anda
Aplikasi daftar belanja memungkinkan orang mendapatkan, menambahkan, memperbarui, dan menghapus item dari daftar mereka. Jadi masuk akal bahwa API Anda memiliki titik akhir yang cocok dengan kebutuhan ini.
Berikut adalah empat titik akhir:
| Metode | Titik akhir rute | Titik akhir API penuh |
|---|---|---|
| DAPATKAN | products |
api/products |
| PENGUMUMAN | products |
api/products |
| TARUH | products/:id |
api/products/:id |
| MENGHAPUS | products/:id |
api/products/:id |
Perhatikan bahwa permintaan HTTP GET Anda dirutekan ke api/produk. Awalan api dicadangkan untuk titik akhir API Anda di aplikasi. Anda dapat menentukan rute lain agar sesuai dengan kebutuhan situs Anda, tetapi api selalu menunjuk ke aplikasi Azure Functions.
Membuat API untuk aplikasi web
Sejauh ini, Anda telah menggunakan kerangka kerja front-end. Segera, Anda menambahkan API dan menghubungkannya ke aplikasi front-end Anda. Repositori Anda memiliki proyek Api yang berisi proyek Azure Functions tidak lengkap dan titik akhir HTTP untuk PUT, POST, dan DELETE produk Anda. API tidak memiliki fungsi HTTP GET. Anda menyelesaikan API proyek Azure Functions dan menambahkan fungsi yang hilang, lalu menyambungkan API ke aplikasi web front-end Anda.
Pratinjau perubahan pada aplikasi web Anda
Sebelum membuat perubahan pada aplikasi, ada baiknya Anda membuat cabang baru untuk perubahan. Anda membuat beberapa perubahan saat menyelesaikan API untuk aplikasi, sehingga Anda membuat cabang untuk perubahan ini.
Setelah membuat perubahan, Anda ingin melihatnya berjalan sebelum memutuskan untuk menggabungkan perubahan. Setelah Anda membuat permintaan pull dari cabang baru Anda ke cabang utama , GitHub Action membangun aplikasi dan API Anda, dan menyebarkannya ke URL pratinjau. URL pratinjau ini memungkinkan Anda untuk membiarkan aplikasi web Anda berjalan dengan Azure Static Web Apps, tetapi juga melihat URL kedua dengan hasil dari permintaan pull Anda.
Mengonfigurasi komunikasi antara aplikasi web dan API Anda
Saat Anda menjalankan API secara lokal, API berjalan pada port 7071 secara default. Aplikasi web Anda berjalan di port lokal yang berbeda. Saat aplikasi web Anda mencoba membuat permintaan HTTP dari portnya ke port API Anda 7071, tindakan ini dikenal sebagai Berbagi Sumber Daya Lintas Asal (CORS). Browser Anda mencegah permintaan HTTP selesai kecuali server API mengizinkan permintaan untuk melanjutkan.
Saat menerbitkan ke Azure Static Web Apps, Anda tidak perlu khawatir tentang CORS. Azure Static Web Apps otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API di Azure menggunakan proksi terbalik. Proksi terbalik adalah apa yang memungkinkan aplikasi web dan API Anda tampak berasal dari domain web yang sama. Jadi, Anda hanya perlu mengatur CORS saat menjalankan secara lokal.
Langkah berikutnya
Sekarang, Anda siap untuk membuat API dan mengonfigurasi titik akhir HTTP untuk aplikasi daftar belanja.