Procedimiento: Implementación de aplicaciones fluidas mediante Azure Static Web Apps

En este artículo se muestra cómo implementar aplicaciones de Fluid mediante Azure Static Web Apps. El repositorio FluidHelloWorld contiene una aplicación de Fluid denominada DiceRoller que permite que todos los clientes conectados lancen un dado y vean el resultado. En este artículo de procedimiento, implementará la aplicación DiceRoller en Azure Static Web Apps mediante la extensión de Visual Studio Code.

Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.

Requisitos previos

• GitHub
• Cuenta de Azure
• Visual Studio Code
• Extensión de Azure Static Web Apps para Visual Studio Code
• Instalación de Git

Bifurcación y clonación del repositorio

Vaya a https://github.com/microsoft/FluidHelloWorld y haga clic en el botón Bifurcar para crear su propia bifurcación del repositorio FluidHelloWorld.

Luego clone la bifurcación en la máquina local mediante el siguiente comando.

git clone -b main-azure https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/FluidHelloWorld.git

Asegúrese de reemplazar <YOUR_GITHUB_ACCOUNT_NAME> por el nombre de usuario de GitHub.

Después, abra Visual Studio Code y vaya a Archivo > Abrir carpeta para abrir el repositorio clonado en el editor.

Conexión a Azure Fluid Relay

Para conectarse a Azure Fluid Relay, proporcione el identificador y la clave de inquilino que se generan de forma única al crear el recurso de Azure. Puede crear su propia implementación del proveedor de tokens o puede usar las dos implementaciones del proveedor de tokens que proporciona Fluid Framework.AzureFunctionTokenProvider

Para obtener más información sobre el uso de InsecureTokenProvider para el desarrollo local, consulte Conexión al servicio y Autenticación y autorización en una aplicación.

Uso de AzureFunctionTokenProvider

AzureFunctionTokenProvider es un proveedor de tokens que no expone la clave secreta en el código del lado cliente, y se puede usar en escenarios de producción. Esta implementación de proveedor de tokens se puede usar para capturar un token de un punto de conexión HTTPS responsable de firmar tokens de acceso con la clave de inquilino. Esto ofrece una manera segura de generar el token y devolverlo a la aplicación cliente.

import { AzureClient, AzureFunctionTokenProvider } from "@fluidframework/azure-client";

const config = {
    tenantId: "myTenantId",
    tokenProvider: new AzureFunctionTokenProvider("https://myAzureAppUrl"+"/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
    endpoint: "https://myServiceEndpointUrl",
    type: "remote",
};

const clientProps = {
    connection: config,
};

const client = new AzureClient(clientProps);

Para usar este proveedor de tokens, debe implementar un punto de conexión HTTPS que firmará tokens, y pasar a AzureFunctionTokenProvider la dirección URL al punto de conexión.

Implementación de una instancia de Azure Functions mediante Azure Static Web Apps

Azure Static Web Apps le permite desarrollar un sitio web de pila completa sin necesidad de tratar con la configuración del lado servidor de un entorno de hospedaje web completo. Puede implementar Azure Functions junto con el sitio web estático. Con esta funcionalidad, puede implementar una instancia de Azure Functions desencadenada por HTTP que firmará los tokens.

Para obtener más información sobre la implementación de API con tecnología de Azure Functions en una aplicación web estática, consulte Incorporación de una API en Azure Static Web Apps con Azure Functions.

Nota:

Para implementar la función, puede usar el código de Azure Functions de ejemplo en Implementación de una instancia de Azure Functions para firmar tokens.

Una vez implementada la instancia de Azure Functions, debe actualizar la dirección URL que se pasa a AzureFunctionTokenProvider.

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

const config = {
    tenantId: "myTenantId",
    tokenProvider: new AzureFunctionTokenProvider("https://myStaticWebAppUrl/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
    endpoint: "https://myServiceEndpointUrl",
    type: "remote",
};

const clientProps = {
    connection: config,
};

const client = new AzureClient(config);

Ejecute el comando npm run build desde el directorio raíz para recompilar la aplicación. Esto generará una carpeta dist con el código de aplicación que se debe implementar en la aplicación web estática.

Inicio de sesión en Azure

Si ya usa las extensiones de servicio de Azure, ya debe haber iniciado sesión y puede omitir este paso.

Después de instalar una extensión en Visual Studio Code, debe iniciar sesión en su cuenta de Azure.

1. En Visual Studio Code, seleccione el icono del explorador de Azure y, a continuación, seleccione Iniciar sesión en Azure y siga las indicaciones.

   

2. Después de iniciar sesión, compruebe que la dirección de correo electrónico de la cuenta de Azure aparece en la barra de estado y que las suscripciones aparecen en el explorador de Azure:

   

Creación de una aplicación web estática

1. En Visual Studio Code, seleccione el logotipo de Azure en la barra de actividades para abrir la ventana extensiones de Azure.

   

   Nota:

   Para continuar, tiene que iniciar sesión en Azure y GitHub en Visual Studio Code. Si todavía no está autenticado, la extensión le solicitará que inicie sesión en los dos servicios durante el proceso de creación.

2. En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.

3. Escriba Crear aplicación web estática en el cuadro de comandos.

4. Seleccione Azure Static Web Apps: Crear aplicación web estática... y seleccione Entrar.

   Ningún marco

   Configuración	Value
   Nombre	Escriba my-first-static-web-app.
   Region	Seleccione la región más cercana a la suya.
   Compilar preestablecido	seleccione Personalizada.

   Angular

   Configuración	Value
   Nombre	Escriba my-first-static-web-app.
   Region	Seleccione la región más cercana a la suya.
   Compilar preestablecido	seleccione Personalizada.

   React

   Configuración	Value
   Nombre	Escriba my-first-static-web-app.
   Region	Seleccione la región más cercana a la suya.
   Compilar preestablecido	seleccione Personalizada.

   Vue

   Configuración	Value
   Nombre	Escriba my-first-static-web-app.
   Region	Seleccione la región más cercana a la suya.
   Compilar preestablecido	seleccione Personalizada.

5. Escriba los valores de configuración para que coincidan con la opción preestablecida del marco.

   Ningún marco

   Configuración	Value
   Ubicación del código de la aplicación	Escriba /src
   Ubicación del código de Azure Functions	api

   Angular

   Configuración	Value
   Ubicación del código de la aplicación	Escriba /.
   Ubicación del código de Azure Functions	api

   React

   Configuración	Value
   Ubicación del código de la aplicación	Escriba /.
   Ubicación del código de Azure Functions	api

   Vue

   Configuración	Value
   Ubicación del código de la aplicación	Escriba /.
   Ubicación del código de Azure Functions	api

6. Una vez creada la aplicación, se muestra una notificación de confirmación en Visual Studio Code.

   

   A medida que la implementación está en curso, la extensión Visual Studio Code le informa del estado de compilación.

   

   Una vez completada la implementación, puede navegar directamente al sitio web.

7. Para ver el sitio web en el explorador, haga clic con el botón derecho en el proyecto en la extensión de Static Web Apps y seleccione Browse site (Examinar sitio).

   

8. La ubicación del código de la aplicación, la instancia de Azure Functions y la salida de compilación forman parte del archivo de flujo de trabajo azure-static-web-apps-xxx-xxx-xxx.yml ubicado en el directorio /.github/workflows. Este archivo se crea automáticamente al crear la aplicación web estática. Define una Acción de GitHub para compilar e implementar la aplicación web estática.

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante la extensión.

En la ventana Explorador de Visual Studio Code, vuelva a la sección Static Web Apps y haga clic con el botón derecho en my-first-static-web-app y seleccione Eliminar.