Membangun API dengan Azure Functions
Sekarang saatnya bagi Anda untuk membuat API untuk aplikasi daftar belanja Anda.
Azure Functions
Salah satu manfaat terbesar Azure Static Web Apps adalah menghosting aplikasi web Anda dan API yang dibangun dengan Azure Functions bersama-sama. Azure Static Web Apps secara global mendistribusikan aset statis aplikasi web Anda dan menghosting API Anda di Azure Functions. Dengan penyiapan ini, Anda mendapatkan ketersediaan dan kecepatan yang disertakan dengan distribusi global aset aplikasi web Anda.
Apa yang tidak Anda dapatkan juga penting.
Anda tidak memerlukan server lengkap untuk front-end atau back-end Anda untuk mengonfigurasi dan memelihara. Dengan Azure Static Web Apps, Anda mencapai titik manis: Anda mendapatkan kemudahan menerbitkan aplikasi dan API Anda dengan konfigurasi dan pemeliharaan minimal.
Azure Functions melayani titik akhir rute Anda, tidak memerlukan server back-end penuh untuk mengonfigurasi atau memelihara, dan menyediakan peluasan dan penskalakan 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 Anda, yang dapat Anda temukan di tab Gambaran Umum di portal. API tersedia melalui URL yang sama ini dengan menambahkan /api ke URL.
API daftar belanja Anda
Aplikasi daftar belanja Anda memungkinkan orang mendapatkan, menambahkan, memperbarui, dan menghapus item dari daftar mereka. Jadi masuk akal bahwa API Anda harus memiliki titik akhir yang cocok dengan kebutuhan ini.
Berikut adalah empat titik akhir yang Anda buat:
| Metode | Titik akhir rute | Titik akhir API lengkap |
|---|---|---|
| DAPAT | products |
api/products |
| TIANG | products |
api/products |
| MELETAKKAN | products/:id |
api/products/:id |
| MENGHAPUS | products/:id |
api/products/:id |
Perhatikan bahwa permintaan HTTP GET Anda dirutekan ke api/products. 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 dapat menambahkan API dan menghubungkannya ke aplikasi front-end Anda. Repositori Anda memiliki folder api-starter yang berisi proyek Azure Functions yang tidak lengkap dan titik akhir HTTP untuk PUT, POST, dan DELETE produk Anda.
API kehilangan fungsi HTTP GET. Selesaikan API proyek Azure Functions dan tambahkan fungsi yang hilang. Kemudian, sambungkan API Anda ke aplikasi web front-end Anda.
Mempratinjau perubahan pada aplikasi web Anda
Sebelum membuat perubahan pada aplikasi, ada baiknya membuat cabang baru untuk perubahan. Karena Anda membuat beberapa perubahan untuk menyelesaikan API untuk aplikasi, Anda harus membuat cabang untuk perubahan ini.
Setelah membuat perubahan, Anda mungkin 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. Fitur ini memungkinkan Anda untuk membiarkan aplikasi web Anda berjalan dengan Azure Static Web Apps, tetapi juga melihat instans pratinjau kedua dengan hasil dari permintaan pull Anda.
Berkomunikasi antara aplikasi web dan API Anda
Saat Anda menjalankan API secara lokal dengan Azure Functions, API berjalan pada port 7071 secara default. Aplikasi web Anda berjalan pada port lokal yang berbeda. Saat aplikasi web Anda mencoba membuat permintaan HTTP dari portnya ke port API Anda 7071, permintaan tersebut disebut 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 secara otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API Anda di Azure menggunakan proksi terbalik. Proksi terbalik adalah apa yang memungkinkan aplikasi web dan API Anda muncul berasal dari domain web yang sama. Jadi Anda hanya perlu menyiapkan CORS saat menjalankan aplikasi secara lokal.
Langkah berikutnya
Sekarang Anda siap untuk membuat API dan mengonfigurasi titik akhir HTTP untuk aplikasi daftar belanja Anda.