MongoDBデータベースに接続

MongoDBデータベースに接続し、Squidのリアルタイムストリーミング、堅牢なクエリ、そしてAI機能を活用しましょう。

TL;DR

このチュートリアルでは、新しい MongoDB データベースを Squid プロジェクトに接続する方法を学びます。これには以下が含まれます:

Squid Console での MongoDB 統合の作成
外部データベース用セキュリティルールの適用
クライアントプロジェクトから Squid を使って MongoDB データベースへクエリを実行する

このチュートリアルでは、React と Squid を使用して MongoDB コレクション内のサンプルデータに接続します。データベース用語、React、及び Squid プラットフォームの基本的な理解があると望ましいですが、本ガイドに必須の前提条件はありません。

Create a new MongoDB project

まず、sign in して、MongoDB アカウントにログインし、新しいプロジェクトを作成します。MongoDB はあなたをプロジェクトの概要ページにリダイレクトします。そこで、Create ボタンをクリックしてデータベースデプロイメントを作成してください。このデプロイメントには無料の M0 ティアを選択します。また、クラスタには sample-data などのカスタム名を付けることもできます。

次に、MongoDB はあなたを Security セクション内の Quickstart タブにリダイレクトするはずです。これは左側のパネルにあるメニューから見つけることができます。MongoDB データベースに接続するためには、承認済みユーザーを作成する必要があります。

ステップ1として、ユーザー名とパスワードを使用して接続の認証を行ってください。Squid を MongoDB に接続する際に必要となるため、選択したパスワードは必ずコピーしておいてください。作業が終わったら、Create User をクリックします.

Mongo Tutorial 1

次に、Network Access タブに移動し、Squid の IP アドレスを追加します。データベースへのアクセスが必要なため、Squid の IP アドレスからのアクセスを許可する必要があります。これらの IP アドレスは Squid Console の application overview page 内の Cloud provider セクションで確認できます。各 IP アドレスをアクセスリストに追加するには Add Entry をクリックし、ページ下部の Finish and Close をクリックして設定を完了してください。

プロジェクトの概要ページには、Database Deployments の下にクラスタが表示されるはずです。クラスタの Overview ページに移動し、クラスタの Ellipses (...) ボタンをクリックします。その後、Load Sample Dataset をクリックして、MongoDB が提供するスターターデータをクラスタに読み込みます。MongoDB がデータを追加するのに数分かかる場合があるため、しばらくお待ちください。

データがクラスタに追加されると、Browse Collections をクリックして追加されたデータを確認できます。これには、sample_airbnb データベースと listingsAndReviews コレクションが含まれます。

これで、MongoDB 側の設定は完了です！次に、React プロジェクトを Squid と共に開始し、MongoDB のサンプルデータを利用できるようにしましょう。

Create a new React project

まず、ご希望の場所にルートプロジェクトディレクトリを作成します:

mkdir mongo

次に、mongo ディレクトリに移動し、Vite を使用して新しい React TypeScript アプリケーションを作成します:

cd mongo
npm create vite@latest mongo-frontend -- --template react-ts

次に、新たに作成されたディレクトリに移動し、全ての依存関係をインストールします:

cd mongo-frontend
npm install

Create a new app in the console

Squid Console に移動し、mongo-tutorial（またはそれに類する名称）の新しいアプリケーションを作成します.

注意

Squid は開発用と本番用の2種類のターゲット環境を提供しています。本チュートリアルでは dev 環境を使用することを前提としていますが、prod も選択可能です。アプリケーションを正しく動作させるためには、プロジェクト全体で同一のターゲット環境を使用していることを確認してください。詳しくは Squid の environments をご覧ください。

コンソール内の手順に従い、バックエンドテンプレートプロジェクトを生成してください。これらの手順を確認するには、アプリケーション概要ページにある Initialize Backend ボタンをクリックします。フロントエンドとバックエンドのディレクトリが兄弟関係になるように、バックエンドの初期化前に必ずルートプロジェクトディレクトリに cd してください。

Create a MongoDB Connector (integration)

注意

本チュートリアルでは、「integration」と「connector」という用語は互換的に使用され、同じ概念を指します。

コンソールで、アプリケーションの Connectors ページに移動し、新しい MongoDB コネクタを追加してください。インテグレーションは環境間で共有されないため、必ず正しい環境を使用していることを確認してください（上記の注意を参照）。

次に、以下の4つの入力フィールドに値を入力します:

Connector ID: この ID には、このインテグレーションが何を表しているかを示す意味のある名前 (例: mongo) を選択してください。
Database Connection String: この文字列は、MongoDB プロジェクトの概要ページで Connect ボタンをクリックすることで見つかります。ボタンをクリックすると接続方法を選択するモーダルが表示されるので、Shell オプションを選択し、接続文字列を探してください。Squid が必要とする文字列の特定部分は、おそらく "mongodb+srv" で始まり "mongodb.net" で終わります。前後の文字は無視できますが、中間の文字は必須です。さらに、使用するデータベース名である "/sample_airbnb" を末尾に追加してください。最終的な文字列は次のようになります:
mongodb+srv://YOUR_CLUSTER_NAME.SOME_ID_CHARS.mongodb.net/sample_airbnb
この値を Squid Console にコピーしてください。MongoDB のサイトから他に必要な情報はありません。
Database Username と Database Password: これらの値は、先ほどの Create a new MongoDB project の際に作成しました。これらをコンソールにコピーし、パスワードについては新しいシークレットを作成してください。

データベース接続文字列、ユーザー名、およびパスワードを提供することで、Squid と MongoDB データベースとの接続が確立されます。Test Connection ボタンをクリックして、Squid と MongoDB 間の接続が正しく動作していることを確認してください。

Next ボタンをクリックすると、Squid が自動的に sample_airbnb データベース内の現在のデータに基づいてデータベーススキーマを発見します。データに変更が加えられた場合は、手動で Rediscover Schema を実行できます (本チュートリアルでは必要ありません)。

これらのステップを完了したら、Add Connector をクリックしてプロジェクトに追加してください！

Squid の IP アドレスをホワイトリストに追加していることを確認してください

エラーが発生する場合は、Mongo Atlas のウェブサイトの Network Access タブに Squid の IP アドレスが追加されているか再度ご確認ください。Squid の IP アドレスは Squid Console の application overview page 内の Cloud provider セクションで確認できます.

Security rules

すべてのデータベースインテグレーションにはセキュリティルールが必要です。これにより、特定のコレクションやアクション、さらにはデータベース全体へのアクセスを認可するためのカスタムロジックを作成できます。認証や認可は本チュートリアルの範囲外であるため、ここでは mongo インテグレーションへのパブリックアクセスを許可するセキュリティルールを作成します。

ヒント

データのセキュリティについて詳しく知るには、Squid のバックエンド security rules をご覧ください.

セキュリティルールは mongo-backend/src/service/example-service.ts ファイルにあります。SquidService クラスにデコレーターを追加することでセキュリティルールを拡張できます。データベースインテグレーション用のセキュリティルールを作成するには、データベースアクション type と CONNECTOR_ID をパラメーターとして受け取る @secureDatabase デコレーターを使用してください。ExampleService クラスに新しいセキュリティルールを作成します:

Backend code
import { secureDatabase, SquidService } from '@squidcloud/backend';

...

export class ExampleService extends SquidService {

  ...

  @secureDatabase("all", "mongo")
  allowAccessToMongo(): boolean {
    return true; // Allows all access to the mongo integration
  }
}

Edit the client code

最後のステップは、React 版の Squid Client SDK を使用して、React プロジェクト内でインテグレーションを利用することです。

Setup

まず、mongo-frontend ディレクトリから Squid React SDK をインストールします:

npm install @squidcloud/react

次に、src/main.tsx 内で App コンポーネントを SquidContextProvider でラップします。下記のプレースホルダーを、バックエンドディレクトリ内にある .env ファイルに記載されている設定オプションと置き換えてください。.env ファイルはコンソールで新しいアプリの作成の際に自動生成されます。

Client code
import ReactDOM from 'react-dom/client'
import { StrictMode } from 'react';
import App from './App.tsx'
import './index.css'
import { SquidContextProvider } from '@squidcloud/react';

...

ReactDOM.createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <SquidContextProvider
      options={{
        appId: 'YOUR_APP_ID',
        region: 'YOUR_REGION', // example: 'us-east-1.aws'
        environmentId: 'dev | prod', // choose one of 'dev' or 'prod'
        squidDeveloperId: 'YOUR_SQUID_DEVELOPER_ID',
      }}
    >
      <App />
    </SquidContextProvider>
  </StrictMode>
);

Running the project

プロジェクトを実行するには、クライアントの React プロジェクトとバックエンドの Squid プロジェクトの両方を起動する必要があります。

バックエンドを実行するには、バックエンドディレクトリから以下を実行します:

squid start

クライアントを実行するには、フロントエンドディレクトリから以下を実行します:

npm run dev

ターミナルにポート番号が表示される http://localhost:PORT で、クライアントプロジェクトが実行されているはずです。まだページに表示される内容を編集していないため、Vite のスタータープロジェクトが表示されるでしょう。

Querying a single document

Squid のメソッドを使用して、複数の方法でコレクションに対してクエリを実行できます。最初の方法は、ドキュメント ID を使用して listingsAndReviews コレクション内の単一ドキュメントをクエリする方法です。

組み込み以外のインテグレーションにおけるドキュメント ID はオブジェクト形式である必要があります。Squid におけるドキュメント ID について詳しくは、documentation をご覧ください。

先ほどコンソールで発見したスキーマでは、Squid がプライマリキーに文字列型の _id フィールドを含むことを期待していると説明されています。

Mongo Tutorial 2

MongoDB のデータを確認し、任意のエントリーの _id 値を選択してそのドキュメントをクエリし、クライアント上に表示します。mongo-frontend/src/App.tsx を以下の新しいコードに編集してください:

Client code
import './App.css';
import { useCollection, useDoc } from '@squidcloud/react';

function App() {
  const collectionRef = useCollection('listingsAndReviews', 'mongo');

  const { data: listing } = useDoc(collectionRef.doc({ _id: '10057826' }));

  return (
    <>
      <h2>
        Note: this is MongoDB sample data. Any data displayed here may not be
        accurate
      </h2>
      <div>Name: {listing?.name}</div>
      <div>URL: {listing?.listing_url}</div>
      <div>Price: ${listing?.price}</div>
    </>
  );
}

export default App;

上記と同様の方法でプロジェクトを実行してください。正しくセットアップされていれば、次のような表示が得られるはずです:

Mongo Tutorial 3

おめでとうございます！外部 MongoDB データベースに対する最初のクエリが完了しました。クエリについてさらに知りたい場合は、当社の documentation をご覧ください。次は、さらに複雑なクエリの作成に進みましょう…

Building a query

「最も安いオプションは何か？」と尋ねることは、AirBnB が提供する最高の宝物を求めるデジタルクエストに乗り出すようなものです！Squid の高度なクエリ機能を活用すれば、最も安いオプションを簡単に見つけることができます。クエリは以下のようになります:

Client code
const { data: cheapListings } = useQuery(
  collectionRef.query().where('price', '<=', 10)
);

さらに、このクエリを拡張して、場所、収容人数などを指定することも可能です。

すべてをまとめると、最終的な mongo-frontend/src/App.tsx は以下のようになります:

Client code
import './App.css';
import { useCollection, useDoc, useQuery } from '@squidcloud/react';

function App() {
  const collectionRef = useCollection('listingsAndReviews', 'mongo');

  const { data: listing } = useDoc(collectionRef.doc({ _id: '10057826' }));

  const { data: cheapListings } = useQuery(
    collectionRef.query().where('price', '<=', 10)
  );

  return (
    <>
      <h2>
        Note: this is MongoDB sample data. Any data displayed here may not be
        accurate
      </h2>
      <div>Name: {listing?.name}</div>
      <div>URL: {listing?.listing_url}</div>
      <div>Price: ${listing?.price}</div>
      <hr />
      <h3>Cheap Listings</h3>
      {cheapListings.map((listing, i) => (
        <div key={i}>
          Name: {listing.data.name} --- URL: {listing.data.listing_url}
        </div>
      ))}
    </>
  );
}

export default App;

このコードにより、先ほどクエリしたリスティングと共に、10ドル以下のすべての AirBnB のリストが表示されるはずです。

Next steps

このガイドを完了した後は、Squid が提供するさらなる機能を自由に探索してください。MongoDB インテグレーションを使用すると、データの mutations も可能です。さらに、データの特定部分へのアクセス制御のための authentication の設定も行えます。

MongoDBデータベースに接続し、Squidのリアルタイムストリーミング、堅牢なクエリ、そしてAI機能を活用しましょう。​

TL;DR​

Create a new MongoDB project​

Create a new React project​

Create a new app in the console​

Create a MongoDB Connector (integration)​

Security rules​

Edit the client code​

Setup​

Running the project​

Querying a single document​

Building a query​

Next steps​