Szybki start: wałek kostkowy

Artykuł
03/14/2023

W tym przewodniku Szybki start przeprowadzimy proces tworzenia aplikacji wałka kostkowego korzystającej z usługi Azure Fluid Relay. Przewodnik Szybki start jest podzielony na dwie części. W części jednej utworzymy samą aplikację i uruchomimy ją na lokalnym serwerze Fluid. W drugiej części skonfigurujemy ponownie aplikację do uruchamiania względem usługi Azure Fluid Relay zamiast lokalnego serwera deweloperskiego.

Przykładowy kod używany w tym przewodniku Szybki start jest dostępny tutaj.

Konfigurowanie środowiska projektowego

Aby wykonać czynności opisane w tym przewodniku Szybki start, musisz mieć konto platformy Azure i aprowizowaną usługę Azure Fluid Relay. Jeśli nie masz konta, możesz bezpłatnie wypróbować platformę Azure.

Potrzebne będzie również następujące oprogramowanie zainstalowane na komputerze.

Edytor kodu — zalecamy Visual Studio Code.
Usługa Git
Node.js w wersji 12.17 lub nowszej

Wprowadzenie lokalnie

Najpierw musisz pobrać przykładową aplikację z usługi GitHub. Otwórz nowe okno polecenia i przejdź do folderu, w którym chcesz pobrać kod i użyć narzędzia Git, aby sklonować repozytorium FluidHelloWorld i wyewidencjonować main-azure gałąź. Proces klonowania spowoduje utworzenie podfolderu o nazwie FluidHelloWorld z plikami projektu w nim.

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

Przejdź do nowo utworzonego folderu, zainstaluj zależności i uruchom aplikację.

cd FluidHelloWorld
npm install
...
npm start

Po uruchomieniu npm start polecenia nastąpi dwie rzeczy. Najpierw serwer fluidu zostanie uruchomiony w procesie lokalnym. Ten serwer jest przeznaczony tylko do programowania. Uaktualnienie do serwera produkcyjnego hostowanego na platformie Azure zostanie później uaktualnione. Po drugie nowa karta przeglądarki zostanie otwarta na stronie zawierającej nowe wystąpienie aplikacji wałka do kostki. Możesz otworzyć nowe karty o tym samym adresie URL, aby utworzyć dodatkowe wystąpienia aplikacji wałka do kostki. Każde wystąpienie aplikacji jest domyślnie skonfigurowane do korzystania z lokalnej usługi Płynów. Kliknij przycisk Rzutuj w dowolnym wystąpieniu aplikacji i zwróć uwagę, że stan kostki zmienia się w każdym kliencie.

Uaktualnianie do usługi Azure Fluid Relay

Aby uruchomić usługę Azure Fluid Relay, należy zaktualizować konfigurację aplikacji w celu nawiązania połączenia z usługą platformy Azure zamiast serwera lokalnego.

Konfigurowanie i tworzenie klienta platformy Azure

Zainstaluj @fluidframework/azure-client pakiety i "@fluidframework/test-client-utils i zaimportuj klienta platformy Azure i insecureTokenProvider.

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

Aby skonfigurować klienta platformy Azure, zastąp obiekt połączenia serviceConfig lokalnego wartościami app.js konfiguracji usługi Azure Fluid Relay. Te wartości można znaleźć w sekcji "Klucz dostępu" zasobu przekaźnika płynów w Azure Portal. Obiekt serviceConfig powinien wyglądać podobnie do wartości zastąpionych. (Aby uzyskać informacje na temat znajdowania tych wartości, zobacz How to: Provision an Azure Fluid Relay service (Jak aprowizować usługę Azure Fluid Relay). Należy pamiętać, że id pola i name są dowolne.

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

Ostrzeżenie

Podczas programowania można użyć InsecureTokenProvider do generowania i podpisywania tokenów uwierzytelniania akceptowanych przez usługę Azure Fluid Relay. Jednak jak wskazuje nazwa, jest to niezabezpieczone i nie powinno być używane w środowiskach produkcyjnych. Proces tworzenia zasobów usługi Azure Fluid Relay zapewnia klucz tajny, który może służyć do podpisywania bezpiecznych żądań. Aby upewnić się, że ten wpis tajny nie zostanie ujawniony, należy zastąpić inną implementacją dostawcy ITokenProvider, która pobiera token z bezpiecznej, dostarczanej przez dewelopera usługi zaplecza przed wydaniem do środowiska produkcyjnego.

Jedną z bezpiecznych metod opisano w artykule "Instrukcje: pisanie tokenProvider przy użyciu funkcji platformy Azure".

Kompilowanie i uruchamianie tylko klienta

Po wskazaniu aplikacji na korzystanie z platformy Azure zamiast serwera lokalnego nie musisz uruchamiać lokalnego serwera fluidu wraz z aplikacją kliencką. Możesz uruchomić klienta bez uruchamiania serwera za pomocą tego polecenia.

npm run start:client

🥳Gratulacje🎉 Udało Ci się wykonać pierwszy krok w kierunku odblokowania świata współpracy płynu.

Udostępnij za pośrednictwem