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 で削除してください。
- Azure Portal の左側のメニューで、 [リソース グループ] をクリックしてから、作成したリソースの名前をクリックします。
- リソース グループのページで [削除] をクリックし、削除するリソースの名前をテキスト ボックスに入力してから [削除] をクリックします。
次のステップ
このチュートリアルで学習した内容は次のとおりです。
- React、Node、Express、Azure Cosmos DB を使ってアプリを作成する
- Azure Cosmos DB アカウントを作成する
- Azure Cosmos DB アカウントにアプリを接続する
- Postman を使ってアプリをテストする
- アプリケーションを実行してヒーローをデータベースに追加する
次のチュートリアルに進み、MongoDB のデータを Azure Cosmos DB にインポートする方法を学習しましょう。
Azure Cosmos DB への移行のための容量計画を実行しようとしていますか? 容量計画のために、既存のデータベース クラスターに関する情報を使用できます。
- 既存のデータベース クラスター内の仮想コアとサーバーの数のみがわかっている場合は、仮想コア数または仮想 CPU 数を使用した要求ユニットの見積もりに関するページを参照してください
- 現在のデータベース ワークロードに対する通常の要求レートがわかっている場合は、Azure Cosmos DB Capacity Planner を使用した要求ユニットの見積もりに関するページを参照してください