教學課程：在 Azure Static Web Apps 中新增 Azure SQL 資料庫連線 （預覽）

在本教學課程中，您將瞭解如何將 Azure SQL 資料庫連線到靜態 Web 應用程式。 設定之後，您可以對內 /data-api 建端點提出 REST 或 GraphQL 要求，以操作數據，而不需要撰寫後端程式代碼。

為了簡單起見，本教學課程說明如何針對本機開發目的使用 Azure 資料庫，但您也可以使用本機資料庫伺服器來進行本機開發需求。

在本教學課程中，您將了解：

必要條件

若要完成本教學課程，您必須擁有現有的 Azure SQL 資料庫和靜態 Web 應用程式。

首先，將資料庫設定為使用 Azure Static Web Apps 資料庫連線功能。

設定資料庫連線能力

Azure Static Web Apps 必須具有資料庫的網路存取權，資料庫連線才能運作。 此外，若要使用 Azure 資料庫進行本機開發，您必須設定資料庫以允許來自您自己的 IP 位址的要求。

1. 移至 Azure 入口網站 中的 Azure SQL Server。

2. 在 [安全性] 區段底下，選取 [網络]。

3. 在 [公用存取] 索引卷標的 [公用網络存取] 旁，選取 [選取的網络]。

4. 在 [ 防火牆規則] 區段底下，選取 [ 新增用戶端 IPv4 位址 ] 按鈕。 此步驟可確保您可以將此資料庫用於本機開發。

5. 在 [ 例外狀況] 區段底下，選取 [ 允許 Azure 服務和資源存取此伺服器 ] 複選框。 此步驟可確保已部署的 Static Web Apps 資源可以存取您的資料庫。

6. 選取儲存。

取得本機開發的資料庫 連接字串

若要使用 Azure 資料庫進行本機開發，您需要擷取資料庫的 連接字串。 如果您打算使用本機資料庫進行開發，您可以略過此步驟。

1. 移至 Azure 入口網站 中的 Azure SQL Server。

2. 在 [ 設定] 區段底下，選取 [ SQL 資料庫]。

3. 選取您為此教學課程建立的 SQL 資料庫。

4. 在 [ 設定] 區段中，選取 [連接字串]

5. 從 [ADO.NET [SQL 驗證] 方塊中，複製 連接字串，並將它放在文本編輯器中。

請務必將 {your_password} 連接字串 中的佔位元取代為您的密碼。

建立範例資料

建立範例數據表，並使用範例數據植入，以符合教學課程。

1. 在左側導覽視窗中，選取 [ 查詢編輯器]。

2. 使用您的 Entra ID 帳戶或伺服器的使用者名稱和密碼登入伺服器。

3. 執行下列腳本來建立名為 MyTestPersonTable的新數據表。

   CREATE TABLE [dbo].[MyTestPersonTable] (
       [Id] INT IDENTITY (1, 1) NOT NULL,
       [Name] VARCHAR (25) NULL,
       PRIMARY KEY (Id)
   );
   

4. 執行下列腳本，將數據新增至 MyTestPersonTable 數據表。

   INSERT INTO [dbo].[MyTestPersonTable] (Name)
   VALUES ('Sunny');
   
   INSERT INTO [dbo].[MyTestPersonTable] (Name)
   VALUES ('Dheeraj');
   

設定靜態 Web 應用程式

本教學課程的其餘部分著重於編輯靜態 Web 應用程式的原始程式碼，以在本機使用資料庫連線。

1. 切換至 main 分支。

   • Bash
   • PowerShell

   git checkout main
   

2. 使用 git pull同步處理本機版本與 GitHub 上的內容。

   • Bash
   • PowerShell

   git pull origin main
   

建立資料庫組態檔

接下來，建立靜態 Web 應用程式用來與資料庫介面的組態檔。

1. 開啟您的終端機，並建立新的變數來保存您的 連接字串。 特定語法可能會根據您使用的殼層類型而有所不同。

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   請務必將 取代 <YOUR_CONNECTION_STRING> 為您在文字編輯器中保留的連接字串值。

2. 使用 npm 安裝或更新 Static Web Apps CLI。 選取最適合您情況的命令。

   若要安裝，請使用 npm install。

   • Bash
   • PowerShell

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

   若要更新，請使用 npm update。

   • Bash
   • PowerShell

   npm update
   

3. swa db init使用 命令來產生資料庫組態檔。

   • Bash
   • PowerShell

   swa db init --database-type mssql
   

   命令init會在 swa-db-connections 資料夾中建立staticwebapp.database.config.json檔案。

4. 將此範例貼入您產生的檔案 staticwebapp.database.config.json 。

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "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": "dbo.MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

繼續進行下一個步驟之前，請檢閱下表，說明組態檔的不同層面。 如需組態檔和功能的完整檔，例如專案層級安全性的關聯性和原則，請參閱 Data API Builder 檔。

將靜態 Web 應用程式設定為連線到資料庫後，您現在可以確認連線。

更新首頁

以下列 HTML 取代index.html檔案中標記之間的body標記。

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

在本機啟動應用程式

現在您可以執行您的網站，並直接操作資料庫中的數據。

1. 使用資料庫組態啟動靜態 Web 應用程式。

   swa start --data-api-location swa-db-connections
   

現在，CLI 已啟動，您可以透過 staticwebapp.database.config.json 檔案中所定義的端點來存取資料庫。

操作資料

下列與架構無關的命令示範如何在您的資料庫上執行完整的 CRUD 作業。

每個函式的輸出會出現在瀏覽器的控制台視窗中。

按 CMD/CTRL + SHIFT + I 開啟開發人員工具，然後選取 [控制台] 索引標籤。

列出所有專案

在 index.html 中的script標記之間新增下列程序代碼。

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

重新整理頁面，然後選取 [ 列表] 按鈕。

瀏覽器的主控台視窗現在會顯示列出資料庫中所有記錄的數據表。

以下是瀏覽器看起來應該像的螢幕快照。

依識別碼取得

在 index.html 中的script標記之間新增下列程序代碼。

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

重新整理頁面，然後選取 [ 取得] 按鈕。

瀏覽器的控制台視窗現在會顯示數據表，其中列出從資料庫要求的單一記錄。

更新

在 index.html 中的script標記之間新增下列程序代碼。

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

重新整理頁面，然後選取 [ 更新] 按鈕。

瀏覽器的主控台視窗現在會顯示顯示更新資料的數據表。

建立​​

在 index.html 中的script標記之間新增下列程序代碼。

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

重新整理頁面，然後選取 [ 建立] 按鈕。

瀏覽器的主控台視窗現在會顯示資料表，其中顯示資料庫中的新記錄。

刪除

在 index.html 中的script標記之間新增下列程序代碼。

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

重新整理頁面，然後選取 [ 刪除] 按鈕。

瀏覽器的主控台視窗現在會顯示資料表，其中顯示來自刪除要求的回應。

記錄已刪除：3

既然您已在本機使用您的網站，您現在可以將其部署至 Azure。

部署您的網站

若要將此月臺部署至生產環境，您只需認可組態檔並將變更推送至伺服器即可。

1. 新增要追蹤的檔案變更。

   git add .
   

2. 認可設定變更。

   git commit -am "Add database configuration"
   

3. 將您的變更推送至伺服器。

   git push origin main
   

將資料庫連線到靜態 Web 應用程式

使用下列步驟來建立月臺和資料庫靜態 Web Apps 實例之間的連線。

1. 在 Azure 入口網站中開啟您的靜態 Web 應用程式。

2. 在 [設定] 區段中，選取 [資料庫連線]。

3. 在 [生產] 區段下，選取 [鏈接現有的資料庫連結]。

4. 在 [ 鏈接現有的資料庫] 視窗中，輸入下列值：

   屬性	值
   資料庫類型	從下拉式清單中選取您的資料庫類型。
   訂用帳戶	從下拉式清單中選取您的 Azure 訂用帳戶。
   資源群組	選取或建立資料庫的資源群組。
   資源名稱	選取具有所需資料庫的資料庫伺服器名稱。
   資料庫名稱	選取您要連結至靜態 Web 應用程式的資料庫名稱。
   驗證類型	選取 [連接字串]，然後輸入 Azure SQL 使用者名稱和密碼。

5. 選取 [確定]。

確認您的資料庫已連線到靜態 Web Apps 資源

將資料庫連線到靜態 Web 應用程式並完成網站建置之後，請使用下列步驟來驗證資料庫連線。

1. 在 Azure 入口網站中開啟您的靜態 Web 應用程式。

2. 在 [ 基本資訊] 區段中，選取 靜態 Web Apps 資源的 URL ，以流覽至靜態 Web 應用程式。

3. 選取 [ 清單 ] 按鈕以列出所有專案。

   輸出應該類似此螢幕快照中顯示的內容。

   

清除資源

如果您想要移除本教學課程期間建立的資源，您必須取消連結資料庫並移除範例數據。

1. 取消連結資料庫：在 Azure 入口網站 中開啟靜態 Web 應用程式。 在 [ 設定] 區段底下，選取 [ 資料庫連線]。 在鏈接的資料庫旁邊，選取 [ 檢視詳細數據]。 在 [ 資料庫連線詳細數據 ] 視窗中，選取 [ 取消連結 ] 按鈕。

2. 拿掉範例數據：在您的資料庫中，刪除名為 的 MyTestPersonTable數據表。

下一步