Guida introduttiva: Rullo di didi

Articolo
03/14/2023

In questa guida introduttiva verrà illustrato il processo di creazione di un'app a rullo di dadi che usa il servizio Inoltro fluida di Azure. La guida introduttiva viene suddivisa in due parti. Nella prima parte verrà creata l'app stessa ed eseguita su un server fluida locale. Nella seconda parte si riconfigurerà l'app per l'esecuzione nel servizio Azure Fluid Relay anziché nel server di sviluppo locale.

Il codice di esempio usato in questa guida introduttiva è disponibile qui.

Configurazione dell'ambiente di sviluppo

Per seguire questa guida introduttiva, è necessario disporre di un account Azure e del provisioning di Inoltro fluida di Azure. Se non si dispone di un account, è possibile provare Azure gratuitamente.

È necessario anche il software seguente installato nel computer.

Editor di codice: è consigliabile Visual Studio Code.
Git
Node.js versione 12.17 o successiva

Introduzione in locale

Prima di tutto, è necessario scaricare l'app di esempio da GitHub. Aprire una nuova finestra di comando e passare alla cartella in cui si vuole scaricare il codice e usare Git per clonare il repository FluidHelloWorld e selezionare il main-azure ramo. Il processo di clonazione creerà una sottocartella denominata FluidHelloWorld con i file di progetto presenti.

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

Passare alla cartella appena creata, installare le dipendenze e avviare l'app.

cd FluidHelloWorld
npm install
...
npm start

Quando si esegue il npm start comando, verranno eseguite due cose. Prima di tutto, verrà avviato un server Fluid in un processo locale. Questo server è destinato solo allo sviluppo. Verrà eseguito l'aggiornamento a un server di produzione ospitato in Azure in un secondo momento. In secondo luogo, una nuova scheda del browser verrà aperta a una pagina contenente una nuova istanza dell'app a rullo di dadi. È possibile aprire nuove schede con lo stesso URL per creare istanze aggiuntive dell'app a rullo di dadi. Ogni istanza dell'app è configurata per impostazione predefinita per usare il servizio Fluid locale. Fare clic sul pulsante Roll in qualsiasi istanza dell'app e notare che lo stato della dice cambia in ogni client.

Aggiornamento a Inoltro fluido di Azure

Per eseguire il servizio Inoltro fluida di Azure, è necessario aggiornare la configurazione dell'app per connettersi al servizio di Azure anziché al server locale.

Configurare e creare un client di Azure

Installare @fluidframework/azure-client e "@fluidframework/test-client-utils pacchetti e importare client di Azure e InsecureTokenProvider.

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

Per configurare il client di Azure, sostituire l'oggetto di connessione serviceConfig locale in app.js con i valori di configurazione del servizio Inoltro fluido di Azure. Questi valori sono disponibili nella sezione "Access Key" della risorsa Di inoltro fluido nella portale di Azure. L'oggetto serviceConfig dovrebbe essere simile al seguente con i valori sostituiti. Per informazioni su come trovare questi valori, vedere Procedura: Effettuare il provisioning di un servizio di inoltro fluido di Azure. Si noti che i id campi e name sono arbitrari.

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

Avviso

Durante lo sviluppo, è possibile usare InsecureTokenProvider per generare e firmare i token di autenticazione che il servizio Inoltro fluido di Azure accetterà. Tuttavia, come implica il nome, questo è insicuro e non deve essere usato negli ambienti di produzione. Il processo di creazione delle risorse di Inoltro fluida di Azure offre una chiave privata che può essere usata per firmare le richieste sicure. Per assicurarsi che questo segreto non venga esposto, questa operazione deve essere sostituita con un'altra implementazione di ITokenProvider che recupera il token da un servizio back-end sicuro e fornito dallo sviluppatore prima di rilasciare all'ambiente di produzione.

Un approccio sicuro è descritto in "Procedura: Scrivere tokenProvider con una funzione di Azure".

Compilare ed eseguire solo il client

Dopo aver indicato all'app di usare Azure anziché un server locale, non è necessario avviare il server fluida locale insieme all'app client. È possibile avviare il client senza avviare anche il server con questo comando.

npm run start:client

🥳Congratulazioni🎉 Hai fatto il primo passo per sbloccare il mondo della collaborazione fluida.

Condividi tramite