Gyakorlat – Automatikus frissítések engedélyezése webalkalmazásban a SignalR Service használatával
A SignalR prototípushoz való hozzáadásához létre kell hoznia a következőt:
- Azure SignalR-erőforrás
- Néhány új függvény a SignalR támogatásához
- Az ügyfél frissítése a SignalR támogatásához
SignalR-erőforrás létrehozása
Létre kell hoznia egy Azure SignalR-erőforrást.
Térjen vissza a terminálhoz a SignalR-erőforrás létrehozásához.
Lépjen az
setup-resources
alkönyvtárra az erőforrás létrehozásához.cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..
Másolja ki a SignalR-erőforrás kapcsolati sztring. Erre szüksége lesz a kiszolgáló kódjának frissítéséhez.
Erőforrás típusa Környezeti változó Azure SignalR Más néven SIGNALR_CONNECTION_STRING
Kiszolgáló konfigurációs környezeti változóinak frissítése
A ./start/server/local.settings.json fájlban adjon hozzá egy változót a terminálban felsorolt értékkel elnevezett SIGNALR_CONNECTION_STRING
Értékek objektumhoz, és mentse a fájlt.
A signalr-open-connection
függvény létrehozása
A webes ügyfél a SignalR ügyfél-SDK használatával létesít kapcsolatot a kiszolgálóval. Az SDK egy signalr-open-connection nevű függvényen keresztül kéri le a kapcsolatot a szolgáltatáshoz való csatlakozáshoz.
Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát.
Keresse meg és válassza ki az Azure Functions: Create Function (Azure Functions: Függvény létrehozása) parancsot.
Válassza az Alapértelmezett beállítás lehetőséget, majd válassza a start/kiszolgáló lehetőséget a függvényalkalmazás helyének beállításához.
Válassza az Igen lehetőséget, amikor a projekt inicializálására van szükség a VS Code-tal való használathoz?
Ha a rendszer kéri, adja meg az alábbi információkat.
Név szerint Érték Sablon HTTP-eseményindító Név signalr-open-connection A signalr-open-connection.ts nevű fájl már elérhető a következő címen
./start/server/src/functions
: .Nyissa meg signalr-open-connection.ts , és cserélje le az összeset a következő kódra.
import { app, input } from '@azure/functions'; const inputSignalR = input.generic({ type: 'signalRConnectionInfo', name: 'connectionInfo', hubName: 'default', connectionStringSetting: 'SIGNALR_CONNECTION_STRING', }); app.http('open-signalr-connection', { authLevel: 'anonymous', handler: (request, context) => { return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) } }, route: 'negotiate', extraInputs: [inputSignalR] });
A SignalR kapcsolati adatait a függvény adja vissza.
A signalr-send-message
függvény létrehozása
Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát.
Keresse meg és válassza ki az Azure Functions: Create Function (Azure Functions: Függvény létrehozása) parancsot.
Válassza ki a függvényalkalmazás helyét kezdő/kiszolgálóként.
Ha a rendszer kéri, adja meg az alábbi információkat.
Név szerint Érték Sablon Azure Cosmos DB-eseményindító Név signalr-send-message
Cosmos DB kapcsolati sztring COSMOSDB_CONNECTION_STRING Monitorozni kívánt adatbázis neve stocksdb
Gyűjtemény neve stocks
Ellenőrzi a létezést, és automatikusan létrehozza a bérletgyűjteményt true A frissítések megjelenítéséhez frissítse a Visual Studio Code Explorer ablakát. A signalr-open-connection nevű fájl már elérhető a következő címen
./start/server/src/functions
: .Nyissa meg signalr-send-message.ts , és cserélje le az összeset a következő kódra.
import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions"; const goingOutToSignalR = output.generic({ type: 'signalR', name: 'signalR', hubName: 'default', connectionStringSetting: 'SIGNALR_CONNECTION_STRING', }); export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> { try { context.log(`Documents: ${JSON.stringify(documents)}`); documents.map(stock => { // @ts-ignore context.log(`Get price ${stock.symbol} ${stock.price}`); context.extraOutputs.set(goingOutToSignalR, { 'target': 'updated', 'arguments': [stock] }); }); } catch (error) { context.log(`Error: ${error}`); } } const options: CosmosDBv4FunctionOptions = { connection: 'COSMOSDB_CONNECTION_STRING', databaseName: 'stocksdb', containerName: 'stocks', createLeaseContainerIfNotExists: true, feedPollDelay: 500, handler: dataToMessage, extraOutputs: [goingOutToSignalR], }; app.cosmosDB('send-signalr-messages', options);
- Bejövő adatok definiálása: Az
comingFromCosmosDB
objektum meghatározza a Cosmos DB-eseményindítót a módosítások figyeléséhez. - Kimenő átvitel definiálása: Az
goingOutToSignalR
objektum ugyanazt a SignalR-kapcsolatot határozza meg. A hubName ugyanaz a hubdefault
. - Adatok csatlakoztatása az átvitelhez: A
dataToMessage
rendszer lekéri astocks
tábla módosított elemeit, és az egyes módosított elemeket külön-külön küldi el a SignalR-ben ugyanazzal aextraOutputs
központtaldefault
. - Csatlakozás az alkalmazáshoz: A
app.CosmosDB
kötéseket a függvény nevéhezsend-signalr-messages
köti.
Módosítások véglegesítése és leküldés a GitHubra
A terminálban véglegesítse a módosításokat az adattárban.
git add . git commit -m "Add SignalR functions" git push
A signalr-send-message
függvény létrehozása
Hozzon létre egy függvényalkalmazást és a kapcsolódó erőforrásokat az Azure-ban, amelyen közzéteheti az új függvénykódot.
Új függvényalkalmazás létrehozásához nyissa meg az Azure Portalt .
Az alábbi információk segítségével fejezze be az erőforrás-létrehozás alapjai lapot.
Név szerint Érték Erőforráscsoport Hozzon létre egy új erőforráscsoportnevet stock-prototype
.Függvényalkalmazás neve Írja fel a nevét a (z) gombra api
. Például:api-jamie
.Kód vagy tároló Válassza ki a kódot. Futtatókörnyezet verme Válassza a Node.js lehetőséget. Verzió Válassza ki a Node.js LTS-verzióját. Régió Válasszon ki egy Önhöz közeli régiót. Operációs rendszer Válassza a Linux lehetőséget. Üzemeltetés Válassza a Használati terv lehetőséget. Ne töltsön ki más lapokat, és válassza a Véleményezés + létrehozás lehetőséget, majd a Létrehozás lehetőséget. Folytatás előtt várja meg, amíg az üzembe helyezési folyamat befejeződik.
Válassza az Ugrás az erőforrásra lehetőséget az új függvényalkalmazás megnyitásához.
A GitHub üzembe helyezésének konfigurálása
Csatlakoztassa az új függvényalkalmazást a GitHub-adattárhoz a folyamatos üzembe helyezés engedélyezéséhez. Éles környezetben ehelyett kódmódosításokat helyezne üzembe egy előkészítési ponton, mielőtt felcserélné őket az éles környezetbe.
Az új függvényalkalmazás Azure Portal lapján válassza az Üzembe helyezési központ lehetőséget a bal oldali menüben.
Válassza a GitHub forrását.
Az üzembe helyezési konfiguráció befejezéséhez használja az alábbi információkat.
Név szerint Érték Organization Válassza ki a GitHub-fiókját. Adattár Keresse meg és válassza ki a mslearn-advocates.azure-functions-and-signalr
elemet.Ág Válassza ki a fő ágat. Munkafolyamat-beállítás Válassza a Munkafolyamat hozzáadása ...lehetőséget. Hitelesítés típusa Válassza ki a felhasználó által hozzárendelt identitást. Előfizetés Válassza ki a lap tetején látható előfizetést. Identitás Válassza az Új létrehozása lehetőséget. A beállítások mentéséhez válassza a szakasz tetején található Mentés lehetőséget. Ezzel létrehoz egy új munkafolyamat-fájlt az elágazott adattárban.
Ez az üzembe helyezési konfiguráció létrehoz egy GitHub Actions-munkafolyamatfájlt az adattárban. Frissítenie kell a munkafolyamat-fájlt a függvényalkalmazás megfelelő csomagútvonalának használatához.
Ezen a ponton előfordulhat, hogy a GitHub-telepítés hibát okoz az Azure-beli erőforráscsoportban létrehozott, felhasználó által hozzárendelt felügyelt identitás helytelen konfigurációja miatt.
A felügyelt identitás frissítése
- Az Azure Portal új függvényalkalmazás-lapján válassza ki az erőforráscsoportot az Áttekintés>alapjai területen, majd válassza ki a felügyelt identitást az Erőforrások területen. Ezt a felügyelt identitást a Functions hozta létre, amikor engedélyezte a GitHub üzembe helyezését.
- A Felügyelt identitás lapon válassza az Összevont hitelesítő adatok beállításai>lehetőséget, majd válassza ki a meglévő hitelesítő adatokat.
- A Github-fiók csatlakoztatásakor módosítsa az entitás környezetre vonatkozó beállítását, és adja meg
Production
a Környezet beállítást. - A hitelesítő adatok frissítéséhez válassza a Frissítés lehetőséget.
A GitHub üzembehelyezési munkafolyamatának szerkesztése
A Visual Studio Code terminálban húzza le az új munkafolyamat-fájlt az elágazásból (forrásból).
git pull origin main
Ennek egy új mappát kell elhelyeznie a .githubon a munkafolyamat-fájl elérési útjával:
.github/workflows/main_RESOURCE_NAME.yml
holRESOURCE_NAME
található a függvényalkalmazás neve.Nyissa meg a munkafolyamat-fájlt, és módosítsa a
name
fájl tetején lévő értéket a következőreServer
: .Mivel a forrásadattárban található a függvényalkalmazás egy alkönyvtárban, a műveletfájlnak ennek megfelelően módosítania kell. Az env szakaszban adjon hozzá egy új változót, amely
PACKAGE_PATH
a csomag elérési útját használja.env: PACKAGE_PATH: 'start/server'
Keresse meg a Projektfüggőségek feloldása az Npm lépéssel, és cserélje le a tartalmat a következő YAML-re a csomag alkönyvtár-elérési útjának használatához. A kritikus változás a parancs azon
pushd
elérési útja, amely tartalmazza a változótenv.PACKAGE_PATH
.- name: 'Resolve Project Dependencies Using Npm' shell: bash run: | pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}' npm install npm run build --if-present npm run test --if-present popd
Keresse meg a Zip összetevőt az üzembe helyezési lépéshez, és cserélje le a tartalmat a következő YAML-re a csomag alkönyvtár-elérési útjának használatához.
- name: Zip artifact for deployment run: | pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}' zip -r release.zip . popd cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip
A zip-fájl az adattár gyökerébe kerül, így az
../
érték szükséges ahhoz, hogy a zip-fájlt a gyökérre helyezze.Mentse a fájlt, és véglegesítse a módosításokat az adattárban.
git add . git commit -m "Update deployment workflow to use package path" git push
Ez a módosítás elindítja a munkafolyamat futtatását. A munkafolyamatot a GitHubon található elágazás Műveletek szakaszában tekintheti meg.
Az API-függvények környezeti változóinak konfigurálása
Az Azure Portalon keresse meg a függvényalkalmazást, és válassza a Beállítások>konfigurációja lehetőséget, majd válassza az Új alkalmazásbeállítás lehetőséget.
Adja meg a Cosmos DB és a SignalR kapcsolati sztring beállításait. Az értékeket a
local.settings.json
mappábanstart/server
találja.Név szerint Érték COSMOSDB_CONNECTION_STRING A Cosmos DB-fiók kapcsolati sztring. SIGNALR_CONNECTION_STRING A SignalR-fiók kapcsolati sztring. A beállítások mentéséhez válassza a Mentés lehetőséget.
Az API Functions üzembe helyezésének tesztelése
- Az Azure Portalon válassza az Áttekintés lehetőséget, és válassza az URL-címet az alkalmazás böngészőben való megnyitásához.
- Másolja ki az URL-címet, erre akkor lesz szüksége, amikor frissíti az ügyfélfájlt
.env
aBACKEND_URL
7. leckében végzett munka során. - Nyissa meg az URL-címet egy böngészőben az API-függvények teszteléséhez.
- Fűzze hozzá
/api/getStocks
az URL-címet a böngészőben, és nyomja le az Enter billentyűt. Egy részvényadatokat tartalmazó JSON-tömbnek kell megjelennie.
Frissítette a kiszolgálókódot, hogy a SignalR-lel visszaadja a készleteket, és üzembe helyezte egy függvényalkalmazásban. Ezután frissítenie kell az ügyfelet, hogy a SignalR használatával fogadja a frissítéseket.