3. lépés – A kereséssel kompatibilis .NET-webhely üzembe helyezése

A kereséssel kompatibilis webhely üzembe helyezése Azure Static Web Apps-webhelyként. Ez az üzembe helyezés magában foglalja a React alkalmazást a weblapokhoz és a keresési műveletekhez használható függvényalkalmazást is.

A statikus webalkalmazás lekéri az üzembe helyezéshez szükséges információkat és fájlokat a GitHubról a mintatárház elágazása segítségével.

Statikus webalkalmazás létrehozása a Visual Studio Code-ban

1. A Visual Studio Code-ban győződjön meg arról, hogy az adattár gyökérkönyvtárában van, és nem a tömeges beszúrású mappában (például azure-search-javascript-samples).

2. Válassza az Azure-t a tevékenységsávon, majd nyissa meg az erőforrásokat az oldalsávon.

3. Kattintson a jobb gombbal a Static Web Apps elemre , majd válassza a Statikus webalkalmazás létrehozása (Speciális) lehetőséget. Ha nem látja ezt a lehetőséget, ellenőrizze, hogy rendelkezik-e a Visual Studio Code Azure Functions-bővítményével.

   

4. Ha megjelenik egy előugró ablak a Visual Studio Code-ban, amely megkérdezi, hogy melyik ágból szeretne üzembe helyezni, válassza ki az alapértelmezett ágat, amely általában a fő.

   Ez a beállítás azt jelenti, hogy a rendszer csak az adott ágra vonatkozó módosításokat helyezi üzembe a statikus webalkalmazásban.

5. Ha megjelenik egy előugró ablak, amely a módosítások véglegesítését kéri, ne tegye ezt. A tömeges importálási lépés titkos kulcsainak nem szabad az adattárhoz lekötöttnek lenniük.

   A módosítások visszaállításához a Visual Studio Code-ban válassza a Forrásvezérlő ikont a Tevékenységsávon, majd jelölje ki az egyes módosított fájlokat a Módosítások listában, és válassza a Módosítások elvetése ikont.

6. Kövesse az utasításokat a statikus webalkalmazás létrehozásához:

   Felszólítás	Enter
   Válasszon egy erőforráscsoportot az új erőforrásokhoz.	Használja az oktatóanyaghoz létrehozott erőforráscsoportot.
   Adja meg az új statikus webalkalmazás nevét.	Hozzon létre egy egyedi nevet az erőforrásnak. A nevet például előre fel lehet függesztetni az adattár nevére, például: my-demo-static-web-app.
   Termékváltozat kiválasztása	Válassza ki az oktatóanyaghoz tartozó ingyenes termékváltozatot.
   Válasszon egy helyet az új erőforrásokhoz.	Node.js: Válassza ki West US 2 az Azure Functions programozási modell (PM) 4-es verziójának előzetes verzióját. C# és Python esetén válasszon ki egy Önhöz közeli régiót.
   Az alapértelmezett projektstruktúra konfigurálásához válassza a buildbeállítást.	Válassza az Egyéni lehetőséget.
   Válassza ki az ügyfélalkalmazás kódjának helyét	search-website-functions-v4/client Ez az elérési út az adattár gyökerétől a statikus webalkalmazásig.
   Az Azure Functions-kód helyének kiválasztása	search-website-functions-v4/api Ez az elérési út az adattár gyökerétől a statikus webalkalmazásig. Ha az adattárban nincsenek más függvények, a rendszer nem kéri a függvénykód helyét. Jelenleg további lépéseket kell végrehajtania a függvénykód helyének helyességének biztosításához. Ezeket a lépéseket az erőforrás létrehozása után hajtjuk végre, és ebben a cikkben dokumentáljuk őket.
   Adja meg a build kimenetének elérési útját...	build Ez az elérési út a statikus webalkalmazástól a létrehozott fájlokig.

   Ha hibás régióval kapcsolatos hibaüzenetet kap, győződjön meg arról, hogy az erőforráscsoport és a statikus webalkalmazás-erőforrás a hibaválaszban felsorolt támogatott régiók egyikében található.

7. A statikus webalkalmazás létrehozásakor egy GitHub-munkafolyamat YML-fájlja is létrejön helyben és az elágazóban lévő GitHubon. Ez a munkafolyamat az elágaztatásban hajtja végre a statikus webalkalmazás és -függvények kiépítését és üzembe helyezését.

   Ellenőrizze a statikus webalkalmazás üzembe helyezésének állapotát az alábbi módszerek bármelyikével:

   • Az Értesítések területen válassza a Műveletek megnyitása a GitHubon lehetőséget. Ekkor megnyílik egy, az elágazott adattárra mutatott böngészőablak.

   • Válassza a Műveletek lapot az elágazott adattárban. Látnia kell az elágazáson lévő összes munkafolyamat listáját.

   • Válassza ki az Azure: Tevékenységnaplót a Visual Code-ban. Az alábbi képernyőképhez hasonló üzenetnek kell megjelennie.

     

8. Az YML-fájl jelenleg az Azure-függvénykód hibás elérési út szintaxisával jön létre. Ezzel a kerülő megoldásokkal kijavíthatja a szintaxist, és újrafuttathatja a munkafolyamatot. Ezt a lépést az YML-fájl létrehozása után azonnal végrehajthatja. Egy új munkafolyamat indul el, amint leküldi a frissítéseket:

   1. Nyissa meg a könyvtárat a ./.github/workflows/ Visual Studio Code Explorerben.

   2. Nyissa meg az YML-fájlt.

   3. Görgessen az api-location elérési útra (a 31. sorban vagy annak közelében).

   4. Módosítsa az elérési út szintaxisát perjel használatára (csak api_location szerkesztésre van szükség, a környezethez más helyek is elérhetők):

      app_location: "search-website-functions-v4/client" # App source code path
      api_location: "search-website-functions-v4/api" # Api source code path - optional
      output_location: "build" # Built app content directory - optional
      

   5. Mentse a fájlt.

   6. Nyisson meg egy integrált terminált, és adja ki a következő GitHub-parancsokat a frissített YML elágazásához:

      git add -A
      git commit -m "fix path"
      git push origin main
      

   

   A folytatás előtt várjon, amíg a munkafolyamat végrehajtása befejeződik. Ez egy-két percet is igénybe vehet.

Az Azure AI Search lekérdezési kulcsának lekérése a Visual Studio Code-ban

1. A Visual Studio Code-ban nyisson meg egy új terminálablakot.

2. A lekérdezési API-kulcs lekérése ezzel az Azure CLI-paranccsal:

   az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc
   

3. Ezt a lekérdezési kulcsot a következő szakaszban használhatja. A lekérdezési kulcs engedélyezi a keresési index olvasási hozzáférését.

Környezeti változók hozzáadása az Azure Portalon

Az Azure-függvényalkalmazás csak a beállítások között adja vissza a keresési adatokat.

1. Válassza az Azure-t a tevékenységsávon.

2. Kattintson a jobb gombbal a Static Web Apps-erőforrásra, majd válassza a Megnyitás a portálon lehetőséget.

   

3. Válassza a Környezeti változók lehetőséget, majd válassza az + Alkalmazásbeállítás hozzáadása lehetőséget.

   

4. Adja hozzá az alábbi beállításokat:

   Beállítás	A keresési erőforrás értéke
   SearchApiKey	A keresési lekérdezési kulcs
   SearchServiceName	A keresési erőforrás neve
   SearchIndexName	good-books
   SearchFacets	authors*,language_code

   Az Azure AI Search más szintaxist igényel a gyűjtemények szűréséhez, mint a sztringek esetében. Adjon hozzá egy * mezőnevet a mező típusának Collection(Edm.String)jelöléséhez. Ez lehetővé teszi, hogy az Azure-függvény megfelelően adjon hozzá szűrőket a lekérdezésekhez.

5. Ellenőrizze a beállításokat, és győződjön meg arról, hogy az alábbi képernyőképhez hasonlóan néznek ki.

   

6. Térjen vissza a Visual Studio Code-hoz.

7. Frissítse a statikus webalkalmazást az alkalmazás beállításainak és funkcióinak megtekintéséhez.

   

Ha nem látja az alkalmazás beállításait, tekintse meg újra a GitHub-munkafolyamat frissítésének és újraindításának lépéseit.

Keresés használata a statikus webalkalmazásban

1. A Visual Studio Code-ban nyissa meg a Tevékenységsávot, és válassza az Azure ikont.

2. Az Oldalsávon kattintson a jobb gombbal az Azure-előfizetésére a Static Web Apps terület alatt, és keresse meg az oktatóanyaghoz létrehozott statikus webalkalmazást.

3. Kattintson a jobb gombbal a statikus webalkalmazás nevére, és válassza a Webhely tallózása lehetőséget.

   

4. Válassza a Megnyitás lehetőséget az előugró párbeszédpanelen.

5. A webhely keresősávjában adjon meg egy keresési lekérdezést, például code, hogy a javaslat funkció könyvcímeket javasoljon. Válasszon ki egy javaslatot, vagy folytassa a saját lekérdezés beírását. Nyomja le az Enter billentyűt, amikor befejezte a keresési lekérdezést.

6. Tekintse át az eredményeket, majd válasszon ki egyet a könyvek közül a további részletek megtekintéséhez.

Hibaelhárítás

Ha a webalkalmazás nem lett üzembe helyezve vagy működik, a probléma meghatározásához és megoldásához használja az alábbi listát:

• Sikeres volt az üzembe helyezés?

  Annak megállapításához, hogy az üzembe helyezés sikeres volt-e, meg kell keresnie a mintaadattár elágazását, és át kell tekintenie a GitHub-művelet sikerességét vagy sikertelenségét. Csak egy műveletnek kell lennie, és statikus webalkalmazás-beállításokkal kell rendelkeznie a , api_locationés output_location.app_location Ha a művelet telepítése nem sikerült, tekintse meg a műveleti naplókat, és keresse meg az utolsó hibát.

• Működik az ügyfélalkalmazás (előtérbeli) alkalmazás?

  El kell tudnia jutnia a webalkalmazáshoz, és sikeresen meg kell jelennie. Ha az üzembe helyezés sikeres volt, de a webhely nem jelenik meg, ez problémát okozhat az alkalmazás újraépítéséhez konfigurált statikus webalkalmazással kapcsolatban, amint az Az Azure-ban van.

• Működik az API (kiszolgáló nélküli háttérrendszer) alkalmazás?

  Képesnek kell lennie az ügyfélalkalmazással való interakcióra, a könyvek keresésére és a szűrésre. Ha az űrlap nem ad vissza értékeket, nyissa meg a böngésző fejlesztői eszközeit, és állapítsa meg, hogy az API-ra irányuló HTTP-hívások sikeresek voltak-e. Ha a hívások nem voltak sikeresek, a legvalószínűbb ok, ha az API-végpont nevének és a Keresési lekérdezési kulcsnak a statikus webalkalmazás-konfigurációi helytelenek.

  Ha az Azure-függvénykód (api_location) elérési útja nem helyes az YML-fájlban, az alkalmazás betöltődik, de nem hívja meg az Azure AI Search-integrációt biztosító függvényeket. Az elérési út javításához próbálkozzon újra az üzembe helyezési szakaszban található kerülő megoldással.

Az erőforrások eltávolítása

Az oktatóanyagban létrehozott erőforrások törléséhez törölje az erőforráscsoportot.

1. A Visual Studio Code-ban nyissa meg a Tevékenységsávot, és válassza az Azure ikont.

2. Az Oldalsávon kattintson a jobb gombbal az Azure-előfizetésére a Resource Groups terület alatt, és keresse meg az oktatóanyaghoz létrehozott erőforráscsoportot.

3. Kattintson a jobb gombbal az erőforráscsoport nevére, majd válassza a Törlés lehetőséget. Ez törli a Keresési és a Statikus Web Apps-erőforrásokat is.

4. Ha már nem szeretné a minta GitHub-elágazását, ne felejtse el törölni a GitHubon. Nyissa meg az elágazás Gépház majd törölje az elágazást.

Következő lépések

• A kereséssel kompatibilis webhely keresési integrációjának ismertetése