Azure Cosmos DB で、コア SQL API でのクロス オリジン リソース共有 (CORS) の “allowedOrigins” ヘッダーがサポートされるようになりました。この設定は、ポータルまたは ARM テンプレートで構成できます。CORS サポートにより、Web アプリは @azure/cosmos JavaScript ライブラリを使用してブラウザーから Cosmos DB と直接やり取りできます。中間層を経由する余分なホップがなくなるので、応答性に優れたエンドユーザー エクスペリエンスが得られます。

Azure Cosmos DB とは何ですか?

Azure Cosmos DB はグローバルに分散したマルチモデル データベース サービスであり、任意の Azure リージョンからデータの読み書きができます。このサービスでは、ターン キー グローバル分散、99 パーセンタイルで 10 ミリ秒未満の待ち時間、スループットとストレージのエラスティック スケーリングが提供されます。

Azure Cosmos DB コア SQL API では、Node.js とブラウザー環境の両方で動作する JavaScript ライブラリを提供します。このライブラリは CORS サポートを活用できるようになりました。このフィーチャーの利用にクライアント側の構成は不要です。ブラウザーから直接 Cosmos DB とのやり取りができるようになったので、Web アプリ経由の余分なホップがなくなり、Web シナリオでさらに高いパフォーマンスが得られます。下記にリンクを示すサンプルでは、Cosmos DB からの変更を直接リッスンでき、Web ソケットなどを使用した中間サーバーのセットアップが不要です。

import {CosmosClient} from "@azure/cosmos";

const client= new CosmosClient({
   endpoint: "https://<your-cosmos-account>documents.azure.com",
   auth: {} /* Permission token or read only key.Avoid master Key */
});

const todos = client.database("TodoApp").container("Todo").items;

todos.readAll().toArray()
     .then(({result})=>{
         for(const item of result) {
             const e = document.createElement("div")
             e.innerText = item.text;
             document.body.prepend(e);
         }
     });

こちらの簡単なサンプルでは、@azure/cosmos ライブラリを利用して動作する TypeScript と Webpack を取得し、Cosmos DB を全面的に活用し、あらゆるクライアントにリアルタイム更新を行う匿名速報アプリを構築します。

CORS の有効化

CORS の有効化には、ポータルまたは ARM テンプレートを使用できます。ワイルドカード “*” を使用してすべてのアクセス元を許可するか、完全修飾ドメイン名をコンマで区切って指定します (例: https://www.mydomain.com, https://mydomain.com, https://api.mydomain.com)。現在、ドメイン名の一部にワイルドカードを使用 (例: https://*.mydomain.net) することはできません。

ポータルで CORS を有効化するには、Cosmos DB アカウントに移動して、設定リストから [CORS] オプションを選択します。ここで許可するアクセス元を指定して、[保存] を選択してアカウントを更新します。

ブラウザーでの @azure/cosmos ライブラリの使用

現在、@azure/cosmos パッケージには CommonJS バージョンのライブラリのみが含まれています。ブラウザーでライブラリを使用するには、Rollup や Webpack などのツールを使用してブラウザー互換ライブラリを作成する必要があります。特定の Node ライブラリには専用のブラウザー モックが必要です。必要なモック設定を含む Webpack 構成ファイルのサンプルを以下に示します。

const path = require("path");

module.exports = {
   entry: "./src/index.ts",
   devtool: "inline-source-map",
   node: {
     net: "mock",
     tls: "mock"
   },
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist")
   }
};
 
もう 1 点、ブラウザーに関して検討すべきことは、多くの状況でマスター キーの使用が望ましくないことです。代わりに、リソース トークンか読み取り専用キーを使用するのが最善です。GitHub にあるこのサンプルでは、リソース トークンの動作を理解し、ユーザーにリソース トークンを与える前に Azure Functions などを使用して認証して権限を与える方法を示しています。ブラウザーベース アプリケーションでさらに詳細な認証パターンを使用する方法について、ブログでさらに公開する予定です。

開始する

まず、npm で @azure/cosmos ライブラリを調べ、ブラウザーベース アプリでの使用を開始してください。皆様からのフィードバックをぜひお聞かせください。電子メールで askcosmosdb@microsoft.com まで送信するか、GitHub リポジトリに問題を記録してください。

Twitter の @AzureCosmosDB をフォローして、最新の Azure #CosmosDB ニュースや機能の情報を常に把握してください。Azure Cosmos DB を利用して構築されたものを見られることを、本当に楽しみにしています。