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.
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.
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
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.
En Visual Studio Code, seleccione F1 para abrir la paleta de comandos.
Escriba Crear aplicación web estática en el cuadro de comandos.
Seleccione Azure Static Web Apps: Crear aplicación web estática... y seleccione Entrar.
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. Escriba los valores de configuración para que coincidan con la opción preestablecida del marco.
Configuración Value Ubicación del código de la aplicación Escriba /src Ubicación del código de Azure Functions api 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.
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).
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.ymlubicado 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.
