Azure Static Web Apps から Mongoose を使用して Azure Cosmos DB のデータにアクセスする

  • [アーティクル]

Mongoose とは、Node.js で最もよく使われている ODM (Object Document Mapping) クライアントです。 Mongoose では、データ構造を設計して検証を適用でき、MongoDB API をサポートするデータベースとの対話操作に必要なあらゆるツールが用意されています。 Cosmos DB は必要な MongoDB API をサポートし、Azure のバックエンド サーバー オプションとして使用できます。

前提条件

1. Cosmos DB サーバーレス データベースを作成する

Cosmos サーバーレス DB を作成するには、次の手順を実行します。

  1. Azure portal にサインインします。
  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. [Review + create](レビュー + 作成) を選択します。
  9. ［作成］ を選択します

作成プロセスには数分かかります。 静的 Web アプリを作成した後、接続文字列を収集するためにデータベースに戻ります。

2. 静的 Web アプリを作成する

このチュートリアルでは、アプリケーションの作成に役立つ GitHub テンプレート リポジトリを使用します。

  1. スターター テンプレートに移動します。

  2. 所有者を選択します (メイン アカウント以外の組織を使用している場合)。

  3. リポジトリに aswa-mongoose-tutorial という名前を付けます。

  4. [Create repository from template](テンプレートからリポジトリを作成する) を選択します。

  5. Azure portal に戻ります。

  6. [リソースの作成] を選択します。

  7. 検索ボックスに「静的 Web アプリ」と入力します。

  8. [Static Web App](静的 Web アプリ) を選択します。

  9. ［作成］ を選択します

  10. 次の情報を使用して Azure 静的 Web アプリを構成します。

    • [サブスクリプション]: 先ほどと同じサブスクリプションを選択します
    • [リソース グループ]: [aswa-mongoose] を選択します
    • [名前]: aswa-mongoose-tutorial
    • [リージョン]: 米国西部 2
    • [GitHub でサインイン] を選択します
    • デプロイを可能にする GitHub アクションの作成を Azure Static Web Apps に許可するよう求められたら、[承認] を選択します
    • [組織]: GitHub アカウント名
    • [リポジトリ]: aswa-mongoose-tutorial
    • [ブランチ]: main
    • ビルドのプリセット: [React] を選択します
    • アプリの場所: /
    • [Api location](API の場所): api
    • 出力場所: ビルド入力済みの Azure Static Web Apps フォーム

  11. [確認と作成] を選択します。

  12. ［作成］ を選択します

  13. 作成プロセスにはしばらく時間がかかります。静的 Web アプリがプロビジョニングされたら[リソースに移動]を選択します。

3. データベース接続文字列を構成する

Web アプリがデータベースと通信を行えるように、データベース接続文字列がアプリケーション設定として格納されます。 Node.js では、process.env オブジェクトを使用して設定値にアクセスできます。

  1. Azure portal の左上隅にある [ホーム] を選択します (または、https://portal.azure.com に戻ります)。
  2. [リソース グループ] を選択します。
  3. [aswa-mongoose] を選択します。
  4. データベース アカウントの名前を選択します。これは、[MongoDB 向けの Azure Cosmos DB API] の種類となります。
  5. [設定] で[接続文字列]選択します。
  6. [プライマリ接続文字列] に表示されている接続文字列をコピーします。
  7. 階層リンクの [aswa-mongoose] を選択します。
  8. [aswa-mongoose-tutorial] を選択して、ウェブサイトのインスタンスに戻ります。
  9. [設定] で [構成] を選択します。
  10. [追加] を選択して、次の値で新しいアプリケーション設定を作成します。
    • 名前: AZURE_COSMOS_CONNECTION_STRING
    • 値: <先ほどコピーした接続文字列を貼り付けます>
  11. [OK] を選択します。
  12. [追加] を選択し、データベース名に次の値を指定して新しいアプリケーション設定を作成します。
    • 名前: AZURE_COSMOS_DATABASE_NAME
    • 値: todo
  13. [OK] を選択します。
  14. [保存] を選択します。

4. サイトに移動する

では、この静的 Web アプリを詳しく見ていきましょう。

  1. Azure portal の [概要] を選択します。
  2. 右上に表示されている URL を選択します。
    1. それは、https://calm-pond-05fcdb.azurestaticapps.net のように表示されます。
  3. [ログインしてタスクの一覧を表示してください] を選択します。
  4. [同意する] を選択してアプリケーションにアクセスします。
  5. [新しい一覧の作成] という名前のテキストボックスに名前を入力し、[保存] を選択して、新しい一覧を作成します。
  6. 新しいタスクを作成するには、[新しいアイテムの作成] という名前のテキストボックスにタイトルを入力し、[保存] を選択します。
  7. タスクが表示されたことを確認します (しばらく時間がかかる場合があります)。
  8. チェックを選択してタスクを完了としてマークします。タスクは、ページの [完了したアイテム] セクションに移動します。
  9. ページを最新の情報に更新して、データベースが使用されていることを確認します。

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

このアプリケーションを引き続き使用しない場合は、次の手順でリソース グループ全体を削除します。

  1. Azure portal に戻ります。
  2. [リソース グループ] を選択します。
  3. [aswa-mongoose] を選択します。
  4. [リソース グループの削除] を選択します。
  5. テキストボックスに「aswa-mongoose」と入力します。
  6. [削除] を選択します。

次のステップ

次の記事に進み、ローカル開発の構成方法を学習してください。

ローカル開発の設定