Tutorial: Menambahkan koneksi database MySQL di Azure Static Web Apps (pratinjau)
Dalam tutorial ini, Anda mempelajari cara menyambungkan database Server Fleksibel Azure Database for MySQL ke aplikasi web statis Anda. Setelah dikonfigurasi /data-api
, Anda dapat membuat permintaan REST atau GraphQL ke titik akhir bawaan untuk memanipulasi data tanpa harus menulis kode backend.
Demi kesederhanaan, tutorial ini menunjukkan kepada Anda cara menggunakan database Azure untuk tujuan pengembangan lokal, tetapi Anda juga dapat menggunakan server database lokal untuk kebutuhan pengembangan lokal Anda.
Catatan
Tutorial ini menunjukkan cara menggunakan Server Fleksibel Azure Database for MySQL. Jika Anda ingin menggunakan database lain, lihat tutorial Azure Cosmos DB, Azure SQL, atau PostgreSQL .
Dalam tutorial ini, Anda mempelajari caranya:
- Menautkan database Azure Database for MySQL ke aplikasi web statis Anda
- Membuat, membaca, memperbarui, dan menghapus data
Prasyarat
Untuk menyelesaikan tutorial ini, Anda harus memiliki database Azure Database for MySQL dan aplikasi web statis yang sudah ada. Selain itu, Anda perlu menginstal Azure Data Studio.
Sumber daya | Deskripsi |
---|---|
Server Flexible Azure Database for MySQL | Jika Anda perlu membuat database, ikuti langkah-langkah dalam panduan membuat Server Fleksibel Azure Database for MySQL. Jika Anda berencana menggunakan autentikasi string koneksi untuk aplikasi web Anda, pastikan Anda membuat database dengan autentikasi MySQL. Anda dapat mengubah pengaturan ini nanti jika Anda ingin menggunakan identitas terkelola nanti. |
Aplikasi web statis yang ada | Jika Anda belum memilikinya, ikuti langkah-langkah dalam panduan memulai untuk membuat aplikasi web statis Tanpa Kerangka Kerja . |
Azure Data Studio, dengan ekstensi MySQL | Jika Anda belum menginstal Azure Data Studio, ikuti panduan untuk menginstal Azure Data Studio, dengan ekstensi MySQL. Atau, Anda dapat menggunakan alat lain untuk mengkueri database MySQL Anda, seperti MySQL Workbench. |
Mulailah dengan mengonfigurasi database Anda untuk bekerja dengan fitur koneksi database Azure Static Web Apps.
Mengonfigurasi konektivitas database
Azure Static Web Apps harus memiliki akses jaringan ke database Anda agar koneksi database berfungsi. Selain itu, untuk menggunakan database Azure untuk pengembangan lokal, Anda perlu mengonfigurasi database Anda untuk mengizinkan permintaan dari alamat IP Anda sendiri.
Buka Server Fleksibel Azure Database for MySQL Server Anda di portal Azure.
Di bawah bagian Pengaturan, pilih Jaringan.
Di bawah bagian Aturan firewall, pilih tombol Tambahkan alamat IP klien Anda saat ini. Langkah ini memastikan bahwa Anda dapat menggunakan database ini untuk pengembangan lokal Anda.
Di bawah bagian Aturan firewall, pilih kotak centang Izinkan akses publik dari layanan Azure apa pun dalam Azure ke server ini. Langkah ini memastikan bahwa sumber daya Static Web Apps yang Anda sebarkan dapat mengakses database Anda.
Pilih Simpan.
Mendapatkan string koneksi database untuk pengembangan lokal
Untuk menggunakan database Azure Anda untuk pengembangan lokal, Anda perlu mengambil string koneksi database Anda. Anda dapat melewati langkah ini jika Anda berencana menggunakan database lokal untuk tujuan pengembangan.
Buka Server Fleksibel Azure Database for MySQL Server Anda di portal Azure.
Di bawah bagian Pengaturan, pilih Koneksi.
Di bagian Koneksi dari aplikasi Anda, pilih ADO.NET string koneksi dan sisihkan di editor teks.
{your_password}
Ganti tempat penampung di string koneksi dengan kata sandi Anda.{your_database}
Ganti tempat penampung dengan namaMyTestPersonDatabase
database . Anda akan membuatMyTestPersonDatabase
langkah-langkah mendatang.Hapus bagian SslMode dan SslCa dari string koneksi karena ini memerlukan langkah tambahan dan ditujukan untuk tujuan produksi.
Membuat data sampel
Buat tabel sampel dan seed dengan data sampel agar sesuai dengan tutorial. Di sini, Anda dapat menggunakan Azure Data Studio, tetapi Anda dapat menggunakan MySQL Workbench atau alat lainnya.
Di Azure Data Studio, buat koneksi ke Server Fleksibel Azure MySQL Anda.
Klik kanan server Anda, dan buat database baru. Masukkan
MyTestPersonDatabase
sebagai nama database, dan pilih charset menjadiutf8mb4
dan kolase .utf8mb4_0900_ai_ci
Klik kanan server Anda dan pilih Refresh.
Klik kanan database Anda
MyTestPersonDatabase
dan pilih Kueri Baru. Jalankan skrip berikut untuk membuat tabel baru bernamaMyTestPersonTable
.CREATE TABLE MyTestPersonTable ( Id INT AUTO_INCREMENT NOT NULL, Name VARCHAR(25) NULL, PRIMARY KEY (Id) );
Jalankan skrip berikut untuk menambahkan data ke
MyTestPersonTable
dalam tabel.INSERT INTO MyTestPersonTable (Name) VALUES ('Sunny'); INSERT INTO MyTestPersonTable (Name) VALUES ('Dheeraj');
Klik kanan tabel Anda
MyTestPersonTable
dan pilih Pilih 1000 Teratas untuk memverifikasi ada data di database Anda.
Mengonfigurasi aplikasi web statis
Sisa tutorial ini berfokus pada pengeditan kode sumber aplikasi web statis Anda untuk menggunakan koneksi database secara lokal.
Penting
Langkah-langkah berikut mengasumsikan Anda bekerja dengan aplikasi web statis yang dibuat dalam panduan memulai. Jika Anda menggunakan proyek yang berbeda, pastikan untuk menyesuaikan perintah git berikut agar sesuai dengan nama cabang Anda.
Beralih ke cabang
main
.git checkout main
Sinkronkan versi lokal Anda dengan apa yang ada di GitHub dengan menggunakan
git pull
.git pull origin main
Membuat file konfigurasi database
Selanjutnya, buat file konfigurasi yang digunakan aplikasi web statis Anda untuk berinteraksi dengan database.
Buka terminal Anda dan buat variabel baru untuk menahan string koneksi Anda. Sintaksis tertentu dapat bervariasi tergantung pada jenis shell yang Anda gunakan.
export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
Pastikan untuk mengganti
<YOUR_CONNECTION_STRING>
dengan nilai string koneksi yang Anda sisihkan di editor teks.Gunakan npm untuk menginstal atau memperbarui CLI Static Web Apps. Pilih perintah mana yang terbaik untuk situasi Anda.
Untuk menginstal, gunakan
npm install
.npm install -g @azure/static-web-apps-cli
Untuk memperbarui, gunakan
npm update
.npm update
swa db init
Gunakan perintah untuk menghasilkan file konfigurasi database.swa db init --database-type mysql
Perintah
init
membuat file staticwebapp.database.config.json di folder swa-db-connections .Tempelkan dalam sampel ini ke dalam file staticwebapp.database.config.json yang Anda buat.
{
"$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
"data-source": {
"database-type": "mysql",
"options": {
"set-session-context": false
},
"connection-string": "@env('DATABASE_CONNECTION_STRING')"
},
"runtime": {
"rest": {
"enabled": true,
"path": "/rest"
},
"graphql": {
"allow-introspection": true,
"enabled": true,
"path": "/graphql"
},
"host": {
"mode": "production",
"cors": {
"origins": ["http://localhost:4280"],
"allow-credentials": false
},
"authentication": {
"provider": "StaticWebApps"
}
}
},
"entities": {
"Person": {
"source": "MyTestPersonTable",
"permissions": [
{
"actions": ["*"],
"role": "anonymous"
}
]
}
}
}
Sebelum melanjutkan ke langkah berikutnya, tinjau tabel berikut yang menjelaskan berbagai aspek file konfigurasi. Untuk dokumentasi lengkap tentang file konfigurasi, lihat dokumentasi Data API Builder.
Fitur | Penjelasan |
---|---|
Koneksi database | Dalam pengembangan, runtime membaca string koneksi dari nilai string koneksi dalam file konfigurasi. Meskipun Anda dapat menentukan string koneksi langsung dalam file konfigurasi, praktik terbaiknya adalah menyimpan string koneksi dalam variabel lingkungan lokal. Anda dapat merujuk ke nilai variabel lingkungan dalam file konfigurasi melalui @env('DATABASE_CONNECTION_STRING') notasi. Nilai string koneksi ditimpa oleh Static Web Apps untuk situs yang disebarkan dengan informasi yang dikumpulkan saat Anda menyambungkan database Anda. |
Titik akhir API | Titik akhir REST tersedia melalui /data-api/rest saat titik akhir GraphQL tersedia melalui /data-api/graphql seperti yang dikonfigurasi dalam file konfigurasi ini. Anda dapat mengonfigurasi jalur REST dan GraphQL, tetapi awalannya /data-api tidak dapat dikonfigurasi. |
Keamanan API | Pengaturan memungkinkan runtime.host.cors Anda menentukan asal yang diizinkan yang dapat membuat permintaan ke API. Dalam hal ini, konfigurasi mencerminkan lingkungan pengembangan dan mengizinkan http://localhost:4280 daftar lokasi. |
Model entitas | Menentukan entitas yang diekspos melalui rute di REST API, atau sebagai jenis dalam skema GraphQL. Dalam hal ini, nama Orang, adalah nama yang diekspos ke titik akhir sementara entities.<NAME>.source adalah skema database dan pemetaan tabel. Perhatikan bagaimana nama titik akhir API tidak perlu identik dengan nama tabel. |
Keamanan entitas | Aturan izin yang tercantum dalam entity.<NAME>.permissions array mengontrol pengaturan otorisasi untuk entitas. Anda dapat mengamankan entitas dengan peran dengan cara yang sama seperti Anda mengamankan rute dengan peran. |
Catatan
Properti , , host.mode
dan graphql.allow-introspection
file connection-string
konfigurasi ditimpa saat Anda menyebarkan situs Anda. string koneksi Anda ditimpa dengan detail autentikasi yang dikumpulkan saat Anda menyambungkan database ke sumber daya Static Web Apps Anda. Properti host.mode
diatur ke production
, dan graphql.allow-introspection
diatur ke false
. Penimpaan ini memberikan konsistensi dalam file konfigurasi Anda di seluruh beban kerja pengembangan dan produksi Anda, sekaligus memastikan sumber daya Static Web Apps Anda dengan koneksi database yang diaktifkan aman dan siap produksi.
Dengan aplikasi web statis yang dikonfigurasi untuk menyambungkan ke database, Anda sekarang dapat memverifikasi koneksi.
Perbarui beranda
Ganti markup antara body
tag dalam file index.html dengan HTML berikut.
<h1>Static Web Apps Database Connections</h1>
<blockquote>
Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
<button id="list" onclick="list()">List</button>
<button id="get" onclick="get()">Get</button>
<button id="update" onclick="update()">Update</button>
<button id="create" onclick="create()">Create</button>
<button id="delete" onclick="del()">Delete</button>
</div>
<script>
// add JavaScript here
</script>
Memulai aplikasi secara lokal
Sekarang Anda dapat menjalankan situs web Anda dan memanipulasi data dalam database secara langsung.
Mulai aplikasi web statis dengan konfigurasi database.
swa start --data-api-location swa-db-connections
Sekarang setelah CLI dimulai, Anda dapat mengakses database Anda melalui titik akhir seperti yang didefinisikan dalam file staticwebapp.database.config.json .
Titik http://localhost:4280/data-api/rest/<ENTITY_NAME>
akhir menerima GET
permintaan , PUT
, POST
dan DELETE
untuk memanipulasi data dalam database.
Titik http://localhost:4280/data-api/graphql
akhir menerima kueri dan mutasi GraphQL.
Memanipulasi data
Perintah framework-agnostic berikut menunjukkan cara melakukan operasi CRUD penuh pada database Anda.
Output untuk setiap fungsi muncul di jendela konsol browser.
Buka alat pengembang dengan menekan CMD/CTRL + SHIFT + I dan pilih tab Konsol.
Mencantumkan semua item
Tambahkan kode berikut di antara script
tag di index.html.
async function list() {
const endpoint = '/data-api/rest/Person';
const response = await fetch(endpoint);
const data = await response.json();
console.table(data.value);
}
Dalam contoh ini:
- Permintaan default untuk
fetch
API menggunakan kata kerjaGET
. - Data dalam payload respons ditemukan di
value
properti .
async function list() {
const query = `
{
people {
items {
Id
Name
}
}
}`;
const endpoint = "/data-api/graphql";
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query: query })
});
const result = await response.json();
console.table(result.data.people.items);
}
Dalam contoh ini:
- Kueri GraphQL memilih
Id
bidang danName
dari database. - Permintaan yang diteruskan ke server memerlukan payload di mana
query
properti menyimpan definisi kueri. - Data dalam payload respons ditemukan di
data.people.items
properti .
Refresh halaman dan pilih tombol Daftar .
Jendela konsol browser sekarang menampilkan tabel yang mencantumkan semua rekaman dalam database.
ID | Nama |
---|---|
1 | Cerah |
2 | Dheeraj |
Berikut adalah cuplikan layar tampilannya di browser Anda.
Dapatkan berdasarkan ID
Tambahkan kode berikut di antara script
tag di index.html.
async function get() {
const id = 1;
const endpoint = `/data-api/rest/Person/Id`;
const response = await fetch(`${endpoint}/${id}`);
const result = await response.json();
console.table(result.value);
}
Dalam contoh ini:
- Titik akhir diakhiri dengan
/person/Id
. - Nilai ID ditambahkan ke akhir lokasi titik akhir.
- Data dalam payload respons ditemukan di
value
properti .
async function get() {
const id = 1;
const gql = `
query getById($id: Int!) {
person_by_pk(Id: $id) {
Id
Name
}
}`;
const query = {
query: gql,
variables: {
id: id,
},
};
const endpoint = "/data-api/graphql";
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(query),
});
const result = await response.json();
console.table(result.data.person_by_pk);
}
Dalam contoh ini:
- Kueri GraphQL memilih
Id
bidang danName
dari database. - Permintaan yang diteruskan ke server memerlukan payload di mana
query
properti menyimpan definisi kueri. - Data dalam payload respons ditemukan di
data.person_by_pk
properti .
Refresh halaman dan pilih tombol Dapatkan .
Jendela konsol browser sekarang menampilkan tabel yang mencantumkan satu rekaman yang diminta dari database.
ID | Nama |
---|---|
1 | Cerah |
Pembaruan
Tambahkan kode berikut di antara script
tag di index.html.
Static Web Apps mendukung kata PUT
kerja dan PATCH
. Permintaan PUT
memperbarui seluruh rekaman, sekaligus PATCH
melakukan pembaruan parsial.
async function update() {
const id = 1;
const data = {
Name: "Molly"
};
const endpoint = '/data-api/rest/Person/Id';
const response = await fetch(`${endpoint}/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
const result = await response.json();
console.table(result.value);
}
Dalam contoh ini:
- Titik akhir diakhiri dengan
/person/Id/
. - Nilai ID ditambahkan ke akhir lokasi titik akhir.
- Kata kerja REST adalah
PUT
memperbarui catatan database. - Data dalam payload respons ditemukan di
value
properti .
async function update() {
const id = 1;
const data = {
Name: "Molly"
};
const gql = `
mutation update($id: Int!, $item: UpdatePersonInput!) {
updatePerson(Id: $id, item: $item) {
Id
Name
}
}`;
const query = {
query: gql,
variables: {
id: id,
item: data
}
};
const endpoint = "/data-api/graphql";
const res = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(query)
});
const result = await res.json();
console.table(result.data.updatePerson);
}
Dalam contoh ini:
- Kueri GraphQL memilih
Id
bidang danName
dari database. - Objek
query
menyimpan kueri GraphQL diquery
properti . - Nilai argumen ke fungsi GraphQL diteruskan melalui
query.variables
properti . - Permintaan yang diteruskan ke server memerlukan payload di mana
query
properti menyimpan definisi kueri. - Data dalam payload respons ditemukan di
data.updatePerson
properti .
Refresh halaman dan pilih tombol Perbarui .
Jendela konsol browser sekarang menampilkan tabel yang menampilkan data yang diperbarui.
ID | Nama |
---|---|
1 | Molly |
Buat
Tambahkan kode berikut di antara script
tag di index.html.
async function create() {
const data = {
Name: "Pedro"
};
const endpoint = `/data-api/rest/Person/`;
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
const result = await response.json();
console.table(result.value);
}
Dalam contoh ini:
- Titik akhir diakhiri dengan
/person/
. - Kata kerja REST adalah
POST
menambahkan catatan database. - Data dalam payload respons ditemukan di
value
properti .
async function create() {
const data = {
Name: "Pedro"
};
const gql = `
mutation create($item: CreatePersonInput!) {
createPerson(item: $item) {
Id
Name
}
}`;
const query = {
query: gql,
variables: {
item: data
}
};
const endpoint = "/data-api/graphql";
const result = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(query)
});
const response = await result.json();
console.table(response.data.createPerson);
}
Dalam contoh ini:
- Kueri GraphQL memilih
Id
bidang danName
dari database. - Objek
query
menyimpan kueri GraphQL diquery
properti . - Nilai argumen ke fungsi GraphQL diteruskan melalui
query.variables
properti . - Permintaan yang diteruskan ke server memerlukan payload di mana
query
properti menyimpan definisi kueri. - Data dalam payload respons ditemukan di
data.updatePerson
properti .
Refresh halaman dan pilih tombol Buat .
Jendela konsol browser sekarang menampilkan tabel yang menampilkan rekaman baru dalam database.
ID | Nama |
---|---|
3 | Pedro |
Delete
Tambahkan kode berikut di antara script
tag di index.html.
async function del() {
const id = 3;
const endpoint = '/data-api/rest/Person/Id';
const response = await fetch(`${endpoint}/${id}`, {
method: "DELETE"
});
if(response.ok) {
console.log(`Record deleted: ${ id }`)
} else {
console.log(response);
}
}
Dalam contoh ini:
- Titik akhir diakhiri dengan
/person/Id/
. - Nilai ID ditambahkan ke akhir lokasi titik akhir.
- Kata kerja REST adalah
DELETE
menghapus rekaman database. - Jika penghapusan berhasil, properti payload
ok
respons adalahtrue
.
async function del() {
const id = 3;
const gql = `
mutation del($id: Int!) {
deletePerson(Id: $id) {
Id
}
}`;
const query = {
query: gql,
variables: {
id: id
}
};
const endpoint = "/data-api/graphql";
const response = await fetch(endpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(query)
});
const result = await response.json();
console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}
Dalam contoh ini:
- Kueri GraphQL memilih
Id
bidang dari database. - Objek
query
menyimpan kueri GraphQL diquery
properti . - Nilai argumen ke fungsi GraphQL diteruskan melalui
query.variables
properti . - Permintaan yang diteruskan ke server memerlukan payload di mana
query
properti menyimpan definisi kueri. - Data dalam payload respons ditemukan di
data.deletePerson
properti .
Refresh halaman dan pilih tombol Hapus .
Jendela konsol browser sekarang menampilkan tabel yang menampilkan respons dari permintaan penghapusan.
Rekaman dihapus: 3
Sekarang setelah Anda bekerja dengan situs Anda secara lokal, Anda sekarang dapat menyebarkannya ke Azure.
Menyebarkan situs Anda
Untuk menyebarkan situs ini ke produksi, Anda hanya perlu menerapkan file konfigurasi dan mendorong perubahan Anda ke server.
Tambahkan perubahan file untuk dilacak.
git add .
Terapkan perubahan konfigurasi.
git commit -am "Add database configuration"
Dorong perubahan Anda ke server.
git push origin main
Koneksi database ke aplikasi web statis Anda
Gunakan langkah-langkah berikut untuk membuat koneksi antara instans Static Web Apps situs Anda dan database Anda.
Buka aplikasi web statis Anda di portal Azure.
Di bagian Pengaturan, pilih Koneksi database.
Di bawah bagian Produksi, pilih tautan Tautkan database yang sudah ada.
Di jendela Tautkan database yang sudah ada, masukkan nilai berikut ini:
Properti Nilai Jenis Database Pilih jenis database Anda dari daftar dropdown. Langganan Pilih langganan Azure Anda dari daftar dropdown. Nama Sumber Daya Pilih nama server database yang memiliki database yang Anda inginkan. Nama Database Pilih nama database yang ingin Anda tautkan ke aplikasi web statis Anda. Jenis Autentikasi Pilih string Koneksi ion, dan masukkan nama pengguna dan kata sandi MySQL. Pilih OK.
Verifikasi bahwa database Anda tersambung ke sumber daya Static Web Apps Anda
Setelah Anda menyambungkan database ke aplikasi web statis dan situs selesai dibangun, gunakan langkah-langkah berikut untuk memverifikasi koneksi database.
Buka aplikasi web statis Anda di portal Azure.
Di bagian Esensial , pilih URL sumber daya Static Web Apps Anda untuk menavigasi ke aplikasi web statis Anda.
Pilih tombol Daftar untuk mencantumkan semua item.
Output harus menyerupai apa yang ditunjukkan dalam cuplikan layar ini.
Membersihkan sumber daya
Jika Anda ingin menghapus sumber daya yang dibuat selama tutorial ini, Anda perlu membatalkan tautan database dan menghapus data sampel.
Batalkan tautan database: Buka aplikasi web statis Anda di portal Azure. Di bawah bagian Pengaturan, pilih Koneksi database. Di samping database tertaut, pilih Tampilkan detail. Di jendela Detail koneksi database, pilih tombol Batalkan tautan .
Menghapus data sampel: Di database Anda, hapus tabel bernama
MyTestPersonTable
.