Megosztás a következőn keresztül:

Útmutató: Fluid-alkalmazások üzembe helyezése az Azure Static Web Apps használatával

  • Cikk

Ez a cikk bemutatja, hogyan helyezhet üzembe Fluid-alkalmazásokat az Azure Static Web Apps használatával. A FluidHelloWorld adattár tartalmaz egy DiceRoller nevű Fluid-alkalmazást, amely lehetővé teszi az összes csatlakoztatott ügyfél számára, hogy dobjon egy die-t, és tekintse meg az eredményt. Ebben az útmutatóban üzembe helyezi a DiceRoller alkalmazást az Azure Static Web Appsben a Visual Studio Code bővítmény használatával.

Ha nem rendelkezik Azure-előfizetéssel, hozzon létre egy ingyenes próbaverziós fiókot.

Előfeltételek

Az adattár elágazása és klónozása

Lépjen az https://github.com/microsoft/FluidHelloWorld Elágazás gombra, és kattintson az elágazás gombra a FluidHelloWorld adattár saját elágazásának létrehozásához.

Ezután klónozza az elágazást a helyi gépre az alábbi paranccsal.

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

Mindenképpen cserélje le <YOUR_GITHUB_ACCOUNT_NAME> a GitHub-felhasználónevét.

Ezután nyissa meg a Visual Studio Code-ot, és nyissa meg a Fájl > megnyitása mappát a klónozott tárház megnyitásához a szerkesztőben.

Csatlakozás az Azure Fluid Relaybe

Az Azure Fluid Relayhez az Azure-erőforrás létrehozásakor egyedileg létrehozott bérlőazonosító és kulcs megadásával csatlakozhat. Létrehozhat saját jogkivonat-szolgáltatói implementációt, vagy használhatja azt a két jogkivonat-szolgáltatói implementációtAzureFunctionTokenProvider, amelyet a Dinamikus keretrendszer biztosít.

Ha többet szeretne megtudni az InsecureTokenProvider helyi fejlesztéshez való használatáról, tekintse meg Csatlakozás a szolgáltatásra, valamint a hitelesítésre és az engedélyezésre az alkalmazásban.

Az AzureFunctionTokenProvider használata

Az AzureFunctionTokenProvider egy olyan jogkivonat-szolgáltató, amely nem teszi közzé a titkos kulcsot az ügyféloldali kódban, és éles helyzetekben is használható. Ezzel a jogkivonat-szolgáltatói implementációval lekérhet egy jogkivonatot egy HTTPS-végpontról, amely a hozzáférési jogkivonatok bérlői kulccsal való aláírásáért felelős. Ezzel biztonságosan létrehozhatja a jogkivonatot, és visszaküldheti azt az ügyfélalkalmazásnak.

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

A jogkivonat-szolgáltató használatához telepítenie kell egy HTTPS-végpontot, amely tokeneket fog aláírni, és át kell adnia az URL-címet a végpontnak az AzureFunctionTokenProvidernek.

Azure-függvény üzembe helyezése az Azure Static Web Apps használatával

Az Azure Static Web Apps lehetővé teszi egy teljes veremű webhely fejlesztését anélkül, hogy egy teljes webszolgáltatási környezet kiszolgálóoldali konfigurációjával kellene foglalkoznia. Az Azure Functionst a statikus webhely mellett is üzembe helyezheti. Ezzel a funkcióval üzembe helyezhet egy HTTP által aktivált Azure-függvényt, amely tokeneket fog aláírni.

További információ az Azure Függvényalapú API-k statikus webalkalmazásban való üzembe helyezéséről: API hozzáadása az Azure Static Web Appshez az Azure Functions használatával.

Megjegyzés:

Az Azure-függvények implementálásában használt Azure-függvénykód használatával jogkivonatokat írhat alá a függvény implementálásához.

Az Azure-függvény üzembe helyezése után frissítenie kell az AzureFunctionTokenProvidernek átadott URL-címet.

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

Futtassa a parancsot a npm run build gyökérkönyvtárból az alkalmazás újraépítéséhez. Ez létrehoz egy dist mappát az alkalmazás kódjával, amelyet üzembe kell helyezni a statikus webalkalmazásban.

Bejelentkezés az Azure-ba

Ha már használja az Azure-szolgáltatásbővítményeket, akkor már be kell jelentkeznie, és kihagyhatja ezt a lépést.

Miután telepített egy bővítményt a Visual Studio Code-ban, be kell jelentkeznie az Azure-fiókjába.

  1. A Visual Studio Code-ban válassza az Azure Explorer ikont, majd válassza a Bejelentkezés az Azure-ba lehetőséget, és kövesse az utasításokat.

    Sign in to Azure through VS Code

  2. Bejelentkezés után ellenőrizze, hogy az Azure-fiók e-mail-címe megjelenik-e az állapotsoron, és hogy az előfizetés(ek) megjelennek-e az Azure Explorerben :

    VS Code Azure explorer showing subscriptions

Statikus webalkalmazás létrehozása

  1. Az Azure-bővítmények ablak megnyitásához a Visual Studio Code-ban kattintson a Tevékenység sávon az Azure-emblémára.

    An image of the Azure Logo on a white background.

    Megjegyzés:

    A folytatáshoz be kell jelentkeznie az Azure-ba és a GitHubra a Visual Studio Code-ban. Ha még nincs hitelesítve, a bővítmény kérni fogja, hogy jelentkezzen be mindkét szolgáltatásba a létrehozási folyamat során.

  2. Válassza az F1 lehetőséget a Visual Studio Code parancskatalógusának megnyitásához.

  3. Írja be a Statikus webalkalmazás létrehozása parancsmezőt.

  4. Válassza az Azure Static Web Apps: Statikus webalkalmazás létrehozása... és az Enter lehetőséget.

    Setting Érték
    Név Adja meg a saját-első-static-web-appot
    Region Válassza ki az Önhöz legközelebb eső régiót.
    Előre beállított buildelés Select Custom.

  5. Adja meg azokat a beállításokat, amelyek megfelelnek a keretrendszer előre beállított beállításának.

    Setting Érték
    Az alkalmazáskód helye Enter /src
    Az Azure-függvénykód helye api

  6. Az alkalmazás létrehozása után megerősítő értesítés jelenik meg a Visual Studio Code-ban.

    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.

    Mivel az üzembe helyezés folyamatban van, a Visual Studio Code bővítmény jelenti Önnek a build állapotát.

    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.

    Az üzembe helyezés befejezése után közvetlenül a webhelyére navigálhat.

  7. A webhely böngészőben való megtekintéséhez kattintson a jobb gombbal a projektre a Static Web Apps bővítményben, és válassza a Webhely tallózása lehetőséget.

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

  8. Az alkalmazáskód, az Azure-függvény és a buildkimenet helye a azure-static-web-apps-xxx-xxx-xxx.yml könyvtárban /.github/workflows található munkafolyamat-fájl része. Ez a fájl automatikusan létrejön a statikus webalkalmazás létrehozásakor. Egy GitHub Actionst határoz meg a statikus webalkalmazás létrehozásához és üzembe helyezéséhez.

Clean up resources

Ha nem folytatja az alkalmazás használatát, a bővítményen keresztül törölheti az Azure Static Web Apps-példányt.

A Visual Studio Code Explorer ablakban térjen vissza a Static Web Apps szakaszhoz, és kattintson a jobb gombbal az első-static-webalkalmazásomra, és válassza a Törlés lehetőséget.

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