チュートリアル: Node.js Web アプリを Azure DocumentDB に接続する

このチュートリアルでは、Azure DocumentDB に接続する Node.js Web アプリケーションを構築します。 MongoDB、Express、React.js、Node.js (MERN) スタックは、多くの最新の Web アプリケーションを構築するために使用される一般的なテクノロジのコレクションです。 Azure DocumentDB を使用すると、新しい Web アプリケーションを構築したり、既に使い慣れている MongoDB ドライバーを使用して既存のアプリケーションを移行したりできます。このチュートリアルでは、次の操作を行います。

環境を設定する
ローカル MongoDB コンテナーを使用して MERN アプリケーションをテストする
クラスターを使用して MERN アプリケーションをテストする
MERN アプリケーションを Azure App Service にデプロイする

[前提条件]

このチュートリアルを完了するには、以下のリソースが必要です。

Azure サブスクリプション
- Azure サブスクリプションをお持ちでない場合は、無料アカウントを作成してください

既存の Azure DocumentDB クラスター
- クラスターがない場合は、新しいクラスターを作成します

GitHub Codespaces エンタイトルメントを持つ GitHub アカウント

開発環境の設定

開発コンテナー環境は、このプロジェクトのすべての演習を完了するために必要なすべての依存関係と共に使用できます。開発コンテナーは、GitHub Codespaces で実行することも、Visual Studio Code を使用してローカルで実行することもできます。

GitHub Codespaces
Visual Studio Code

GitHub Codespaces は、Visual Studio Code for the Web をユーザーインターフェイスとして使用して GitHub によって管理される開発コンテナーを実行します。最も簡単な開発環境では、GitHub Codespaces を使用して、このトレーニングモジュールを完了するための適切な開発者ツールと依存関係がプレインストールされるようにします。

Important

すべての GitHub アカウントでは、2 つのコアインスタンスで毎月最大 60 時間無料で Codespaces を使用できます。

main GitHub リポジトリの azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app ブランチに新しい GitHub Codespace を作成するプロセスを開始します。

で開く
[コードスペース の作成] ページで、コードスペースの構成設定を確認し、[新しいコードスペースの作成] を選択します。
Codespace が起動するまで待ちます。このスタートアッププロセスには数分かかる場合があります。
コードスペースで新しいターミナルを開きます。

ヒント

メインメニューを使用して[ ターミナル ]メニューオプションに移動し、[ 新しいターミナル ]オプションを選択できます。
このチュートリアルで使用するツールのバージョンを確認します。
```
docker --version

node --version

npm --version

az --version
```
注

このチュートリアルでは、環境にプレインストールされている次のバージョンの各ツールが必要です。

Tool Version

Docker 20.10.0 以上

Node.js ≥ 18.0150

npm ≥ 9.5.0

Azure CLI ≥ 2.46.0
ターミナルを閉じます。
このチュートリアルの残りの手順は、この開発コンテナーのコンテキストで行われます。

Tool	Version
Docker	20.10.0 以上
Node.js	≥ 18.0150
npm	≥ 9.5.0
Azure CLI	≥ 2.46.0

Visual Studio Code 用の Dev Containers 拡張機能 では、ローカルコンピューター 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 .
```
[コマンドパレット] を開き、Dev Containers コマンドを検索し、[Dev Containers: コンテナーで再度開く (Reopen in Container)] を選択します。

ヒント

Visual Studio Code では、開発コンテナー内の既存のフォルダーを再度開くよう自動的に求められる場合があります。この手順は、機能的には、コマンドパレットを使用してコンテナー内の現在のワークスペースを再度開くのと同じです。
このチュートリアルで使用するツールのバージョンを確認します。
```
docker --version

node --version

npm --version

az --version
```
注

このチュートリアルでは、環境にプレインストールされている次のバージョンの各ツールが必要です。

Tool Version

Docker 20.10.0 以上

Node.js ≥ 18.0150

npm ≥ 9.5.0

Azure CLI ≥ 2.46.0
ターミナルを閉じます。
このチュートリアルの残りの手順は、この開発コンテナーのコンテキストで行われます。

Tool	Version
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) はランダムに生成され、この切り捨てられた出力例とは異なります。
サーバー/ディレクトリで、新しい .env ファイルを作成します。
server/.env ファイルで、この値の環境変数を追加します。

環境変数価値

CONNECTION_STRING Azure DocumentDB クラスターへの接続文字列。ここでは、 mongodb://localhost:27017?directConnection=trueを使用します。
```
CONNECTION_STRING=mongodb://localhost:27017?directConnection=true
```
ターミナルのコンテキストを サーバー/ フォルダーに変更します。
```
cd server
```
ノードパッケージマネージャー (npm) から依存関係をインストールします。
```
npm install
```
Node.js > Express アプリケーションを起動します。
```
npm start
```
API によってブラウザーウィンドウが自動的に開き、製品ドキュメントの配列が返されることを確認します。
追加のブラウザータブ/ウィンドウを閉じます。
ターミナルを閉じます。

環境変数	価値
`CONNECTION_STRING`	Azure DocumentDB クラスターへの接続文字列。ここでは、 `mongodb://localhost:27017?directConnection=true`を使用します。

Azure DocumentDB クラスターを使用して MERN アプリケーションをテストする

次に、アプリケーションが Azure DocumentDB とシームレスに動作することを検証しましょう。このタスクでは、MongoDB シェルを使用して既存のクラスターにシードデータを設定し、API の接続文字列を更新します。

Azure portal (https://portal.azure.com) にサインインします。
既存の Azure DocumentDB クラスターページに移動します。
Azure DocumentDB クラスターページで、[ 接続文字列 ] ナビゲーションメニューオプションを選択します。
[接続文字列] フィールドの値を記録します。

Important

ポータルの接続文字列には、ユーザー名とパスワードの値は含まれません。 <user>と<password>プレースホルダーは、最初にクラスターを作成したときに使用した資格情報に置き換える必要があります。
統合開発環境 (IDE) 内で新しいターミナルを開きます。
mongosh コマンドと、前に記録した接続文字列を使用して MongoDB シェルを起動します。 <user>と<password>プレースホルダーは、最初にクラスターを作成したときに使用した資格情報に置き換えてください。
```
mongosh "<mongodb-cluster-connection-string>"
```
注

接続文字列の特定の値をエンコードする必要がある場合があります。この例では、クラスターの名前が msdocs-azure-documentdb-tutorialされ、ユーザー名が clusteradminされ、パスワードが P@ssw.rd。パスワードでは、@を使用して%40文字をエンコードする必要があります。ここでは、パスワードの正しいエンコードを使用して接続文字列の例を示します。
```
CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-azure-documentdb-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
```
クライアント/ディレクトリで、新しい .env ファイルを作成します。
client/.env ファイルで、この値の環境変数を追加します。

環境変数価値

CONNECTION_STRING Azure DocumentDB クラスターへの接続文字列。 mongo シェルで使用したのと同じ接続文字列を使用します。
```
CONNECTION_STRING=<your-connection-string>
```
ターミナルのコンテキストを サーバー/ フォルダーに変更し、Node Package Manager (npm) から依存関係をインストールしてから、アプリケーションを起動して、アプリケーションがデータベースサービスを使用していることを検証します。
```
cd server

npm install

npm start
```
API によってブラウザーウィンドウが自動的に開き、製品ドキュメントの配列が返されることを確認します。
追加のブラウザータブ/ウィンドウを閉じます。次に、ターミナルを閉じます。

環境変数	価値
`CONNECTION_STRING`	Azure DocumentDB クラスターへの接続文字列。 mongo シェルで使用したのと同じ接続文字列を使用します。

MERN アプリケーションを Azure App Service にデプロイする

Azure App Service にサービスとクライアントをデプロイして、アプリケーションがエンドツーエンドで動作することを証明します。 Web アプリでシークレットを使用して、資格情報と API エンドポイントを含む環境変数を格納します。

統合開発環境 (IDE) 内で、新しいターミナルを開きます。
resourceGroupName という名前の既存のリソースグループの名前のシェル変数を作成します。
```
# Variable for resource group name
resourceGroupName="<existing-resource-group>"
```

serverAppName と clientAppName という名前の 2 つの 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 にサインインします。
現在の作業ディレクトリを サーバー/ パスに変更します。
```
cd server
```
az webapp upを使用して、MERN アプリケーションのサーバーコンポーネント用の新しい Web アプリを作成します。
```
az webapp up \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --sku F1 \
    --runtime "NODE|18-lts"
```
CONNECTION_STRINGを使用して、az webapp config connection-string setという名前のサーバー 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 を取得し、シェル変数名 d serverUri に格納します。

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

open-cliで NuGet の npx パッケージとコマンドを使用して、サーバー Web アプリの URI を使用してブラウザーウィンドウを開きます。サーバーアプリがクラスターから JSON 配列データを返していることを検証します。
```
npx open-cli "https://$serverUri/products" --yes
```
ヒント

場合によっては、デプロイが非同期的に完了することがあります。予期した内容が表示されない場合は、もう 1 分待ってからブラウザーウィンドウを更新します。
作業ディレクトリを クライアント/ パスに変更します。
```
cd ../client
```
az webapp upを使用して、MERN アプリケーションのクライアントコンポーネント用の新しい Web アプリを作成します。
```
az webapp up \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --sku F1 \
    --runtime "NODE|18-lts"
```
REACT_APP_API_ENDPOINTを使用して、az webapp config appsettings setという名前のクライアント 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 を取得し、シェル変数名 d clientUri に格納します。

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

open-cliで NuGet の npx パッケージとコマンドを使用して、クライアント Web アプリの URI を使用してブラウザーウィンドウを開きます。クライアントアプリがサーバーアプリの API からデータをレンダリングしていることを検証します。
```
npx open-cli "https://$clientUri" --yes
```
ヒント

場合によっては、デプロイが非同期的に完了することがあります。予期した内容が表示されない場合は、もう 1 分待ってからブラウザーウィンドウを更新します。
ターミナルを閉じます。

リソースをクリーンアップする

所有するサブスクリプションを使用している場合は、プロジェクトの終了時に、不要になったリソースを削除することをお勧めします。リソースを稼働させたままにすると、費用がかかる場合があります。リソースを個別に削除することも、リソースグループを削除してリソースのセット全体を削除することもできます。

リソースグループ全体を削除するには、 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) にサインインします。
azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app GitHub リポジトリから提供されている現在実行中の開発コンテナーを見つけます。
コードスペースのコンテキストメニューを開き、[の削除] 選択します。