Mengembangkan API data menggunakan Azure Static Web Apps

Aplikasi web statis adalah konsep dalam desain situs web yang telah menjadi populer. Mereka terdiri dari konten yang dikirim langsung ke browser pengguna yang tidak memerlukan kode apa pun untuk dijalankan di server. Aplikasi web statis terdiri dari HTML dan CSS. Mereka juga sering menyertakan kode JavaScript, yang dijalankan di sisi klien, bukan server. Pengembang web sering menemukan bahwa aplikasi web statis:

• Dapat dikembangkan dengan cepat dengan kerangka kerja seperti Bootstrap, Jekyll, dan AngularJS.
• Mudah diskalakan karena tidak ada perubahan status pada server.
• Mendorong pemisahan antara kode antarmuka pengguna dan fungsionalitas back-end.

Azure Static Web Apps adalah layanan di Azure yang dirancang untuk mempermudah pembuatan kode dan penyebaran aplikasi web statis ke Azure untuk produksi. Azure Static Web Apps mendukung penyebaran berkelanjutan dengan memantau repositori kode di GitHub atau Azure DevOps. Saat Anda membuat perubahan pada kode situs web, dan mendorong perubahan Anda ke repositori, Azure Static Web Apps menemukan perubahan dan secara otomatis membangun dan menyebarkan situs baru ke Azure. Segera, perubahan Anda tersedia untuk pengguna.

Karena Data API Builder (DAB) dirancang untuk bekerja dengan mulus dengan Azure Static Web Apps, mudah untuk menghosting API database Anda di layanan ini. Yang harus Anda lakukan adalah menggunakan file konfigurasi untuk memberi tahu DAB tentang instans Azure Static Web Apps Anda dan menyebarkannya ke repositori. Azure Static Web Apps akan menghosting API Anda dan pengguna dapat mulai memanggil metodenya.

Membuat Static Web App

Mulailah dengan menavigasi ke portal Microsoft Azure dan memilih Buat sumber daya. Di bilah pencarian, masukkan Static Web App. Saat kartu Static Web App muncul, pilih kartu tersebut lalu pilih Buat.

Selanjutnya, pilih Langganan Anda dan pilih Grup Sumber Daya yang sudah ada atau membuat yang baru. Di kotak teks Nama , masukkan nama deskriptif untuk aplikasi Anda. Anda perlu memilih jenis Paket. Untuk proyek pribadi, Anda dapat menggunakan paket Gratis , sementara untuk aplikasi produksi, paket Standar direkomendasikan.

Di bawah Detail penyebaran, tentukan jenis repositori yang berisi aplikasi Anda. Anda perlu masuk ke GitHub atau memilih repositori dan cabang di Azure DevOps. Terakhir, tinjau pengaturan Anda dengan memilih Tinjau + buat, lalu pilih Buat untuk menyelesaikan proses.

Membuat file konfigurasi penyusun API Data

Untuk menyebarkan API database Anda ke Azure Static Web Apps, Anda harus membuat file konfigurasi DAB dengan benar. Anda dapat menyelesaikan tugas ini dengan dua alat baris perintah:

• swa: Gunakan CLI ini untuk menginisialisasi file konfigurasi DAB baru.
• dab: Gunakan CLI ini untuk menambahkan satu atau beberapa database ke file.

Sebelum memulai, kloning repositori GitHub ke komputer lokal Anda, atau gunakan GitHub Codespaces untuk membuka prompt perintah di GitHub itu sendiri.

1. Untuk menginisialisasi file konfigurasi DAB di folder akar repositori, jalankan perintah berikut.

   swa db init --database-type "<database-type>"
   

   Ganti <database type> dengan server database Anda. Misalnya, jika database Anda dihosting di Azure SQL Database, gunakan mssql. Jika ada di MySQL, gunakan mysql.

2. Untuk menambahkan database ke file konfigurasi, jalankan perintah berikut.

   dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"
   

   Ganti <database-name> dengan nama deskriptif dan <schema>.<table> dengan skema dan nama tabel di database Anda.

Langkah-langkah ini membuat file konfigurasi di repositori bernama swa-db-connections/staticwebapp.database.config.json. Tinjau file ini sebelum Anda menerapkan perubahan pada repositori.

Mengonfigurasi koneksi ke database

Untuk mengonfigurasi koneksi ke database di aplikasi web statis Anda, mulailah dengan membuka aplikasi web statis di portal Microsoft Azure. Navigasi ke bagian Pengaturan dan pilih Koneksi database. Di bawah Produksi, pilih untuk menautkan database yang sudah ada. Pilih jenis database, grup sumber daya, dan nama database yang sesuai. Terakhir, pilih jenis autentikasi pilihan Anda dan tautkan database.

Memvalidasi akses ke API

Untuk memvalidasi akses ke API, mulailah dengan membuka aplikasi web statis yang Anda buat di portal Microsoft Azure. Buka bagian Esensial dan pilih URL untuk menelusuri situs web. Di bilah alamat browser, tambahkan /data-api ke URL dan tekan Enter.

Anda akan melihat halaman yang menunjukkan bahwa kontainer DAB sehat. Untuk menelusuri entitas dari database Anda, tambahkan /data-api/rest/ ke URL. Ini mengirimkan permintaan HTTP GET dan menampilkan respons JSON.