Inicio rápido: aplicación que tira dados

Artículo
03/16/2023

En este inicio rápido, se le guiará por el proceso de creación de una aplicación que tira dados y que utiliza el servicio Azure Fluid Relay. El inicio rápido se divide en dos partes. En la primera parte, crearemos la propia aplicación y la ejecutaremos en un servidor de Fluid local. En la segunda parte, volveremos a configurar la aplicación para que se ejecute en el servicio Azure Fluid Relay en lugar de en el servidor de desarrollo local.

Se puede encontrar un código de ejemplo de este inicio rápido aquí.

Configurado su entorno de desarrollo

Para seguir con este inicio rápido, necesitará una cuenta de Azure y que tenga aprovisionado Azure Fluid Relay. Si no tiene una cuenta, puede probar Azure gratis.

También necesita tener el siguiente software instalado en el equipo.

Un editor de código: se recomienda utilizar Visual Studio Code.
Git
Node.js, versión 12.17 o posterior

Introducción a un servicio local

En primer lugar, deberá descargar la aplicación de ejemplo de GitHub. Abra una nueva ventana de comandos, vaya a la carpeta en la que quiera descargar el código y use Git para clonar el repositorio FluidHelloWorld y extraer la rama main-azure del repositorio. El proceso de clonación creará una subcarpeta denominada FluidHelloWorld con los archivos de proyecto que contiene.

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

Vaya a la carpeta recién creada, instale las dependencias e inicie la aplicación.

cd FluidHelloWorld
npm install
...
npm start

Al ejecutar el comando npm start, sucederán dos cosas. En primer lugar, se iniciará un servidor de Fluid en un proceso local. Este servidor está pensado solo para el desarrollo. Se actualizará a un servidor de producción hospedado en Azure posteriormente. En segundo lugar, se abrirá una nueva pestaña del explorador en una página que contiene una nueva instancia de la aplicación que tira dados. Puede abrir nuevas pestañas con la misma dirección URL para crear instancias adicionales de la aplicación que tira dados. Cada instancia de la aplicación está configurada de forma predeterminada para utilizar el servicio Fluid local. Haga clic en el botón Roll (Tirar) en cualquier instancia de la aplicación y observe que el estado de los dados cambia en cada cliente.

Actualización a Azure Fluid Relay

Para una ejecución en el servicio Azure Fluid Relay, deberá actualizar la configuración de la aplicación para conectarse al servicio de Azure en lugar de al servidor local.

Configuración y creación de un cliente de Azure

Instale los paquetes @fluidframework/azure-client y "@fluidframework/test-client-utils, e importe el cliente de Azure e InsecureTokenProvider.

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

Para configurar el cliente de Azure, reemplace los valores del objeto serviceConfig en app.js por los valores de configuración del servicio Azure Fluid Relay. Estos valores se pueden encontrar en la sección "Clave de acceso" del recurso Fluid Relay en Azure Portal. El objeto serviceConfig debe tener este aspecto con los valores reemplazados. (Para obtener información sobre cómo encontrar estos valores, vea Procedimiento: Aprovisionamiento de un servicio Azure Fluid Relay). Tenga en cuenta que los campos id y name son arbitrarios.

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

Advertencia

Durante el desarrollo, puede utilizar InsecureTokenProvider para generar y firmar tokens de autenticación que el servicio Azure Fluid Relay aceptará. Sin embargo, como su nombre indica, esto no es seguro y no se debe utilizar en entornos de producción. El proceso de creación de recursos de Azure Fluid Relay proporciona una clave secreta que se puede utilizar para firmar solicitudes seguras. Para asegurarse de que este secreto no se exponga, debe reemplazarse por otra implementación de ITokenProvider que capture el token de un servicio back-end seguro y proporcionado por el desarrollador antes de publicarlo en producción.

Un enfoque seguro se describe en "Cómo escribir un TokenProvider con una función de Azure".

Compilación y ejecución del cliente únicamente

Ahora que ha apuntado a la aplicación para que utilice Azure en lugar de un servidor local, no es necesario iniciar el servidor de Fluid local junto con la aplicación cliente. Puede iniciar el cliente sin iniciar también el servidor con este comando.

npm run start:client

🥳Enhorabuena🎉 Ya ha dado el primer paso en el buen camino para abrir el mundo de la colaboración con Fluid.

Compartir a través de