Schnellstart: Würfelroller

  • Artikel

In diesem Schnellstart erfahren Sie, wie Sie eine Würfelroller-App erstellen, die den Azure Fluid Relay-Dienst verwendet. Der Schnellstart ist in zwei Teile unterteilt. Im ersten Teil erstellen wir die App selbst und führen sie auf einem lokalen Fluid-Server aus. Im zweiten Teil wird die App neu konfiguriert, sodass sie für den Azure Fluid Relay-Dienst anstatt auf dem lokalen Entwicklungsserver ausgeführt wird.

Den in diesem Schnellstart verwendeten Beispielcode finden Sie hier.

Einrichten der Entwicklungsumgebung

Für diesen Schnellstart benötigen Sie ein Azure-Konto und eine bereitgestellte Azure Fluid Relay-Instanz. Wenn Sie noch kein Konto haben, können Sie Azure kostenlos testen.

Außerdem muss die folgende Software auf Ihrem Computer installiert sein:

Erste Schritte in der lokalen Umgebung

Laden Sie zunächst die Beispiel-App von GitHub herunter. Öffnen Sie ein neues Befehlsfenster, und navigieren Sie zum Ordner, in den Sie den Code herunterladen möchten. Klonen Sie dann das Repository FluidHelloWorld mithilfe von Git, und checken Sie den Branch main-azure aus. Beim Klonen wird ein Unterordner mit dem Namen „FluidHelloWorld“ erstellt, in dem sich die Projektdateien befinden.

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

Navigieren Sie zum neu erstellten Ordner, installieren Sie Abhängigkeiten, und starten Sie die App.

cd FluidHelloWorld
npm install
...
npm start

Wenn Sie den Befehl npm start ausführen, geschehen zwei Dinge. Zunächst wird ein Fluid-Server in einem lokalen Prozess gestartet. Dieser Server ist nur für die Entwicklung vorgesehen. Sie führen später ein Upgrade auf einen in Azure gehosteten Produktionsserver durch. Zweitens wird eine neue Browserregisterkarte mit einer Seite geöffnet, die eine neue Instanz der Würfelroller-App enthält. Sie können neue Registerkarten mit der gleichen URL öffnen, um weitere Instanzen der Würfelroller-App zu erstellen. Jede Instanz der App ist standardmäßig für die Verwendung Ihres lokalen Fluid-Diensts konfiguriert. Klicken Sie in einer beliebigen Instanz der App auf die Schaltfläche Rollen, und beachten Sie, dass sich der Status des Würfels in jedem Client ändert.

Upgrade auf Azure Fluid Relay

Damit Ihre App für den Azure Fluid Relay-Dienst ausgeführt wird, müssen Sie ihre Konfiguration aktualisieren, um eine Verbindung mit Ihrem Azure-Dienst anstelle Ihres lokalen Servers herzustellen.

Konfigurieren und Erstellen eines Azure-Clients

Installieren Sie @fluidframework/azure-client und „@fluidframework/test-client-utils“-Pakete, und importieren Sie Azure-Client und InsecureTokenProvider.

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

Zum Konfigurieren des Azure-Clients ersetzen Sie das serviceConfig-Objekt der lokalen Verbindung in app.js durch Ihre Azure Fluid Relay-Dienstkonfigurationswerte. Diese Werte finden Sie im Abschnitt „Zugriffsschlüssel“ der Fluid Relay-Ressource im Azure-Portal. Ihr serviceConfig-Objekt sollte wie folgt aussehen, wenn die Werte ersetzt wurden. (Informationen zum Ermitteln dieser Werte finden Sie unter Bereitstellen eines Azure Fluid Relay-Diensts.) Beachten Sie, dass für die Felder id und name beliebige Werte festgelegt werden können.

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",
    }
};

Warnung

Während der Entwicklung können Sie InsecureTokenProvider verwenden, um Authentifizierungstoken zu generieren und zu signieren, die der Azure Fluid Relay-Dienst akzeptiert. Wie der Name schon sagt, ist er jedoch unsicher und sollte in Produktionsumgebungen nicht verwendet werden. Während der Azure Fluid Relay-Ressourcenerstellung erhalten Sie einen geheimen Schlüssel, der zum Signieren sicherer Anforderungen verwendet werden kann. Um sicherzustellen, dass dieses Geheimnis nicht zugänglich gemacht wird, sollte muss es durch eine andere Implementierung von „ITokenProvider“ ersetzt werden, die das Token von einem sicheren, vom Entwickler bereitgestellten Back-End-Dienst abruft, bevor es für die Produktion freigegeben wird.

Ein sicherer Ansatz wird in der Anleitung „Schreiben eines TokenProvider-Elements mit einer Azure-Funktion“ beschrieben.

Erstellen und Ausführen nur des Clients

Da Sie Ihre Anwendung nun auf die Verwendung von Azure anstelle eines lokalen Servers verwiesen haben, müssen Sie den lokalen Fluid-Server nicht zusammen mit Ihrer Client-Anwendung starten. Sie können den Client mit diesem Befehl starten, ohne auch den Server zu starten.

npm run start:client

🥳Herzlichen Glückwunsch🎉 Sie haben den ersten Schritt zur Erschließung der Welt der Fluid-Zusammenarbeit erfolgreich unternommen.