Tutorial: Menambahkan koneksi database PostgreSQL di Azure Static Web Apps (pratinjau)

Dalam tutorial ini, Anda mempelajari cara menyambungkan server tunggal Azure Database for PostgreSQL atau database Server Fleksibel 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.

Dalam tutorial ini, Anda mempelajari caranya:

Prasyarat

Untuk menyelesaikan tutorial ini, Anda harus memiliki Server Fleksibel Azure Database for PostgreSQL yang sudah ada atau Server Tunggal dan aplikasi web statis. Selain itu, Anda perlu menginstal Azure Data Studio.

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.

1. Buka Server Azure Database for PostgreSQL Anda di portal Azure.

2. Jika Anda menggunakan Server Fleksibel Azure Database for PostgreSQL, di bawah bagian Pengaturan , pilih Jaringan. Jika Anda menggunakan Server Tunggal Azure Database for PostgreSQL, di bawah bagian Pengaturan, pilih Keamanan koneksi.

3. 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.

4. Di bawah bagian Aturan firewall, pilih kotak centang Izinkan akses publik dari layanan Azure apa pun dalam Azure ke server ini. Jika Anda menggunakan Server Tunggal Azure Database for PostgreSQL, tombol ini diberi label Izinkan akses ke layanan Azure. Langkah ini memastikan bahwa sumber daya Static Web Apps yang Anda sebarkan dapat mengakses database Anda.

5. 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.

1. Buka Server Azure Database for PostgreSQL Anda di portal Azure.

2. Di bawah bagian Pengaturan , pilih String koneksi.

3. Dari kotak ADO.NET, salin string koneksi dan sisihkan di editor teks.

4. {your_password} Ganti tempat penampung di string koneksi dengan kata sandi Anda.

5. {your_database} Ganti tempat penampung dengan nama MyTestPersonDatabasedatabase . Anda akan membuat MyTestPersonDatabase langkah-langkah mendatang.

6. Tambahkan Trust Server Certificate=True; ke string koneksi untuk menggunakan string koneksi ini untuk pengembangan lokal.

Membuat data sampel

Buat tabel sampel dan seed dengan data sampel agar sesuai dengan tutorial. Tutorial ini menggunakan Azure Data Studio, tetapi Anda dapat menggunakan PgAdmin atau alat lainnya.

1. Di Azure Data Studio, buat koneksi ke Server Azure Database for PostgreSQL Anda

2. Klik kanan server Anda, dan pilih Kueri Baru. Jalankan kueri berikut untuk membuat database bernama MyTestPersonDatabase.

   CREATE DATABASE "MyTestPersonDatabase";
   

3. Klik kanan server Anda, dan pilih Refresh.

4. Klik kanan Anda MyTestPersonDatabase dan pilih Kueri Baru. Jalankan kueri berikut untuk membuat tabel baru bernama MyTestPersonTable.

   CREATE TABLE "MyTestPersonTable" (
       "Id" SERIAL PRIMARY KEY,
       "Name" VARCHAR(25) NULL
   );
   

5. Jalankan kueri berikut untuk menambahkan data ke dalam tabel MyTestPersonTable .

   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Sunny');
   
   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Dheeraj');
   

Mengonfigurasi aplikasi web statis

Sisa tutorial ini berfokus pada pengeditan kode sumber aplikasi web statis Anda untuk menggunakan koneksi database secara lokal.

1. Beralih ke cabang main.

   • Bash
   • PowerShell

   git checkout main
   

2. Sinkronkan versi lokal Anda dengan apa yang ada di GitHub dengan menggunakan git pull.

   • Bash
   • PowerShell

   git pull origin main
   

Membuat file konfigurasi database

Selanjutnya, buat file konfigurasi yang digunakan aplikasi web statis Anda untuk berinteraksi dengan database.

1. Buka terminal Anda dan buat variabel baru untuk menahan string koneksi Anda. Sintaksis tertentu dapat bervariasi tergantung pada jenis shell yang Anda gunakan.

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   Pastikan untuk mengganti <YOUR_CONNECTION_STRING> dengan nilai string koneksi yang Anda sisihkan di editor teks.

2. 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
   

   npm install -g @azure/static-web-apps-cli
   

   Untuk memperbarui, gunakan npm update.

   npm update
   

   npm update
   

3. swa db init Gunakan perintah untuk menghasilkan file konfigurasi database.

   • Bash
   • PowerShell

   swa db init --database-type postgresql
   

   Perintah init membuat file staticwebapp.database.config.json di folder swa-db-connections .

4. Tempelkan sampel ini ke dalam file staticwebapp.database.config.json Anda buat.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "postgresql",
    "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 dan fungsionalitas seperti hubungan dan kebijakan untuk keamanan tingkat item, lihat dokumentasi Data API Builder.

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.

1. 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 ditentukan dalam file staticwebapp.database.config.json .

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);
}

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);
}

Refresh halaman dan pilih tombol Daftar .

Jendela konsol browser sekarang menampilkan tabel yang mencantumkan semua rekaman dalam database.

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);
}

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);
}

Refresh halaman dan pilih tombol Dapatkan .

Jendela konsol browser sekarang menampilkan tabel yang mencantumkan satu rekaman yang diminta dari database.

Pembaruan

Tambahkan kode berikut di antara script tag di index.html.

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);
}

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);
}

Refresh halaman dan pilih tombol Perbarui .

Jendela konsol browser sekarang menampilkan tabel yang menampilkan data yang diperbarui.

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);
}

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);
}

Refresh halaman dan pilih tombol Buat .

Jendela konsol browser sekarang menampilkan tabel yang menampilkan rekaman baru dalam database.

Hapus

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);
  }
}

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 }`);
}

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.

1. Tambahkan perubahan file untuk dilacak.

   git add .
   

2. Terapkan perubahan konfigurasi.

   git commit -am "Add database configuration"
   

3. Dorong perubahan Anda ke server.

   git push origin main
   

Menyambungkan database ke aplikasi web statis Anda

Gunakan langkah-langkah berikut untuk membuat koneksi antara instans Static Web Apps situs Anda dan database Anda.

1. Buka aplikasi web statis Anda di portal Azure.

2. Di bagian Pengaturan , pilih Koneksi database.

3. Di bawah bagian Produksi, pilih tautan Tautkan database yang sudah ada.

4. 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, dan masukkan nama pengguna dan kata sandi PostgreSQL. Untuk Server Tunggal PostgreSQL, jangan sertakan akhiran @servername .

5. 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.

1. Buka aplikasi web statis Anda di portal Azure.

2. Di bagian Esensial , pilih URL sumber daya Static Web Apps Anda untuk menavigasi ke aplikasi web statis Anda.

3. 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.

1. 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 .

2. Menghapus data sampel: Di database Anda, hapus tabel bernama MyTestPersonTable.

Langkah berikutnya