將 Node.js + MongoDB Web 應用程式部署到 Azure

  • 發行項

Azure App Service 使用 Linux 作業系統提供可高度擴充、自我修復的 Web 主機服務。 本教學課程示範如何在連線到 Azure Cosmos DB for MongoDB 資料庫的 Azure App Service 中建立安全的 Node.js 應用程。 完成後，Linux 上的 Azure App Service 上將會執行 Express.js 應用程式。

顯示如何將 Express.js 應用程式部署到 Azure App Service 以及如何將 MongoDB 資料裝載在 Azure Cosmos DB 內部的圖表。

本文假設您已熟悉 Node.js 開發，並已在本機安裝 Node 和 MongoDB。 您還需要具有有效訂用帳戶的 Azure 帳戶。 如果您沒有 Azure 帳戶，可以建立一個免費帳戶。

範例應用程式

若要繼續遵循本教學課程，請從存放庫 https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app 複製或下載應用程式範例。

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

如果您想要在本機執行應用程式，請執行下列動作：

  • 透過執行 npm install 安裝封裝相依性。
  • 將 .env.sample 檔案複製到 .env 並使用您的 MongoDB URL 填入 DATABASE_URL 值 (例如 mongodb://localhost:27017/)。
  • 使用 npm start 啟動應用程式。
  • 若要檢視應用程式，請瀏覽至 http://localhost:3000。

1. 建立 App Service 和 Azure Cosmos DB

在此步驟中，您會建立 Azure 資源。 本教學課程中使用的步驟會建立一組預設保護資源，其中包含 App Service 和 Azure Cosmos DB for MongoDB。 針對建立程序，您將指定：

  • Web 應用程式的 [名稱]。 此名稱會以 https://<app-name>.azurewebsites.net 的形式作為 Web 應用程式 DNS 名稱的一部分。
  • 要實際執行應用程式的區域。
  • 應用程式的執行階段堆疊。 您可以在此處選取要用於應用程式的 Node 版本。
  • 應用程式的主控方案。 這是定價層，其中包含應用程式的一組功能和調整限度。
  • 應用程式的 [資源群組]。 資源群組允許您將應用程式所需的所有 Azure 資源分組 (在邏輯容器中)。

登入 Azure 入口網站，遵循下列步驟建立您的 Azure App Service 資源。

步驟 1：在Azure 入口網站：

  1. 在 Azure 入口網站頂端的搜尋列中輸入「Web 應用程式資料庫」。
  2. 選取 [Marketplace] 標題下標示為 [Web 應用程式 + 資料庫] 的項目。 您也可以直接瀏覽至建立精靈。

螢幕擷取畫面顯示如何使用頂端工具列中的搜尋方塊在 Azure 入口網站中尋找 [Web 應用程式 + 資料庫] 建立精靈。

步驟 2： 在 [ 建立 Web 應用程式 + 資料庫 ] 頁面中，填寫表單，如下所示。

  1. [資源群組] → 選取 [新建] 並使用 msdocs-expressjs-mongodb-tutorial 的名稱。
  2. 區域 → 您附近的任何 Azure 區域。
  3. [名稱] → msdocs-expressjs-mongodb-XYZ，其中 XYZ 是任意三個隨機字元。 此名稱在整個 Azure 中必須是唯一的。
  4. [執行階段堆疊] → [Node 16 LTS]。
  5. 主控方案 → 基本。 當一切就緒時，您可以在之後擴大至生產定價層。
  6. 預設會選取 Azure Cosmos DB for MongoDB 作為資料庫引擎。 Azure Cosmos DB 是雲端原生資料庫，並且提供 100% 與 MongoDB 相容的 API。 記下為您產生的資料庫名稱 (<app-name>-database)。 稍後您將會用到此資訊。
  7. 選取 [檢閱 + 建立]。
  8. 驗證完成時，選取 [建立]。

螢幕擷取畫面顯示如何在 [Web 應用程式 + 資料庫] 精靈中設定新應用程式和資料庫。

步驟 3： 部署需要幾分鐘的時間才能完成。 在部署完成時，選取 [前往資源] 按鈕。 系統會將您直接帶至 App Service 應用程式，但會建立下列資源：

  • 資源群組 → 所有已建立資源的容器。
  • App Service 計畫 → 定義 App Service 的計算資源。 系統會建立基本層中的 Linux 方案。
  • App Service → 代表您的應用程式，並在 App Service 方案中執行。
  • 虛擬網路 → 與 App Service 應用程式整合，並隔離後端網路流量。
  • 私人端點 → 虛擬網路中資料庫資源的存取端點。
  • 網路介面 → 代表私人端點的私人 IP 位址。
  • Azure Cosmos DB for MongoDB → 只能從私人端點後方存取。 系統會為您在伺服器上建立資料庫和使用者。
  • 私人 DNS區域 → 啟用虛擬網路中 Azure Cosmos DB 伺服器的 DNS 解析。

顯示部署程序已完成的螢幕擷取畫面。

2. 設定資料庫連線

建立精靈已為您產生 MongoDB URI，但您的應用程式需要 DATABASE_URL 變數和 DATABASE_NAME 變數。 在此步驟中，您會使用應用程式所需的格式來建立應用程式設定。

步驟 1：在 [App Service] 頁面中，選取左側功能表中的 [組態]。

螢幕擷取畫面顯示如何在 App Service 中開啟 [組態] 頁面。

步驟 2：在 [組態] 頁面的 [應用程式設定] 索引標籤中，建立設定 DATABASE_NAME ：

  1. 選取 [新增應用程式設定]。
  2. 在 [名稱] 欄位中，輸入 DATABASE_NAME。
  3. 在 [值] 欄位中，從建立精靈輸入自動產生的資料庫名稱，看起來像 msdocs-expressjs-mongodb-XYZ-database。
  4. 選取 [確定]。

螢幕擷取畫面顯示如何查看自動產生的連接字串。

步驟 3：

  1. 捲動至頁面底部，然後選取連接字串 MONGODB_URI。 這是由建立精靈所產生。
  2. 在 [值] 欄位中，選取 [複製] 按鈕，並在文字檔中貼上值以供下一個步驟使用。 其使用 MongoDB 連接字串 URI 格式。
  3. 選取 [取消]。

螢幕擷取畫面顯示如何建立應用程式設定。

步驟 4：

  1. 使用步驟 2 中的相同步驟，建立名為 DATABASE_URL 的應用程式設定，並將值設定為您從 MONGODB_URI 連接字串複製的值 (亦即 mongodb://...)。
  2. 在頂端的功能表列上，選取 [儲存]。
  3. 出現提示時，請選取 [繼續]。

顯示如何在設定頁面中儲存設定的螢幕擷取畫面。

3. 部署範例程式碼

在此步驟中，您將使用 GitHub Actions 來設定 GitHub 部署。 這只是部署至 App Service 的許多方式之一，但也是在部署程序中持續整合的絕佳方式。 根據預設，您 GitHub 存放庫的每個 git push 都會開始建置和部署動作。

步驟 1： 在新瀏覽器視窗中：

  1. 使用您的 GitHub 帳戶登入。
  2. 瀏覽至 https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app。
  3. 選取 [分支]。
  4. 選取 [建立派生]。

螢幕擷取畫面顯示如何建立範例 GitHub 存放庫的分支。

步驟 2：在 GitHub 頁面中，按下 . 按鍵，在瀏覽器中開啟Visual Studio Code。

螢幕擷取畫面顯示如何在 GitHub 中開啟 Visual Studio Code 瀏覽器體驗。

步驟 3：在瀏覽器中的 Visual Studio Code 中，在總管中開啟config/connection.js。 在 getConnectionInfo 函式中，您會看到已使用稍早為 MongoDB 連線建立的應用程式設定 (DATABASE_URL 和 DATABASE_NAME)。

螢幕擷取畫面顯示瀏覽器中的 Visual Studio Code 和開啟的檔案。

步驟 4：回到 [App Service] 頁面的左側功能表中，選取 [部署中心]。

螢幕擷取畫面顯示如何在 App Service 中開啟 [部署中心]。

步驟 5： 在 [部署中心] 頁面中：

  1. 在 [來源] 中，選取 [GitHub]。 根據預設，系統會選取 GitHub Actions 作為組建提供者。
  2. 登入您的 GitHub 帳戶，並遵循提示來授權 Azure。
  3. 在 [組織] 中，選取您的帳戶。
  4. 在 [存放庫] 中，選取 msdocs-nodejs-mongodb-azure-sample-app。
  5. 在 [分支] 中，選取 [main]。
  6. 在最上層的功能表中，選取 [儲存]。 App Service 會將工作流程檔案認可至 .github/workflows 目錄中選擇的 GitHub 存放庫。

螢幕擷取畫面顯示如何使用 GitHub Actions 設定 CI/CD。

步驟 6： 在 [部署中心] 頁面中：

  1. 選取 [記錄] 。 已啟動部署執行。
  2. 在部署執行的記錄項目中，選取 [建置/部署記錄]。

螢幕擷取畫面顯示如何在 [部署中心] 中開啟部署記錄。

步驟 7： 您已前往 GitHub 存放庫，並查看 GitHub 動作正在執行。 工作流程檔案會定義兩個不同的階段：建置和部署。 等候 GitHub 執行到顯示 [完成] 狀態。 需要約 15 分鐘的時間。

顯示 GitHub 執行進行中的螢幕擷取畫面。

4. 瀏覽至應用程式

步驟 1：在 [App Service] 頁面中：

  1. 從左側功能表中選取 [概觀]。
  2. 選取應用程式的 URL。 您也可以直接瀏覽至 https://<app-name>.azurewebsites.net。

螢幕擷取畫面顯示如何從 Azure 入口網站啟動 App Service。

步驟 2： 將一些工作新增至清單。 恭喜，您正在 Azure App Service 中執行資料驅動的安全 Node.js 應用程式。

Express.js 應用程式在 App Service 中執行的螢幕擷取畫面。

5. 串流診斷記錄

Azure App Service 會擷取所有登入到主控台的訊息，以協助您診斷應用程式的問題。 樣本應用程式在其每個端點中輸出主控台記錄訊息，以展示此功能。 例如，get 端點會輸出一則關於從資料庫擷取到的工作數量訊息，如果發生問題，則會出現一則錯誤訊息。

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

步驟 1：在 [App Service] 頁面中：

  1. 從左側功能表中，選取 [App Service 記錄]。
  2. 在 [應用程式記錄] 下，選取 [檔案系統]。

螢幕擷取畫面顯示如何在 Azure 入口網站中啟用 App Service 的原生記錄。

步驟 2： 從左側功能表中，選取 [記錄資料流程]。 您會看到應用程式的記錄，包括平台記錄和來自容器內的記錄。

螢幕擷取畫面顯示如何在 Azure 入口網站中檢視記錄串流。

6. 使用 Kudu 檢查已部署的檔案

Azure App Service 提供名為 Kudu 的 Web 型診斷主控台，可讓您檢查 Web 應用程式的伺服器裝載環境。 使用 Kudu，您可以檢視已部署到 Azure 的檔案，檢閱應用程式的部署歷程，甚至在裝載環境中開啟 SSH 工作階段。

步驟 1：在 [App Service] 頁面中：

  1. 從左側功能表中，選取 [進階工具]。
  2. 選取 [執行]。 您也可以直接瀏覽至 https://<app-name>.scm.azurewebsites.net。

顯示如何瀏覽至 [App Service Kudu] 頁面的螢幕擷取畫面。

步驟 2： 在 Kudu 頁面中，選取 [ 部署]。

Kudu SCM 應用程式主畫面的螢幕擷取畫面，其中顯示有關裝載環境的不同可用資訊。

如果您已使用 Git 或 zip 部署將程式碼部署至 App Service，您會看到 Web 應用程式的部署歷程記錄。

顯示 App Service 應用程式部署記錄 (JSON 格式) 的螢幕擷取畫面。

步驟 3：返回至 Kudu 首頁，然後選取[網站 wwwroot]。

顯示選取 Site wwwroot 的螢幕擷取畫面。

您可以看到已部署的資料夾結構，然後按一下即可瀏覽和檢視檔案。

wwwroot 目錄中已部署檔案的螢幕擷取畫面。

7.清除資源

完成後，您可以刪除資源群組，以從 Azure 訂用帳戶中刪除所有資源。

步驟 1：在Azure 入口網站頂端的搜尋列中：

  1. 輸入資源群組名稱。
  2. 選取資源群組。

螢幕擷取畫面顯示如何在 Azure 入口網站中搜尋和前往資源群組。

步驟 2： 在 [資源群組] 頁面中，選取 [ 刪除資源群組]。

螢幕擷取畫面顯示 Azure 入口網站中 [刪除資源群組] 按鈕的位置。

步驟 3：

  1. 輸入您確認要刪除的資源群組名稱。
  2. 選取 [刪除]。

螢幕擷取畫面顯示 Azure 入口網站中刪除資源群組的確認對話方塊。 :

常見問題集

這設定會產生多少費用？

建立資源的定價如下：

  • App Service 方案是在基本層中建立，並可擴大或縮小。 請參閱 App Service 定價。
  • Azure Cosmos DB 伺服器會在單一區域中建立，並可散發至其他區域。 請參閱 Azure Cosmos DB 定價。
  • 除非您設定額外的功能 (例如對等互連)，否則虛擬網路不會產生費用。 請參閱 Azure 虛擬網路定價。
  • 私人 DNS 區域會產生少量費用。 請參閱 Azure DNS 定價。

如何使用其他工具連線到虛擬網路後方受保護的 Azure Cosmos DB 伺服器？

  • 若要從命令列工具進行基本存取，您可以從應用程式的 SSH 終端機執行 mongosh。 應用程式的容器未隨附在 mongosh 中，因此您必須手動安裝。 請記住，應用程式重新啟動後，已安裝的用戶端不會保存。
  • 若要從 MongoDB GUI 用戶端連線，您的機器必須位於虛擬網路內。 例如，該電腦可以是連線到其中一個子網路的 Azure VM，或內部部署網路中具有與 Azure 虛擬網路站對站 VPN 連線的電腦。
  • 若要透過入口網站中的 Azure Cosmos DB 管理頁面從 MongoDB 殼層連線，您的機器也必須位於虛擬網路內。 您可以改為針對本機電腦的 IP 位址開啟 Azure Cosmos DB 伺服器防火牆，但這會增加設定的攻擊面。

本機應用程式開發如何與 GitHub Actions 搭配運作？

以 App Service 自動產生的工作流程檔案為例，每個 git push 都會開始執行新的組建和部署。 從 GitHub 存放庫的本機複本，您會將所需的更新推送至 GitHub。 例如：

git add .
git commit -m "<some-message>"
git push origin main

為何 GitHub Actions 部署速度過慢？

App Service 自動產生的工作流程檔案會定義 build-then-deploy、two-job 執行。 由於每個作業都會在自己的清除環境中執行，因此工作流程檔案可確保 deploy 作業可以存取作業中的 build 檔案：

兩項作業程序花費的大部分時間都是上傳和下載成品。 如有需要，您可以將這兩個作業合併成一個作業來簡化工作流程檔案，這樣就不需要上傳和下載步驟。

後續步驟

Azure 開發人員中心上的 JavaScript

在 App Service 中設定 Node.js 應用程式

 使用自訂網域和憑證保護