次の方法で共有

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 のチュートリアル ビデオ シリーズをご覧ください。

前提条件

  • Node.js
  • HTTP テスト ツール
    • Insomnia、curl、Visual Studio、または Invoke-RestMethod をお勧めします

完全なプロジェクト

完成したアプリケーションは、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 データベースにヒーローを作成したり、ヒーローを読み取ったりする方法のほか、HTTP テスト ユーティリティと React UI でそれらのメソッドをテストする方法について紹介します。

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

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

アプリの仕上げ

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

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

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

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

次のステップ

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

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

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

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

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