編輯

共用方式為

在 Azure Static Web Apps 中裝載數據 API 產生器 （預覽）

  • 操作方式

部署指南順序中目前位置 （'Publish'） 的圖表。

只使用組態檔，在 Azure Static Web Apps 中快速裝載數據 API 產生器。 本指南包含整合數據 API 產生器與靜態 Web 應用程式的步驟。

在本指南中，逐步解說建置 DAB 組態檔、將檔案裝載為應用程式的一部分，然後在 Azure Static Web Apps 中使用資料庫連線。

必要條件

重要

Azure Static Web Apps 中使用資料庫連線的數據 API 產生器 （DAB） 支援目前為預覽狀態。 Azure Static Web Apps 會使用固定版本的 DAB 引擎，其可能會因最新穩定版本的 DAB 而有所不同。 若要存取最新的 DAB 功能，請考慮使用來自 GitHub、Microsoft Container Registry （Docker Hub） 或 NuGet 之最新版引擎的 DAB 替代主機。

  • 可從 Azure 尋址的現有支持資料庫。

建立靜態 Web 應用程式

若要開始，請使用 Azure 入口網站，在 GitHub 中使用 Web 應用程式建立新的 Azure 靜態 Web 應用程式。

  1. 登入 Azure 入口網站 （https://portal.azure.com）。

  2. 建立新的資源群組。 您將使用此資源群組來取得本指南中的所有新資源。

    Azure 入口網站中 [建立資源群組] 頁面 [基本] 索引卷標的螢幕快照。

    提示

    建議將資源群組命名為 msdocs-dab-swa 。 本指南中的所有螢幕快照都會使用此名稱。

  3. 建立 Azure 靜態 Web 應用程式。 使用這些設定來設定靜態 Web 應用程式。

    設置 價值
    資源群組 選取您稍早建立的資源群組
    名稱 輸入全域唯一名稱
    方案類型 為您的工作負載選取最佳選項
    來源 選取 GitHub
    GitHub 帳戶 設定可存取 Web 應用程式存放庫的 GitHub 帳戶
    組織 選取存放庫的父組織或使用者
    存放庫 選取存放庫名稱
    分支 選取主要分支

    Azure 入口網站中 [建立靜態 Web 應用程式] 頁面 [基本] 索引標籤的螢幕快照。

  4. 等候靜態 Web 應用程式部署完成。 GitHub Actions 工作流程會自動新增至您的存放庫，以在每次推送至主要分支時，將應用程式部署至 Azure Static Web Apps。

    注意

    此初始部署可能需要幾分鐘的時間。 您一律可以在 Azure 入口網站或存放庫中的 [GitHub Actions] 索引標籤中檢查部署的狀態。

  5. 在 Azure 入口網站中瀏覽至新的靜態 Web 應用程式。

  6. 在 [Essentials] 區段中，使用 URL 超鏈接瀏覽至執行中的 Web 應用程式。 確認應用程式如預期般執行。

新增 DAB 組態檔

現在，使用 DAB 和 SWA 命令行介面來建立新的 DAB 組態檔，並將它新增至 Web 應用程式存放庫。

  1. 在您選擇的整合式開發人員環境 （IDE） 中開啟 Web 應用程式的 GitHub 存放庫。

    提示

    您可以使用您想要的任何 IDE。 如果您想要在本機使用應用程式，您可以將存放庫複製到本機計算機。 如果您要在瀏覽器中工作，可以使用 GitHub Codespaces。 請確定 SWA 和 DAB CLI 已安裝在您的開發環境中。

  2. 在存放庫的根目錄中開啟終端機。

  3. 使用 SWA CLI 中的 swa db 命令，以使用指定的資料庫類型初始化新的 DAB 組態檔。 此命令會在 swa-db-connections 資料夾中建立名為 staticwebapp.database.config.json 的新檔案。

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

    重要

    某些資料庫類型在初始化時需要額外的組態設定。

  4. 使用 dab add 命令，將至少一個資料庫實體新增至組態。 設定每個實體以允許匿名使用者的所有許可權。 針對實體重複 dab add 次數。

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

  5. 開啟並檢閱 swa-db-connections/staticwebapp.database.config.json 檔案的內容。

  6. 將變更認可至存放庫，並將其推送至主要分支。 這會自動觸發 Web 應用程式的新部署。 等候這個最新的部署完成，再繼續進行本指南。

設定資料庫連線

接下來，在 Azure 入口網站中設定資料庫連線，以允許靜態 Web 應用程式存取資料庫。

  1. 在 Azure 入口網站中再次瀏覽至靜態 Web 應用程式。

  2. 在資源功能表的 [ 設定] 區段中，選取 [資料庫連線] 選項。 然後，選取 [連結 生產 環境的現有資料庫。

    Azure 入口網站 [Azure 靜態 Web Apps] 頁面中 [資料庫連線] 選項的螢幕快照。

  3. 在 [鏈接資料庫] 對話框中，使用這些設定來設定資料庫連線。

    設置 價值
    資料庫類型 選取您在建立 DAB 組態檔時所使用的相同資料庫類型
    資源群組 選取您稍早在本指南中建立的資源群組
    資源名稱 選取您要連結至靜態 Web 應用程式的資料庫資源
    資料庫名稱 輸入資料庫的名稱
    驗證類型 選取您想要使用的驗證類型

    Azure 入口網站 [Azure 靜態 Web Apps] 頁面中資料庫連線 [鏈接資料庫] 對話框的螢幕快照。

    提示

    我們建議使用不包含授權金鑰的連接字串。 請改用受控識別和角色型訪問控制來管理資料庫與主機之間的存取權。 如需詳細資訊，請參閱 使用受控識別的 Azure 服務。

測試數據 API 端點

最後，驗證靜態 Web 應用程式上是否提供資料 API 端點。

  1. 在 Azure 入口網站中再次瀏覽至靜態 Web 應用程式。

  2. 使用 [Essentials] 區段中的 [URL] 字段，再次流覽至靜態 Web 應用程式的網站。

  3. 流覽至目前執行中應用程式的 /data-api 路徑。 請注意，回應仍然表示 DAB 容器 狀況良好，。

    { Healthy }

  4. 流覽至目前執行中應用程式的 https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> 路徑。 這會發出該組實體 HTTP GET 要求。 觀察 JSON 回應。

清除資源

當您不再需要範例應用程式或資源時，請移除對應的部署和所有資源。

  1. 使用 Azure 入口網站流覽至 資源群組。

  2. 在 命令行中，選取 [刪除]。