MongoDB データベースに接続する
あなたの MongoDB データベースに接続し、Squid のリアルタイムストリーミング、堅牢なクエリ機能、そして AI 機能を活用しましょう。
TL;DR
このチュートリアルでは、新しい MongoDB データベースをあなたの Squid プロジェクトに接続する方法を学びます。これには以下が含まれます:
このチュートリアルでは React と Squid を使用して、MongoDB コレクション内のサンプルデータに接続します。データベース用語、React、Squid プラットフォームの基本的な理解は有益ですが、このガイドに必須の前提条件ではありません。
新しい MongoDB プロジェクトを作成する
まず、sign inして MongoDB アカウントにログインし、新しいプロジェクトを作成します。MongoDB はプロジェクトの概要ページにリダイレクトします。そこで、Create ボタンをクリックしてデータベースのデプロイメントを作成してください。このデプロイメントでは無料の M0 tier を選択します。また、クラスターに sample-data のようなカスタム名を付けることもできます。
次に、MongoDB は左側パネルのメニューにある Security セクションの Quickstart タブにリダイレクトされるはずです。MongoDB データベースに接続するためには、認証済みユーザーを作成する必要があります。
ステップ 1 では、ユーザー名とパスワードを使用して接続を認証します。Squid と MongoDB を接続する際に必要となるため、選択したパスワードを必ずコピーしてください。完了したら、Create User をクリックします。
次に、Network Access タブに移動して Squid の IP アドレスを追加します。Squid がデータベースにアクセスする必要があるので、Squid の IP アドレスからのアクセスを許可します。これらの IP アドレスは Squid Console の application overview page 内の Cloud provider セクションに表示されています。各 IP アドレスをアクセスリストに追加するには Add Entry をクリックし、ページ下部の Finish and Close をクリックして設定を完了してください。
プロジェクト概要ページには、Database Deployments の下にクラスターが表示されるはずです。クラスターの Overview ページに移動し、対象クラスターの Ellipses (...) ボタンをクリックします。次に、Load Sample Dataset をクリックして、MongoDB が提供するスターターデータをクラスターにロードします。データの追加には数分かかる場合があるので、しばらくお待ちください。
クラスターにデータが追加されたら、Browse Collections をクリックして、sample_airbnb データベース内の listingsAndReviews コレクションなど、追加されたデータを確認できます。
これで MongoDB 側の準備は整いました！次に、React プロジェクトを Squid で開始し、MongoDB のサンプルデータを利用できるようにしましょう。
新しい React プロジェクトを作成する
まず、任意の場所にプロジェクトのルートディレクトリを作成します:
mkdir mongo
次に、mongo ディレクトリに cd し、Vite を使用して新しい React TypeScript アプリケーションを作成します:
cd mongo
npm create vite@latest mongo-frontend -- --template react-ts
次に、新しく作成したディレクトリに cd し、全ての依存関係をインストールします:
cd mongo-frontend
npm install
コンソールで新しいアプリを作成する
Squid Console に移動し、mongo-tutorial（またはそれに類する名前）の新しいアプリケーションを作成します.
Squid は開発と本番用の 2 種類のターゲット環境を提供しています。このチュートリアルでは dev 環境を使用することを前提としますが、prod も選択可能です。アプリケーションを動作させるために、プロジェクト全体で同じターゲット環境を使用していることを確認してください。詳細については、Squid の environments をご覧ください。
コンソール内の手順に従って、バックエンドのテンプレートプロジェクトを生成します。これらの手順を表示するには、アプリケーション概要ページの Initialize Backend ボタンをクリックしてください。フロントエンドとバックエンドのディレクトリが同じ階層になるよう、バックエンドの初期化前に必ずルートプロジェクトディレクトリに cd してください。
MongoDB Connector (integration) の作成
このチュートリアルでは、「integration」と「connector」という用語は同義であり、同じ概念を指します。
コンソールで、アプリケーションの Connectors ページに移動し、新しい MongoDB connector を追加します。統合は環境間で共有されないため、正しい環境を使用していることを確認してください（上記の注意を参照）。
次に、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: これらの値は、我々が実施した MongoDB Setup の際に作成しました。これらの値をコンソールにコピーし、パスワードについては新しい secret を作成してください.
データベースの接続文字列、ユーザー名、およびパスワードを提供することで、Squid と MongoDB データベースとの接続が確立されます。Test Connection ボタンをクリックして、Squid と MongoDB 間の接続が正しく動作していることを確認してください。
Next ボタンをクリックすると、現在 sample_airbnb データベース内にあるデータに基づいて、Squid が自動的にデータベーススキーマを検出するのが確認できます。データに変更があった場合は、手動で Rediscover Schema を実行することも可能ですが（このチュートリアルでは必要ありません）、その都度行ってください。
これらの手順を完了したら、Add Connector をクリックしてプロジェクトに追加してください!
Squid の IP アドレスを必ずホワイトリストに追加してください。エラーが発生した場合は、Mongo Atlas ウェブサイトの Network Access タブに Squid の IP アドレスが追加されていることを再確認してください。Squid の IP アドレスは、Squid Console の application overview page 内の Cloud provider セクションに表示されています。
セキュリティルール
すべてのデータベース統合にはセキュリティルールが必要です。これにより、特定のコレクションやアクション、さらにはデータベース全体へのアクセスを許可するためのカスタムロジックを作成できます。このチュートリアルでは認証や認可の詳細には踏み込みませんので、mongo 統合に対してパブリックアクセスを許可するセキュリティルールを作成します。
データの保護についてさらに学ぶには、Squid のバックエンド security rules をご覧ください。
セキュリティルールは mongo-backend/src/service/example-service.ts にあります。セキュリティルールは、SquidService クラスにデコレーターを追加することで拡張できます。データベース統合用のセキュリティルールを作成するには、データベースアクションの type と CONNECTOR_ID をパラメーターとして取る @secureDatabase デコレーターを使用してください。ExampleService クラスに新しいセキュリティルールを作成します:
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
}
}
クライアントコードの編集
最後のステップとして、Squid Client SDK の React 版を使用して、React プロジェクト内でこの統合を利用します。
セットアップ
まず、mongo-frontend ディレクトリから Squid React SDK をインストールします:
npm install @squidcloud/react
次に、src/main.tsx 内で App コンポーネントを SquidContextProvider でラップします。以下のプレースホルダーを、.env ファイルに記載の設定オプションに置き換えてください。.env ファイルは コンソールでアプリを作成する 際に自動生成され、バックエンドディレクトリ内に配置されています。
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>
);
プロジェクトの起動
プロジェクトを起動するには、クライアントの React プロジェクトとバックエンドの Squid プロジェクトの両方を起動する必要があります。
バックエンドを起動するには、バックエンドディレクトリから以下を実行してください:
squid start
クライアントを起動するには、フロントエンドディレクトリから以下を実行します:
npm run dev
これで、ターミナルに表示されるポート番号の http://localhost:PORT でクライアントプロジェクトが起動しているのを確認できるはずです。ページに表示される内容はまだ編集していないため、Vite のスタータープロジェクトが表示されます。
単一ドキュメントへのクエリ
Squid のメソッドを利用して、コレクションに対するクエリを複数の方法で実行できます。最初の方法は、ドキュメント ID を用いて listingsAndReviews コレクション内の単一ドキュメントにクエリを実行する方法です。
非ビルトイン統合のドキュメント ID はオブジェクト形式でなければなりません。Squid におけるドキュメント ID の詳細については、documentation を参照してください。
先ほどコンソールで検出したスキーマは、Squid が主キーに文字列型の _id フィールドを含むことを期待していることを示しています。
MongoDB 内のデータを確認し、任意のエントリーの _id の値を用いて該当ドキュメントにクエリを実行し、そのデータをクライアントに表示できます。mongo-frontend/src/App.tsx を以下の新しいコードに編集してください:
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;
上記と同様の方法でプロジェクトを起動してください。すべてが正しく設定されていれば、以下のような表示が確認できるはずです:
おめでとうございます！外部 MongoDB データベースに対する最初のクエリが完了しました。クエリについてさらに詳しく知りたい場合は、documentation をご覧ください。それでは、さらに複雑なクエリの作成に進みましょう...
クエリの構築
「最も安いオプションは何か？」と尋ねるのは、AirBnB が提供する最高の宝物を探索するデジタルクエストに出かけるようなものです！Squid の高度なクエリオプションを使えば、簡単に利用可能な最も安いオプションを見つけることができます。クエリは以下のようになります:
const { data: cheapListings } = useQuery(
collectionRef.query().where('price', '<=', 10)
);
さらに、場所、収容人数などを指定してこのクエリを拡張することも可能です。
これらをすべてまとめると、最終的な mongo-frontend/src/App.tsx は次のようになります:
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 の一覧が表示されます。
次のステップ
このガイドを完了した後は、Squid が提供するその他の機能も自由に探求してください。MongoDB 統合を利用することで、mutate your data も可能です。さらに、特定のデータ部分へのアクセスを制御するために、authentication を設定することもできます。