Snabbstart: Tärningsrulle

Artikel
03/14/2023

I den här snabbstarten går vi igenom processen med att skapa en tärningsrollerapp som använder Azure Fluid Relay-tjänsten. Snabbstarten är uppdelad i två delar. I del ett skapar vi själva appen och kör den mot en lokal Fluid-server. I del två konfigurerar vi om appen så att den körs mot Azure Fluid Relay-tjänsten i stället för den lokala utvecklingsservern.

Exempelkoden som används i den här snabbstarten finns här.

Ställt in din utvecklingsmiljö

Om du vill följa med i den här snabbstarten behöver du ett Azure-konto och Azure Fluid Relay etablerat. Om du inte har något konto kan du prova Azure kostnadsfritt.

Du behöver också följande programvara installerad på datorn.

En kodredigerare – Vi rekommenderar Visual Studio Code.
Git
Node.js version 12.17 eller senare

Komma igång lokalt

Först måste du ladda ned exempelappen från GitHub. Öppna ett nytt kommandofönster och navigera till mappen där du vill ladda ned koden och använd Git för att klona FluidHelloWorld-lagringsplatsen och kolla in grenen main-azure . Kloningsprocessen skapar en undermapp med namnet FluidHelloWorld med projektfilerna i den.

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

Gå till den nyligen skapade mappen, installera beroenden och starta appen.

cd FluidHelloWorld
npm install
...
npm start

När du kör npm start kommandot händer två saker. Först startas en Fluid-server i en lokal process. Den här servern är endast avsedd för utveckling. Du uppgraderar till en Azure-värdbaserad produktionsserver senare. För det andra öppnas en ny webbläsarflik på en sida som innehåller en ny instans av tärningsrollerappen. Du kan öppna nya flikar med samma URL för att skapa ytterligare instanser av tärningsrollerappen. Varje instans av appen konfigureras som standard för att använda din lokala Fluid-tjänst. Klicka på knappen Rulla i valfri instans av appen och observera att tärningstillståndet ändras i varje klient.

Uppgradera till Azure Fluid Relay

Om du vill köra mot Azure Fluid Relay-tjänsten måste du uppdatera appens konfiguration för att ansluta till Azure-tjänsten i stället för din lokala server.

Konfigurera och skapa en Azure-klient

Installera @fluidframework/azure-client och "@fluidframework/test-client-utils packages och importera Azure Client och InsecureTokenProvider.

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

Om du vill konfigurera Azure-klienten ersätter du det lokala anslutningsobjektet serviceConfig i app.js med konfigurationsvärdena för Azure Fluid Relay-tjänsten. Dessa värden finns i avsnittet "Åtkomstnyckel" i Fluid Relay-resursen i Azure Portal. Objektet serviceConfig bör se ut så här med de värden som har ersatts. (Information om hur du hittar dessa värden finns i Så här etablerar du en Azure Fluid Relay-tjänst.) Observera att fälten id och name är godtyckliga.

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

Varning

Under utvecklingen kan du använda InsecureTokenProvider för att generera och signera autentiseringstoken som Azure Fluid Relay-tjänsten accepterar. Men som namnet antyder är detta osäkert och bör inte användas i produktionsmiljöer. Processen för att skapa Azure Fluid Relay-resurser ger dig en hemlig nyckel som kan användas för att signera säkra begäranden. För att säkerställa att den här hemligheten inte exponeras bör detta ersättas med en annan implementering av ITokenProvider som hämtar token från en säker serverdelstjänst som tillhandahålls av utvecklare innan den släpps till produktion.

En säker metod beskrivs i "Så här skriver du en TokenProvider med en Azure-funktion".

Skapa och kör endast klienten

Nu när du har pekat ut din app för att använda Azure i stället för en lokal server behöver du inte starta den lokala Fluid-servern tillsammans med din klientapp. Du kan starta klienten utan att även starta servern med det här kommandot.

npm run start:client

🥳Grattis🎉 Du har tagit det första steget mot att låsa upp fluidsamarbetet.

Dela via