教學課程：使用適用於 MongoDB 的 Azure Cosmos DB 連線 Node.js Web 應用程式（虛擬核心）

發行項
04/19/2024

適用於： MongoDB 虛擬核心

在本教學課程中，您會建置Node.js Web 應用程式，以在虛擬核心架構中連線到適用於 MongoDB 的 Azure Cosmos DB。 MongoDB、Express、React.js、Node.js (MERN) 堆疊是用來建置許多新式 Web 應用程式的一系列熱門技術。使用適用於 MongoDB 的 Azure Cosmos DB（虛擬核心），您可以建置新的 Web 應用程式，或使用您已熟悉的 MongoDB 驅動程式來移轉現有的應用程式。在本教學課程中，您已：

設定您的環境
使用本機 MongoDB 容器測試 MERN 應用程式
使用虛擬核心叢集測試 MERN 應用程式
將 MERN 應用程式部署至 Azure App Service

必要條件

若要完成此教學課程，您需要下列資源：

現有的虛擬核心叢集。
GitHub 帳戶。
- GitHub 隨附所有使用者均適用的免費 Codespaces 時數。

設定開發環境

開發容器環境可供完成此專案中每個練習所需的所有相依性使用。您可以在 GitHub Codespaces 中或使用 Visual Studio Code 在本機執行開發容器。

GitHub Codespaces
Visual Studio Code

GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面，執行由 GitHub 管理的開發容器。針對最直接的開發環境，請使用 GitHub Codespaces，讓您已預先安裝正確的開發人員工具和相依性來完成此訓練課程模組。

重要

所有 GitHub 帳戶每個月最多可以使用 Codespaces 60 小時，且有 2 個核心執行個體。

開始在 azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub 存放庫分的 main 分支上建立新的 GitHub Codespace 的流程。
在 [建立 Codespace] 頁面上，檢閱 Codespace 組態設定，然後選取 [建立新的 Codespace]
等候 Codespace 開始。此啟動程序可能需要幾分鐘的時間。
在 Codespace 中開啟新的終端機。

提示

您可以使用主功能表瀏覽至 [終端機] 功能表選項，然後選取 [新終端機] 選項。
檢查您在本教學課程中使用的工具版本。
```
docker --version

node --version

npm --version

az --version
```
注意

本教學課程需要您在環境中預先安裝各項工具的下列版本：

工具版本

Docker ≥ 20.10.0

Node.js ≥ 18.0150

NPM ≥ 9.5.0

Azure CLI ≥ 2.46.0
關閉終端機。
本教學課程中的其餘步驟會在此開發容器的內容中進行。

工具	版本
Docker	≥ 20.10.0
Node.js	≥ 18.0150
NPM	≥ 9.5.0
Azure CLI	≥ 2.46.0

適用於 Visual Studio Code 的開發容器延伸模組 需要將 Docker安裝在本機電腦上。擴充功能會使用 Docker 主機在本機裝載開發容器，並預先安裝正確的開發人員工具和相依性，以完成此訓練課程模組。

在空白目錄的內容中開啟 Visual Studio Code。
請確定已在 Visual Studio Code 中安裝 Dev Containers 延伸模組。
在編輯器中開啟新的終端機。

提示

您可以使用主功能表瀏覽至 [終端機] 功能表選項，然後選取 [新終端機] 選項。
將 azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub 存放庫複製到目前的目錄。
```
git clone https://github.com/azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app.git .
```
開啟 [命令選擇區]，搜尋 [開發容器] 命令，然後選取 [開發容器: 在容器中重新開啟]。

提示

Visual Studio Code 可能會自動提示您重新開啟開發容器內現有的資料夾。這在功能上相當於使用命令選擇區重新開啟容器中的目前工作區。
檢查您在本教學課程中使用的工具版本。
```
docker --version

node --version

npm --version

az --version
```
注意

本教學課程需要您在環境中預先安裝各項工具的下列版本：

工具版本

Docker ≥ 20.10.0

Node.js ≥ 18.0150

NPM ≥ 9.5.0

Azure CLI ≥ 2.46.0
關閉終端機。
本教學課程中的其餘步驟會在此開發容器的內容中進行。

工具	版本
Docker	≥ 20.10.0
Node.js	≥ 18.0150
NPM	≥ 9.5.0
Azure CLI	≥ 2.46.0

使用 MongoDB 容器測試 MERN 應用程式的 API

首先，使用本機 MongoDB 容器執行範例應用程式的 API，以驗證應用程式正常運作中。

使用 Docker 執行 MongoDB 容器，並發佈一般的 MongoDB 連接埠 (27017)。
```
docker pull mongo:6.0

docker run --detach --publish 27017:27017 mongo:6.0
```
在提要欄位中，選取 MongoDB 延伸模組。
使用連接字串 mongodb://localhost 將新的連線新增至 MongoDB 延伸模組。
在連線成功後，開啟 data/products.mongodb 遊樂場檔案。
選取 [全部執行] 圖示以執行指令碼。

遊樂場執行應該會產生本機 MongoDB 集合中的文件清單。以下是輸出的截斷範例。

[
  {
    "_id": { "$oid": "640a146e89286b79b6628eef" },
    "name": "Confira Watch",
    "category": "watches",
    "price": 105
  },
  {
    "_id": { "$oid": "640a146e89286b79b6628ef0" },
    "name": "Diannis Watch",
    "category": "watches",
    "price": 98,
    "sale": true
  },
  ...
]

注意

物件識別碼 (_id) 會隨機產生，而且與這個截斷的範例輸出不同。

在 server/ 目錄中，建立新的 .env 檔案。
在 server/.env 檔案中，新增此值的環境變數：

環境變數值

CONNECTION_STRING 適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集連接字串。目前請使用 mongodb://localhost:27017?directConnection=true。
```
CONNECTION_STRING=mongodb://localhost:27017?directConnection=true
```
將終端機的內容變更為 server/ 資料夾。
```
cd server
```
從節點套件管理員 (npm) 安裝相依性。
```
npm install
```
啟動 Node.js & Express 應用程式。
```
npm start
```
API 會自動開啟瀏覽器視窗，以確認傳回了一系列的產品文件。
關閉額外的瀏覽器索引標籤/視窗。
關閉終端機。

環境變數	值
`CONNECTION_STRING`	適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集連接字串。目前請使用 `mongodb://localhost:27017?directConnection=true`。

使用適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集測試 MERN 應用程式

現在，讓我們驗證應用程式是否可與適用於 MongoDB 的 Azure Cosmos DB 順暢運作（虛擬核心）。針對這項工作，請使用 MongoDB 殼層為預先存在的叢集填入種子資料，然後更新 API 的連接字串。

登入 Azure 入口網站 (https://portal.azure.com)。
流覽至現有的適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集頁面。
從 [適用於 MongoDB 的 Azure Cosmos DB] 叢集頁面，選取 [連線 ion 字符串導覽功能表選項。
記錄 [連接字串] 欄位中的值。

重要

入口網站中的連接字串不包含使用者名稱和密碼值。您必須將 <user> 和 <password> 預留位置取代為您最初建立叢集時所使用的認證。
回到整合式開發環境 (IDE) 中，開啟新的終端機。
使用 mongosh 命令和您先前記錄的連接字串，啟動 MongoDB 殼層。請務必將 <user> 和 <password> 預留位置取代為您最初建立叢集時所使用的認證。
```
mongosh "<mongodb-cluster-connection-string>"
```
注意

您可能需要為連接字串編碼特定值。在此範例中，叢集的名稱為 msdocs-cosmos-tutorial、使用者名稱為 clusteradmin，密碼為 P@ssw.rd。在密碼中，@ 字元必須使用 %40 進行編碼。此處提供一個密碼已正確編碼的範例連接字串。
```
CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-cosmos-tutorial.mongocluster.cosmos.azure.com/?tls=true&authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000
```

在殼層中執行下列命令，以建立資料庫、建立集合，並植入起始資料。

use('cosmicworks');

db.products.drop();

db.products.insertMany([
  { name: "Confira Watch", category: "watches", price: 105.00 },
  { name: "Diannis Watch", category: "watches", price: 98.00, sale: true },
  { name: "Sterse Gloves", category: "gloves", price: 42.00 },
  { name: "Peache Sunglasses", category: "eyewear", price: 32.00, sale: false, sizes: [ "S", "M", "L" ] },
  { name: "Icento Pack", category: "bags", price: 58.00 },
  { name: "Iroowl Bracelet", category: "watches", price: 66.00 },
  { name: "Glaark Bag", category: "bags", price: 56.00, sale: true },
  { name: "Windry Mittens", category: "gloves", price: 35.00 },
  { name: "Tuvila Hat", category: "hats", price: 120.00 },
  { name: "Klinto Hat", category: "hats", subcategory: "hats-beanies", price: 65.00 }
]);

db.products.find({});

這些命令應該會產生本機 MongoDB 集合中的文件清單。以下是輸出的截斷範例。

[
  {
    "_id": { "$oid": "640a146e89286b79b6628eef" },
    "name": "Confira Watch",
    "category": "watches",
    "price": 105
  },
  {
    "_id": { "$oid": "640a146e89286b79b6628ef0" },
    "name": "Diannis Watch",
    "category": "watches",
    "price": 98,
    "sale": true
  },
  ...
]

注意

物件識別碼 (_id) 會隨機產生，而且與這個截斷的範例輸出不同。

結束 MongoDB 殼層。
```
exit
```
在 client/ 目錄中，建立新的 .env 檔案。
在 client/.env 檔案中，新增此值的環境變數：

環境變數值

CONNECTION_STRING 適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集連接字串。使用您用於 mongo 殼層的相同連接字串。
```
CONNECTION_STRING=<your-connection-string>
```
藉由將終端機的內容變更為 server/ 資料夾、從 Node 套件管理員安裝相依性，然後啟動應用程式，以驗證應用程式正在使用資料庫服務。
```
cd server

npm install

npm start
```
API 會自動開啟瀏覽器視窗，以確認傳回了一系列的產品文件。
關閉額外的瀏覽器索引標籤/視窗。然後，關閉終端機。

環境變數	值
`CONNECTION_STRING`	適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集連接字串。使用您用於 mongo 殼層的相同連接字串。

將 MERN 應用程式部署至 Azure App Service

將服務和用戶端部署至 Azure App Service，以證明應用程式可端對端運作。使用 Web 應用程式中的秘密來儲存含有認證和 API 端點的環境變數。

在您的整合式開發環境 (IDE) 中，開啟新的終端機。

為預先存在的資源群組 resourceGroupName 的名稱建立殼層變數。

# Variable for resource group name
resourceGroupName="<existing-resource-group>"

為分別名為 serverAppName 和 clientAppName 的兩個 Web 應用程式建立殼層變數。

# Variable for randomnly generated suffix
let suffix=$RANDOM*$RANDOM

# Variable for web app names with a randomnly generated suffix
serverAppName="server-app-$suffix"
clientAppName="client-app-$suffix"

如果您尚未登入，請使用 az login --use-device-code 命令登入 Azure CLI。
將目前的工作目錄變更為 server/ 路徑。
```
cd server
```

使用 az webapp up 為 MERN 應用程式的伺服器元件建立新的 Web 應用程式。

az webapp up \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --sku F1 \
    --runtime "NODE|18-lts"

使用 az webapp config connection-string set 為名為 CONNECTION_STRING 的伺服器 Web 應用程式建立新的連接字串設定。針對您先前在本教學課程中用於 MongoDB 殼層和 .env 檔案的連接字串，使用相同的值。
```
az webapp config connection-string set \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --connection-string-type custom \
    --settings "CONNECTION_STRING=<mongodb-connection-string>"
```

使用 az webapp show 取得伺服器 Web 應用程式的 URI，並將其儲存在名為 serverUri 的殼層變數中。

serverUri=$(az webapp show \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --query hostNames[0] \
    --output tsv)

使用 NuGet 中的 open-cli 套件和命令搭配 npx，以使用伺服器 Web 應用程式的 URI 開啟瀏覽器視窗。驗證伺服器應用程式是否從 MongoDB （虛擬核心）叢集傳回您的 JSON 陣列資料。
```
npx open-cli "https://$serverUri/products" --yes
```
提示

有時候部署可以非同步完成。若未看到預期的內容，請稍候一分鐘，然後重新整理瀏覽器視窗。
將工作目錄變更為 client/ 路徑。
```
cd ../client
```

使用 az webapp up 為 MERN 應用程式的用戶端元件建立新的 Web 應用程式。

az webapp up \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --sku F1 \
    --runtime "NODE|18-lts"

使用 az webapp config appsettings set 為名為 REACT_APP_API_ENDPOINT 的用戶端 Web 應用程式建立新的應用程式設定。使用儲存在 serverUri 殼層變數中的伺服器 API 端點。
```
az webapp config appsettings set \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --settings "REACT_APP_API_ENDPOINT=https://$serverUri"
```

使用 az webapp show 取得用戶端 Web 應用程式的 URI，並將其儲存在名為 clientUri 的殼層變數中。

clientUri=$(az webapp show \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --query hostNames[0] \
    --output tsv)

使用 NuGet 中的 open-cli 套件和命令搭配 npx，以使用用戶端 Web 應用程式的 URI 開啟瀏覽器視窗。驗證用戶端應用程式會從伺服器應用程式的 API 轉譯資料。
```
npx open-cli "https://$clientUri" --yes
```
提示

有時候部署可以非同步完成。若未看到預期的內容，請稍候一分鐘，然後重新整理瀏覽器視窗。
關閉終端機。

清除資源

如果您使用自己的訂用帳戶，當專案結束時，建議您移除不再需要的資源。資源若繼續執行，將需付費。您可以個別刪除資源，或刪除資源群組以刪除整組資源。

若要刪除整個資源群組，請使用 az group delete。

az group delete \
    --name $resourceGroupName \
    --yes

使用 az group list 驗證資源群組已刪除。
```
az group list
```

清理開發環境

您可能也會想要清理開發環境，或將其回復為一般狀態。

GitHub Codespaces
Visual Studio Code

刪除 GitHub Codespaces 環境，可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。

登入 GitHub Codespaces 儀表板 (https://github.com/codespaces)。
找出您目前執行中的 Codespaces，而其來源為 azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub 存放庫。
開啟 Codespace 的快顯功能表，然後選取 [刪除]。

後續步驟

既然您已為 MongoDB （vCore）叢集建置第一個應用程式，請瞭解如何將數據遷移至 Azure Cosmos DB。

移轉資料

Share via

教學課程：使用適用於 MongoDB 的 Azure Cosmos DB 連線 Node.js Web 應用程式（虛擬核心）

必要條件

設定開發環境

使用 MongoDB 容器測試 MERN 應用程式的 API

使用適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集測試 MERN 應用程式

將 MERN 應用程式部署至 Azure App Service

清除資源

清理開發環境

後續步驟

其他資源

Share via

教學課程：使用適用於 MongoDB 的 Azure Cosmos DB 連線 Node.js Web 應用程式（虛擬核心）

必要條件

設定開發環境

使用 MongoDB 容器測試 MERN 應用程式的 API

使用適用於 MongoDB 的 Azure Cosmos DB （虛擬核心） 叢集測試 MERN 應用程式

將 MERN 應用程式部署至 Azure App Service

清除資源

清理開發環境

後續步驟

其他資源

使用適用於 MongoDB 的 Azure Cosmos DB （虛擬核心）叢集測試 MERN 應用程式