React と Azure Cosmos DB を使って MongoDB アプリを作成する

  • [アーティクル]

適用対象: MongoDB

このビデオ チュートリアルでは、React フロントエンドでヒーローの追跡アプリを作成する方法を複数のパートにわたって紹介しています。 このアプリは、サーバーに Node と Express を使い、Azure Cosmos DB の MongoDB 用 API で構成された Azure Cosmos DB データベースに接続した後、アプリのサーバー部分に React フロントエンドを接続するものです。 また、Azure Portal からポイントアンドクリック方式で Azure Cosmos DB をスケーリングする方法や、アプリをインターネットにデプロイしてだれでもお気に入りのヒーローを追跡できるようにする方法も紹介しています。

Azure Cosmos DB は MongoDB とのワイヤ プロトコル互換性をサポートしているので、クライアントは MongoDB の代わりに Azure Cosmos DB を使用できます。

このマルチパート チュートリアルに含まれるタスクは次のとおりです。

  • はじめに
  • プロジェクトを設定する
  • React で UI を作成する
  • Azure Portal を使用して Azure Cosmos DB アカウントを作成する
  • Mongoose を使って Azure Cosmos DB に接続する
  • React、Create、Update、Delete の各操作をアプリに追加する

これと同じアプリを Angular で作成する方法については、 Angular のチュートリアル ビデオ シリーズをご覧ください。

前提条件

完全なプロジェクト

完成したアプリケーションは、GitHub からダウンロードできます。

はじめに

この動画では、Burke Holland が Azure Cosmos DB の概要を説明し、このビデオ シリーズで作成するアプリについて簡単に紹介しています。

プロジェクトの設定

この動画では、Express と React を同じプロジェクトで設定する方法を紹介します。 その後、プロジェクトに含まれるコードを実際に紹介しながら Burke が解説します。

UI をビルドする

この動画では、アプリケーションのユーザー インターフェイス (UI) を React で作成する方法を紹介します。

注意

この動画で言及されている CSS は、react-cosmosdb GitHub リポジトリにあります。

Azure Cosmos DB への接続

この動画では、Azure Portal から Azure Cosmos DB アカウントを作成して MongoDB と Mongoose のパッケージをインストールし、Azure Cosmos DB 接続文字列を使って、新しく作成したアカウントにアプリを接続する方法を紹介します。

アプリでのヒーローの読み取りと作成

この動画では、Azure Cosmos DB データベースにヒーローを作成したり、ヒーローを読み取ったりする方法のほか、Postman と React UI でそれらのメソッドをテストする方法について紹介します。

アプリでのヒーローの削除と更新

この動画では、アプリからヒーローを削除したり更新したりする方法のほか、更新した結果を UI に表示する方法について取り上げます。

アプリの仕上げ

いよいよアプリの仕上げに入ります。この動画で、UI をバックエンド API に接続する方法をご覧ください。

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

このアプリの使用を続けない場合は、以下の手順に従い、このチュートリアルで作成したすべてのリソースを Azure Portal で削除してください。

  1. Azure Portal の左側のメニューで、 [リソース グループ] をクリックしてから、作成したリソースの名前をクリックします。
  2. リソース グループのページで [削除] をクリックし、削除するリソースの名前をテキスト ボックスに入力してから [削除] をクリックします。

次のステップ

このチュートリアルで学習した内容は次のとおりです。

  • React、Node、Express、Azure Cosmos DB を使ってアプリを作成する
  • Azure Cosmos DB アカウントを作成する
  • Azure Cosmos DB アカウントにアプリを接続する
  • Postman を使ってアプリをテストする
  • アプリケーションを実行してヒーローをデータベースに追加する

次のチュートリアルに進み、MongoDB のデータを Azure Cosmos DB にインポートする方法を学習しましょう。

MongoDB データを Azure Cosmos DB にインポートする

Azure Cosmos DB への移行のための容量計画を実行しようとしていますか? 容量計画のために、既存のデータベース クラスターに関する情報を使用できます。