クイック スタート:ダイス ローラー
このクイック スタートでは、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 のコラボレーションの世界を開くための最初のステップを完了しました。