Procedure: Fluid-toepassingen implementeren met behulp van Azure Static Web Apps

  • Artikel

In dit artikel wordt gedemonstreert hoe u Fluid-apps implementeert met behulp van Azure Static Web Apps. De FluidHelloWorld-opslagplaats bevat een Fluid-toepassing met de naam DiceRoller waarmee alle verbonden clients een dobbelsteen kunnen rollen en het resultaat kunnen bekijken. In deze procedure implementeert u de DiceRoller-toepassing in Azure Static Web Apps met behulp van de Visual Studio Code-extensie.

Als u nog geen Azure-abonnement hebt, maakt u een gratis proefaccount.

Vereisten

Fork en kloon de opslagplaats

Navigeer naar https://github.com/microsoft/FluidHelloWorld en klik op de knop Fork om uw eigen fork van de FluidHelloWorld-opslagplaats te maken.

Kloon vervolgens uw fork naar uw lokale computer met behulp van de volgende opdracht.

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

Zorg ervoor dat u <YOUR_GITHUB_ACCOUNT_NAME> vervangt door de gebruikersnaam van uw GitHub-account.

Open vervolgens Visual Studio Code en ga naar De map Bestand > openen om de gekloonde opslagplaats in de editor te openen.

Verbinding maken naar Azure Fluid Relay

U kunt verbinding maken met Azure Fluid Relay door de tenant-id en -sleutel op te geven die uniek voor u wordt gegenereerd bij het maken van de Azure-resource. U kunt uw eigen tokenprovider-implementatie bouwen of u kunt de twee tokenprovider-implementaties gebruiken die de Vloeiend Framework een AzureFunctionTokenProvider.

Zie Verbinding maken ing naar de service en verificatie en autorisatie in uw app voor meer informatie over het gebruik van InsecureTokenProvider voor lokale ontwikkeling.

AzureFunctionTokenProvider gebruiken

AzureFunctionTokenProvider is een tokenprovider die de geheime sleutel niet beschikbaar maakt in code aan de clientzijde en kan worden gebruikt in productiescenario's. Deze implementatie van de tokenprovider kan worden gebruikt om een token op te halen van een HTTPS-eindpunt dat verantwoordelijk is voor het ondertekenen van toegangstokens met de tenantsleutel. Dit biedt een veilige manier om het token te genereren en door te geven aan de client-app.

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);

Als u deze tokenprovider wilt gebruiken, moet u een HTTPS-eindpunt implementeren dat tokens ondertekent en de URL doorgeeft aan uw eindpunt naar azureFunctionTokenProvider.

Een Azure-functie implementeren met behulp van Azure Static Web Apps

Met Azure Static Web Apps kunt u een volledige stackwebsite ontwikkelen zonder dat u te maken hebt met de configuratie aan de serverzijde van een volledige webhostingomgeving. U kunt Azure Functions naast uw statische website implementeren. Met deze mogelijkheid kunt u een door HTTP geactiveerde Azure-functie implementeren waarmee tokens worden ondertekend.

Zie Een API toevoegen aan Azure Static Web Apps met Azure Functions met Azure Functions voor meer informatie over het implementeren van API's met een azure-functie in uw statische web-app.

Notitie

U kunt de voorbeeldcode van de Azure-functie gebruiken bij het implementeren van een Azure-functie om tokens te ondertekenen om uw functie te implementeren.

Zodra uw Azure-functie is geïmplementeerd, moet u de URL bijwerken die is doorgegeven aan de 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);

Voer de npm run build opdracht uit vanuit de hoofdmap om de app opnieuw te bouwen. Hiermee wordt een dist map gegenereerd met de toepassingscode die moet worden geïmplementeerd in de statische web-app.

Aanmelden bij Azure

Als u de Azure-service-extensies al gebruikt, moet u al zijn aangemeld en kunt u deze stap overslaan.

Nadat u een extensie in Visual Studio Code hebt geïnstalleerd, moet u zich aanmelden bij uw Azure-account.

  1. Selecteer in Visual Studio Code het pictogram Azure Explorer, selecteer vervolgens Aanmelden bij Azure en volg de aanwijzingen.

    Sign in to Azure through VS Code

  2. Nadat u zich hebt aangemeld, controleert u of het e-mailadres van uw Azure-account wordt weergegeven op de statusbalk en of uw abonnementen worden weergegeven in Azure Explorer:

    VS Code Azure explorer showing subscriptions

Statische web-app maken

  1. Selecteer in Visual Studio Code het Azure-logo in de activiteitenbalk om het venster met Azure-extensies te openen.

    An image of the Azure Logo on a white background.

    Notitie

    U moet zich aanmelden bij Azure en GitHub in Visual Studio Code om door te gaan. Als u nog niet bent geverifieerd, wordt u via de extensie gevraagd u aan te melden bij beide services tijdens het maken.

  2. Selecteer F1 om het opdrachtenpalet van Visual Studio Code te openen.

  3. Voer statische web-app maken in het opdrachtvak in.

  4. Selecteer Azure Static Web Apps: Statische web-app maken... en selecteer Enter.

    Instelling Weergegeven als
    Naam Mijn-eerste-statische-web-app invoeren
    Regio Selecteer de regio het dichtst bij u in de buurt.
    Vooraf ingestelde build Selecteer Aangepast.

  5. Voer de instellingenwaarden voor die overeenkomen met uw vooraf ingestelde frameworkkeuze in.

    Instelling Weergegeven als
    Locatie van toepassingscode Voer /src in
    Locatie van Azure Function-code API

  6. Zodra de app is gemaakt, wordt er een bevestigingsbericht weergegeven in Visual Studio Code.

    An image of the notification shown in Visual Studio Code when the app is created. The notification reads: Successfully created new static web app my-first-static-web-app. GitHub Actions is building and deploying your app, it will be available once the deployment completes.

    Terwijl de implementatie wordt uitgevoerd, rapporteert de Visual Studio Code-extensie de buildstatus aan u.

    An image of the Static Web Apps extension UI, which shows a list of static web apps under each subscription. The highlighted static web app has a status of Waiting for Deployment displayed next to it.

    Zodra de implementatie is voltooid, kunt u rechtstreeks naar uw website navigeren.

  7. Als u de website in de browser wilt weergeven, klikt u met de rechtermuisknop op het project in de extensie Static Web Apps en selecteert u Bladeren door de site.

    An image of the menu that is shown when right-clicking on a static web app. The Browse Site option is highlighted.

  8. De locatie van uw toepassingscode, Azure Function en build-uitvoer maakt deel uit van het azure-static-web-apps-xxx-xxx-xxx.yml werkstroombestand in de /.github/workflows map. Dit bestand wordt automatisch gemaakt wanneer u de statische web-app maakt. Hiermee definieert u een GitHub Actions voor het bouwen en implementeren van uw statische web-app.

Resources opschonen

Als u deze toepassing verder niet gaat gebruiken, kunt u het Azure Static Web Apps-exemplaar verwijderen via de extensie.

Ga in het Visual Studio Code Explorer-venster terug naar het gedeelte Static Web Apps en klik met de rechtermuisknop op my-first-static-web-app en selecteer Verwijderen.

An image of the menu that is shown when right-clicking on a static web app. The Delete option is highlighted.