共用方式為

使用Mongoose搭配 Azure Static Web Apps 存取 Azure Cosmos DB 中的數據

  • 發行項

Mongoose 是Node.js最受歡迎的 ODM（對象文件對應）用戶端。 Mongoose 可讓您設計數據結構並強制執行驗證，並提供與支援 MongoDB API 的資料庫互動所需的所有工具。 Cosmos DB 支援必要的 MongoDB API，並可在 Azure 上作為後端伺服器選項使用。

必要條件

  • 一個 Azure 帳戶。 如果您沒有 Azure 訂用帳戶，請建立免費試用帳戶。
  • GitHub 帳戶。
  • Cosmos DB 無伺服器帳戶。 使用無伺服器帳戶時，您只需支付資源使用費用，並避免需要建立完整的基礎結構。

1.建立 Cosmos DB 無伺服器資料庫

完成下列步驟以建立Cosmos無伺服器 DB。

  1. 登入 Azure 入口網站。
  2. 選取 [建立資源]。
  3. 在搜尋方塊中輸入 Azure Cosmos DB 。
  4. 選取 [Azure Cosmos DB]。
  5. 選取 建立。
  6. 如果出現提示，請在 [適用於 MongoDB 的 Azure Cosmos DB API] 下選取 [建立]。
  7. 使用下列資訊設定您的 Azure Cosmos DB 帳戶：
    • 訂用帳戶：選擇您想要使用的訂用帳戶
    • 資源：選取 [新建]，並將名稱設定為 aswa-mongoose
    • 帳戶名稱：需要唯一值
    • 位置： 美國西部 2
    • 容量模式： 無伺服器 （預覽）
    • 版本： 4.0顯示建立新 Cosmos DB 實例表單的螢幕快照。
  8. 選取 [檢閱 + 建立]。
  9. 選取 建立。

建立程式需要幾分鐘的時間。 建立靜態 Web 應用程式之後，我們會回到資料庫來收集 連接字串。

2.建立靜態 Web 應用程式

本教學課程使用 GitHub 範本存放庫來協助您建立應用程式。

  1. 移至 入門範本。

  2. 選擇擁有者（如果使用主帳戶以外的組織）。

  3. 將您的存放庫 命名為wa-mongoose-tutorial。

  4. 選取 [從範本建立存放庫]。

  5. 返回 Azure 入口網站。

  6. 選取 [建立資源]。

  7. 在搜尋方塊中輸入 靜態 Web 應用程式 。

  8. 選取 [靜態 Web 應用程式]。

  9. 選取 建立。

  10. 使用下列資訊設定您的 Azure 靜態 Web 應用程式：

    • 訂用帳戶：選擇與之前相同的訂用帳戶
    • 資源群組：選取 aswa-mongoose
    • 名稱： aswa-mongoose-tutorial
    • 區域： 美國西部 2
    • 選取 [使用 GitHub 登入]
    • 如果系統提示您允許 Azure Static Web Apps 建立 GitHub Action 以啟用部署，請選取 [ 授權 ]
    • 組織：您的 GitHub 帳戶名稱
    • 存放庫： aswa-mongoose-tutorial
    • 分支： main
    • 建置預設：選擇 React
    • 應用程式位置： /
    • API 位置： api
    • 輸出位置： 組建已完成 Azure Static Web Apps 窗體

  11. 選取 [檢閱和建立]。

  12. 選取 建立。

  13. 建立程式需要一些時間;布建靜態 Web 應用程式之後，請選取 [移至資源 ]。

3.設定資料庫 連接字串

若要允許 Web 應用程式與資料庫通訊，資料庫 連接字串 會儲存為應用程式設定。 使用 process.env 物件Node.js可存取設定值。

  1. 選取 Azure 入口網站 左上角的 [首頁] （或返回 https://portal.azure.com）。
  2. 選取 [資源群組]。
  3. 選取 aswa-mongoose。
  4. 選取資料庫帳戶的名稱 - 其具有適用於 Mongo DB 的 Azure Cosmos DB API 類型。
  5. 在 [設定] 底下，選取 [連接字串]。
  6. 複製 [主要連接字串] 底下列出的 連接字串。
  7. 在階層連結中，選取 aswa-mongoose。
  8. 選取 aswa-mongoose-tutorial 以返回網站實例。
  9. 在 [設定] 底下，選取 [組態]。
  10. 選取 [新增 ] 並建立具有下列值的新應用程式設定：
    • 名稱： AZURE_COSMOS_CONNECTION_STRING
    • 值：<貼上您稍早複製的 連接字串>
  11. 選取 [確定]。
  12. 選取 [新增 ] 並建立具有下列資料庫名稱值的新應用程式設定：
    • 名稱： AZURE_COSMOS_DATABASE_NAME
    • 值： todo
  13. 選取 [確定]。
  14. 選取 [儲存]。

4.移至您的網站

您現在可以探索靜態 Web 應用程式。

  1. 在 Azure 入口網站 中，選取 [概觀]。
  2. 選取右上方顯示的 URL。
    1. 看起來會類似於 https://calm-pond-05fcdb.azurestaticapps.net。
  3. 選取 [ 請登入] 以查看您的工作清單。
  4. 選取 [ 授與同意 ] 以存取應用程式。
  5. 在標示為 [建立新清單] 的文字框中輸入名稱，然後選取 [儲存]，以建立新的清單來建立新的清單。
  6. 在標示為建立新項目並選取 [儲存] 的文字框中輸入標題，以建立新的工作。
  7. 確認工作已顯示（可能需要一點時間）。
  8. 選取 檢查，將工作標示為完成;工作會移至 頁面的 [完成專案 ] 區段。
  9. 重新整理頁面 以確認正在使用資料庫。

清除資源

如果您不打算繼續使用此應用程式，請使用下列步驟刪除資源群組：

  1. 返回 Azure 入口網站。
  2. 選取 [資源群組]。
  3. 選取 aswa-mongoose。
  4. 選取 [刪除資源群組]。
  5. 在文本框中輸入 aswa-mongoose 。
  6. 選取 [刪除]。

下一步

請前進到下一篇文章，以瞭解如何設定本機開發...

設定本機開發