適用対象:
NoSQL
MongoDB
Vercel は、Web アプリケーションの開発とデプロイのための、使いやすく堅牢なプラットフォームを提供します。 この新しい統合により、開発者は構成済みバックエンド データベースを使用して Vercel アプリケーションを簡単に作成できるようになり、生産性が向上します。 この統合は、開発者がクリエイティブなアイデアをリアルタイムで現実に変えるのに役立ちます。
Azure Cosmos DB の Vercel との統合を開始する
このドキュメントは、グローバルに展開しているマルチモデル データベース サービスである Azure Cosmos DB の堅牢な機能を、Vercel の高パフォーマンスのデプロイおよびホスティング ソリューションと効果的に組み合わすことを目指している開発者に向けたものです。
この統合により、開発者は、Vercel のサーバーレス アーキテクチャと開発プラットフォームを活用しながら、汎用的でパフォーマンスの高い NoSQL データベースの利点を適用できます。
Azure Cosmos DB を統合するには、2 つの方法があります。
- Vercel 統合マーケットプレース経由
- コマンド ライン経由
統合マーケットプレースを使用して Cosmos DB を Vercel と統合する
このガイドは、Vercel プロジェクトを既に決定している場合、または既存の Vercel プロジェクトを統合したい場合に使用します
前提条件
Vercel プロジェクトの Vercel アカウント – 新しい Vercel プロジェクトを作成する方法について確認する
Azure Cosmos DB - クイック スタート: Azure Cosmos DB アカウントを作成するか無料の Try Cosmos DB アカウントを作成する
Next.js、React、TypeScript についてのある程度の基礎知識
Azure Cosmos DB を Vercel と統合する手順
Azure Cosmos DB との統合用の Vercel プロジェクトを選択します。 前提条件の準備ができたら、Vercel マーケットプレースの Cosmos DB 統合ページにアクセスし、[統合の追加] を選択します
統合用の "すべて" のプロジェクトまたは "特定の" プロジェクトを選択します。 このガイドでは、特定のプロジェクトを選択して進めていきます。 [インストール] を選択して続行します。
既存の Microsoft アカウントにサインインするか、アカウントがない場合は、次の手順で示すように新しいアカウントを作成します。
[作成] をクリックして、新しい Microsoft アカウントを作成します。
注
Microsoft アカウントは、Azure Cosmos DB アカウントとは異なります。 次の手順で Azure Cosmos DB アカウントを作成します
既存の Azure Cosmos DB アカウントを使用する場合は、既存のディレクトリ、サブスクリプション、および Azure Cosmos DB アカウントを選択します (手順 9 に進みます)。 新しい Azure Try Cosmos DB アカウントを作成するには、[新しいアカウントの作成] をクリックします。
API の種類 (現在は NOSQL と MongoDB API のみがサポートされています) を選択し、[アカウントの作成] をクリックします。
Try Azure Cosmos DB アカウントを正常に作成した後、[続行] をクリックします
ポップアップで [同意する] をクリックして、Try Azure Cosmos DB アカウントにアクセスします。 (統合を完了するには必須)。
[統合] を選択すると、完了です。
npm および コマンド ラインを使用して Cosmos DB を Vercel と統合する
npm、yarn、または pnpm を使用して create-next-app を実行して、例をブートストラップするには次のようにします。
npx create-next-app --example with-azure-cosmos with-azure-cosmos-app yarn create next-app --example with-azure-cosmos with-azure-cosmos-app pnpm create next-app --example with-azure-cosmos with-azure-cosmos-apppages/index.tsx を変更してコードを追加します。
必要に応じて pages/index.tsx に変更を加えます。 lib/cosmosdb.ts のコードをチェックして、
@azure/cosmosJavaScript クライアントの初期化方法を確認できます。変更を GitHub リポジトリにプッシュします。
環境変数を設定する
COSMOSDB_CONNECTION_STRING - Cosmos DB 接続文字列が必要です。 これらは、Azure portal のキー セクションで見つけることができます。
COSMOSDB_DATABASE_NAME - 使用しようとしているデータベースの名前。 これは、Azure Cosmos DB アカウントに既に存在している必要があります。
COSMOSDB_CONTAINER_NAME - 使用しようとしているコンテナーの名前。 これは、上記のデータベースに既に存在している必要があります。
マーケットプレース テンプレートを使用して Cosmos DB を Vercel と統合する
Azure Cosmos DB Next.js Starter があります。これは、ガイド付き構造と構成を備えたすぐに使用できる優れたテンプレートであり、初期プロジェクトのセットアップの時間と労力を節約できます。 [デプロイ] をクリックして Vercel 上でデプロイし、[View Repo] (リポジトリの表示) をクリックしてソースコードを表示します。
スターター リポジトリをクローンしたい GitHub リポジトリを選択します。
統合を選択して Cosmos DB 接続キーを設定します。この手順については、前のセクションで詳しく説明されています。
データベース名とコンテナー名用の環境変数を設定し、最後に [デプロイ] を選択します
正常に完了すると、完了ページにデプロイされたアプリへのリンクが含まれます。あるいは、Vercel プロジェクトのダッシュボードに移動してアプリのリンクを取得します。 これで、アプリが Vercel に正常にデプロイされました。
次のステップ
- Azure Cosmos DB の詳細については、「Azure Cosmos DB の概要」を参照してください。
- 新しい Vercel プロジェクトを作成します。
- Try Cosmos と制限について説明します。