クイックスタート:ダイスローラー

[アーティクル]
03/20/2023

このクイックスタートでは、Azure Fluid Relay サービスを使用するダイスローラーアプリを作成するプロセスについて説明します。このクイックスタートは次の 2 つのパートに分かれています。パート 1 では、アプリ自体を作成し、ローカルの Fluid サーバーで実行します。パート 2 では、ローカル開発サーバーではなく、Azure Fluid Relay サービスで実行するようにアプリを再構成します。

このクイックスタートで使用するサンプルコードはこちらで入手できます。

開発環境を設定する

このクイックスタートの手順を実行するには、Azure アカウントに Azure Fluid Relay がプロビジョニングされている必要があります。アカウントがない場合は、Azure を無料で試すことができます。

お使いのコンピューターに次のソフトウェアがインストールされている必要もあります。

テキストエディター: Visual Studio Code をお勧めします。
Git
Node.js バージョン 12.17 以降

ローカルで始める

最初に、GitHub からサンプルアプリをダウンロードする必要があります。新しいコマンドウィンドウを開き、コードをダウンロードするフォルダーに移動し、Git を使って FluidHelloWorld リポジトリをクローンし、main-azure ブランチをチェックアウトします。複製プロセスでは、プロジェクトファイルが格納された FluidHelloWorld という名前のサブフォルダーが作成されます。

git clone -b main-azure https://github.com/microsoft/FluidHelloWorld.git

新しく作成したフォルダーに移動し、依存関係をインストールして、アプリを起動します。

cd FluidHelloWorld
npm install
...
npm start

npm start コマンドを実行すると、2 つのことが行われます。まず、Fluid サーバーがローカルプロセスで起動されます。このサーバーは開発のみを目的とします。後で Azure でホストされる実稼働サーバーにアップグレードします。次に、新しいブラウザータブに、ダイスローラーアプリの新しいインスタンスのページが開きます。同じ URL で新しいタブを開き、ダイスローラーアプリのインスタンスをさらに作成できます。このアプリの各インスタンスは、ローカルの Fluid サービスを使用するように既定で構成されています。アプリの任意のインスタンスで [Roll] ボタンをクリックし、ダイスの状態がすべてのクライアントで変化する点に注目してください。

Azure Fluid Relay へのアップグレード

Azure Fluid Relay サービスで実行するには、ローカルサーバーではなく Azure サービスに接続するようにアプリの構成を更新する必要があります。

Azure クライアントの構成と作成

@fluidframework/azure-client および "@fluidframework/test-client-utils パッケージをインストールし、Azure クライアントと InsecureTokenProvider をインポートします。

import { InsecureTokenProvider } from "@fluidframework/test-client-utils";
import { AzureClient } from "@fluidframework/azure-client";

Azure クライアントを構成するには、app.js のローカル接続 serviceConfig オブジェクトを Azure Fluid Relay サービスの構成値に置き換える必要があります。これらの値は、Azure portal の Fluid Relay リソースの [アクセスキー] セクションで確認できます。値が置き換えられた後の serviceConfig オブジェクトは次のようになります。 (これらの値を見つける方法については、「方法: Azure Fluid Relay サービスをプロビジョニングする」を参照してください)。id と name のフィールドは任意であることに注意してください。

const user = { id: "userId", name: "userName" };

const serviceConfig = {
    connection: {
        tenantId: "MY_TENANT_ID", // REPLACE WITH YOUR TENANT ID
        tokenProvider: new InsecureTokenProvider("" /* REPLACE WITH YOUR PRIMARY KEY */, user),
        endpoint: "https://myServiceEndpointUrl", // REPLACE WITH YOUR SERVICE ENDPOINT
        type: "remote",
    }
};

警告

開発時には、InsecureTokenProvider を使用して認証トークンの生成と署名を行うことができます。これを、Azure Fluid Relay サービスが受け入れます。ただし、名前が示すように、これは安全ではないため、運用環境では使用しないでください。 Azure Fluid Relay リソースの作成プロセスではシークレットキーが提供され、これを、セキュリティで保護された要求への署名に使用できます。このシークレットが公開されないように、これを ITokenProvider の別の実装に置き換える必要があります。そうすれば、運用環境に公開される前に、開発者が提供する安全なバックエンドサービスからトークンがフェッチされます。

安全なアプローチの 1 つについて、「方法: Azure 関数を使用して TokenProvider を記述する」で概説しています。

クライアントのみの構築と実行

ローカルサーバーではなく Azure を使用するようにアプリに指定したので、クライアントアプリと共にローカルの Fluid サーバーを起動する必要がありません。こちらのコマンドを使用すれば、サーバーを起動せずに、クライアントを起動できます。

npm run start:client

🥳お疲れさまでした🎉 Fluid のコラボレーションの世界を開くための最初のステップを完了しました。

クイック スタート:ダイス ローラー