Pembuat API Data Host di Azure Static Web Apps (pratinjau)

Diagram urutan panduan penyebaran termasuk lokasi ini, secara berurutan: Gambaran Umum, Rencana, Siapkan, Terbitkan, Pantau, dan Pengoptimalan. Lokasi 'Terbitkan' saat ini disorot.

Menghosting pembuat Data API dengan cepat di Azure Static Web Apps dengan hanya menggunakan file konfigurasi. Panduan ini mencakup langkah-langkah untuk mengintegrasikan penyusun API Data dengan aplikasi web statis.

Dalam panduan ini, telusuri langkah-langkah untuk membuat file konfigurasi DAB, menghosting file sebagai bagian dari aplikasi Anda, lalu gunakan koneksi database di Azure Static Web Apps.

Prasyarat

Penting

Dukungan untuk penyusun API Data (DAB) di Azure Static Web Apps menggunakan koneksi database sedang dalam pratinjau. Azure Static Web Apps menggunakan versi tetap mesin DAB yang dapat bervariasi dari versi stabil terbaru DAB. Untuk mengakses fitur DAB terbaru, pertimbangkan host alternatif untuk DAB menggunakan versi terbaru mesin dari GitHub, Microsoft Container Registry (Docker Hub), atau NuGet.

• Sebuah akun Azure dengan langganan aktif. Buat akun secara gratis.
• Azure Static Web Apps CLI. Instal CLI Static Web Apps (SWA).
• CLI pembangun API Data. Instal CLI Penyusun API Data (DAB).
• Database yang sudah ada dan didukung dapat diakses dari Azure.
• Aplikasi web yang ada di repositori GitHub yang dapat disebarkan ke Azure Static Web Apps.
  • Jika Anda tidak memiliki aplikasi web, buat repositori dengan aplikasi web dasar.

Membuat Static Web App

Untuk memulai, gunakan portal Microsoft Azure untuk membuat Azure Static Web App baru menggunakan aplikasi web di GitHub.

1. Masuk ke portal Microsoft Azure (https://portal.azure.com).

2. Membuat grup sumber daya baru. Anda akan menggunakan grup sumber daya ini untuk semua sumber daya baru dalam panduan ini.

   

   Petunjuk / Saran

   Sebaiknya beri nama grup sumber daya msdocs-dab-swa. Semua cuplikan layar dalam panduan ini menggunakan nama ini.

3. Membuat Azure Static Web App. Gunakan pengaturan ini untuk mengonfigurasi aplikasi web statis.

   Setting	Nilai
   grup Sumber Daya	Pilih grup sumber daya yang Anda buat sebelumnya
   Nama	Masukkan nama yang unik secara global
   Jenis rencana	Pilih opsi terbaik untuk beban kerja Anda
   Sumber	Pilih GitHub
   Akun GitHub	Mengonfigurasi akun GitHub yang memiliki akses ke repositori aplikasi web
   Organisasi	Pilih organisasi atau pengguna induk untuk repositori
   Repositori	Pilih nama repositori
   Cabang	Pilih cabang utama

   

4. Tunggu hingga penyebaran aplikasi web statis selesai. Alur kerja GitHub Actions secara otomatis ditambahkan ke repositori Anda yang akan menyebarkan aplikasi ke Azure Static Web Apps setiap kali Anda mendorong ke cabang utama.

   Nota

   Penyebaran awal ini dapat memakan waktu beberapa menit. Anda selalu dapat memeriksa status penyebaran di portal Microsoft Azure atau tab Tindakan GitHub di repositori Anda.

5. Navigasi ke aplikasi web statis baru di portal Microsoft Azure.

6. Di bagian Esensial , gunakan hyperlink URL untuk menavigasi ke aplikasi web yang sedang berjalan. Verifikasi bahwa aplikasi berjalan seperti yang diharapkan.

Menambahkan file konfigurasi DAB

Sekarang, gunakan antarmuka baris perintah DAB dan SWA untuk membuat file konfigurasi DAB baru dan menambahkannya ke repositori aplikasi web.

1. Buka repositori GitHub untuk aplikasi web Anda di lingkungan pengembang terintegrasi (IDE) pilihan Anda.

   Petunjuk / Saran

   Anda dapat menggunakan IDE apa pun yang Anda inginkan. Jika Anda ingin mengerjakan aplikasi secara lokal, Anda dapat mengkloning repositori ke komputer lokal Anda. Jika Anda lebih suka bekerja di browser, Anda dapat menggunakan GitHub Codespaces. Pastikan bahwa SWA dan DAB CLIs diinstal di lingkungan pengembangan Anda.

2. Buka terminal di direktori root repositori.

3. swa db Gunakan perintah dari SWA CLI untuk menginisialisasi file konfigurasi DAB baru menggunakan jenis database yang ditentukan. Perintah akan membuat file baru bernama staticwebapp.database.config.json di folder swa-db-connections .

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

   Penting

   Beberapa jenis database akan memerlukan pengaturan konfigurasi tambahan pada inisialisasi.

4. dab add Gunakan perintah untuk menambahkan setidaknya satu entitas database ke konfigurasi. Konfigurasikan setiap entitas untuk mengizinkan semua izin untuk pengguna anonim. Ulangi dab add sebanyak yang Anda suka untuk entitas Anda.

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

5. Buka dan tinjau konten file swa-db-connections/staticwebapp.database.config.json.

6. Terapkan perubahan Anda ke repositori dan dorong ke cabang utama. Ini akan secara otomatis memicu penyebaran baru aplikasi web. Tunggu hingga penyebaran terbaru ini selesai sebelum melanjutkan dengan panduan ini.

Konfigurasi koneksi basis data

Selanjutnya, konfigurasikan koneksi database di portal Microsoft Azure untuk memungkinkan aplikasi web statis mengakses database.

1. Navigasikan ke aplikasi web statis lagi di portal Microsoft Azure.

2. Pilih opsi Koneksi database di bagian Pengaturan pada menu sumber daya. Lalu, pilih Tautkan database yang ada untuk lingkungan produksi .

   

3. Dalam dialog Tautkan database , gunakan pengaturan ini untuk mengonfigurasi koneksi database.

   Setting	Nilai
   jenis database	Pilih jenis database yang sama dengan yang Anda gunakan saat membuat file konfigurasi DAB
   grup Sumber Daya	Pilih grup sumber daya yang Anda buat sebelumnya dalam panduan ini
   Nama sumber daya	Pilih sumber daya database yang ingin Anda tautkan ke aplikasi web statis
   Nama database	Masukkan nama database
   Jenis autentikasi	Pilih jenis autentikasi yang ingin Anda gunakan

   

   Petunjuk / Saran

   Sebaiknya gunakan string koneksi yang tidak menyertakan kunci otorisasi. Sebagai gantinya, gunakan identitas terkelola dan kontrol akses berbasis peran untuk mengelola akses antara database dan host Anda. Untuk informasi selengkapnya, lihat Layanan Azure yang menggunakan identitas terkelola.

Menguji titik akhir API data

Terakhir, validasi bahwa titik akhir API data tersedia di aplikasi web statis.

1. Navigasikan ke aplikasi web statis lagi di portal Microsoft Azure.

2. Gunakan bidang URL di bagian Esensial untuk menelusuri situs web aplikasi web statis lagi.

3. Arahkan ke /data-api path untuk aplikasi yang sedang berjalan saat ini. Amati bahwa respons masih menunjukkan bahwa kontainer DAB sehat.

   { Healthy }
   

   Nota

   Static Web Apps secara otomatis mengatur mode hosting runtime ke Production, menggantikan nilai apa pun dalam file konfigurasi. Akibatnya, fitur pengembang seperti Swagger dan Banana Cake Pop tidak tersedia di Static Web Apps.

4. Arahkan ke https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> path untuk aplikasi yang sedang berjalan. Ini mengeluarkan permintaan HTTP GET untuk sekumpulan entitas tersebut. Perhatikan respons JSON.

Membersihkan sumber daya

Saat Anda tidak lagi memerlukan aplikasi sampel atau sumber daya, hapus penyebaran yang bersangkutan dan semua sumber daya.

1. Navigasikan ke grup sumber daya menggunakan portal Microsoft Azure.

2. Di bilah perintah, pilih Hapus.