Steg 3 – Distribuera den sökaktiverade .NET-webbplatsen

  • Artikel

Distribuera den sökaktiverade webbplatsen som en Azure Static Web Apps-webbplats. Den här distributionen innehåller både React-appen för webbsidorna och funktionsappen för sökåtgärder.

Den statiska webbappen hämtar information och filer för distribution från GitHub med din förgrening av exempellagringsplatsen.

Skapa en statisk webbapp i Visual Studio Code

  1. I Visual Studio Code kontrollerar du att du är vid lagringsplatsens rot och inte mappen massinfogning (till exempel azure-search-javascript-samples).

  2. Välj Azure i aktivitetsfältet och öppna sedan Resurser från sidofältet.

  3. Högerklicka på Statiska webbappar och välj sedan Skapa statisk webbapp (avancerat). Om du inte ser det här alternativet kontrollerar du att du har Azure Functions-tillägget för Visual Studio Code.

    Skärmbild av Visual Studio Code med Azure Static Web Apps-utforskaren som visar alternativet att skapa en avancerad statisk webbapp.

  4. Om du ser ett popup-fönster i Visual Studio Code som frågar vilken gren du vill distribuera från väljer du standardgrenen, vanligtvis main.

    Den här inställningen innebär att endast ändringar som du checkar in till den grenen distribueras till din statiska webbapp.

  5. Om du ser ett popup-fönster där du uppmanas att genomföra ändringarna ska du inte göra det. Hemligheterna från massimportsteget ska inte checkas in på lagringsplatsen.

    Om du vill återställa ändringarna väljer du ikonen Källkontroll i aktivitetsfältet i Visual Studio Code och väljer sedan varje ändrad fil i listan Ändringar och väljer ikonen Ignorera ändringar .

  6. Följ anvisningarna för att skapa den statiska webbappen:

    Prompt Skriv in
    Välj en resursgrupp för nya resurser. Använd den resursgrupp som du skapade för den här självstudien.
    Ange namnet på den nya statiska webbappen. Skapa ett unikt namn för resursen. Du kan till exempel förbereda namnet till lagringsplatsens namn, till exempel . my-demo-static-web-app
    Välj en SKU Välj den kostnadsfria SKU:n för den här självstudien.
    Välj en plats för nya resurser. För Node.js: Välj West US 2 under förhandsversionen av Azure Function Programming Model (PM) v4. För C# och Python väljer du en region nära dig.
    Välj byggförinställning för att konfigurera standardprojektstrukturen. Välj Kund.
    Välj platsen för klientprogramkoden search-website-functions-v4/client

    Det här är sökvägen från lagringsplatsens rot till din statiska webbapp.
    Välj platsen för Din Azure Functions-kod search-website-functions-v4/api

    Det här är sökvägen från lagringsplatsens rot till din statiska webbapp. Om det inte finns några andra funktioner på lagringsplatsen uppmanas du inte att ange platsen för funktionskoden. För närvarande måste du utföra extra steg för att säkerställa att funktionskodplatsen är korrekt. De här stegen utförs när resursen har skapats och dokumenteras i den här artikeln.
    Ange sökvägen till byggutdata... build

    Det här är sökvägen, från din statiska webbapp, till dina genererade filer.

    Om du får ett fel om en felaktig region kontrollerar du att resursgruppen och den statiska webbappresursen finns i någon av de regioner som stöds i felsvaret.

  7. När den statiska webbappen skapas skapas även en YML-fil för GitHub-arbetsflödet lokalt och på GitHub i din förgrening. Det här arbetsflödet körs i din förgrening, skapar och distribuerar den statiska webbappen och funktionerna.

    Kontrollera statusen för distribution av statiska webbappar med någon av följande metoder:

    • Välj Öppna åtgärder i GitHub från Meddelanden. Då öppnas ett webbläsarfönster som pekar på din förgrenade lagringsplats.

    • Välj fliken Åtgärder på din förgrenade lagringsplats. Du bör se en lista över alla arbetsflöden på din förgrening.

    • Välj Azure: Aktivitetslogg i Visual Code. Du bör se ett meddelande som liknar följande skärmbild.

      Skärmbild av aktivitetsloggen i Visual Studio Code.

  8. För närvarande skapas YML-filen med felaktig sökvägssyntax för Azure-funktionskoden. Använd den här lösningen för att korrigera syntaxen och köra arbetsflödet igen. Du kan utföra det här steget så snart YML-filen har skapats. Ett nytt arbetsflöde startas så snart du push-överför uppdateringarna:

    1. Öppna katalogen i Visual Studio Code-utforskaren ./.github/workflows/ .

    2. Öppna YML-filen.

    3. Rulla till api-location sökvägen (på eller nära rad 31).

    4. Ändra sökvägssyntaxen så att den använder ett snedstreck (behöver bara api_location redigeras, andra platser finns här för kontext):

      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. Spara filen.

    6. Öppna en integrerad terminal och utfärda följande GitHub-kommandon för att skicka den uppdaterade YML:en till din förgrening:

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

    Skärmbild av GitHub-kommandona i Visual Studio Code.

    Vänta tills arbetsflödeskörningen har slutförts innan du fortsätter. Det kan ta en minut eller två att slutföra.

Hämta frågenyckeln för Azure AI Search i Visual Studio Code

  1. Öppna ett nytt terminalfönster i Visual Studio Code.

  2. Hämta fråge-API-nyckeln med det här Azure CLI-kommandot:

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

  3. Behåll den här frågenyckeln som ska användas i nästa avsnitt. Frågenyckeln auktoriserar läsåtkomst till ett sökindex.

Lägga till miljövariabler i Azure-portalen

Azure-funktionsappen returnerar inte sökdata förrän sökhemligheterna finns i inställningarna.

  1. Välj Azure i aktivitetsfältet.

  2. Högerklicka på din Static Web Apps-resurs och välj sedan Öppna i portalen.

    Skärmbild av Visual Studio Code som visar Azure Static Web Apps-utforskaren med alternativet Öppna i portalen som visas.

  3. Välj Miljövariabler och välj sedan + Lägg till programinställning.

    Skärmbild av sidan för statiska webbappars miljövariabler i Azure-portalen.

  4. Lägg till var och en av följande inställningar:

    Inställning Resursvärdet Sök
    SearchApiKey Sökfrågenyckeln
    SearchServiceName Namnet på sökresursen
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI Search kräver en annan syntax för filtrering av samlingar än för strängar. Lägg till ett * efter ett fältnamn för att ange att fältet är av typen Collection(Edm.String). På så sätt kan Azure-funktionen lägga till filter korrekt i frågor.

  5. Kontrollera inställningarna för att se till att de ser ut som följande skärmbild.

    Skärmbild av webbläsaren som visar Azure-portalen med knappen för att spara inställningarna för din app.

  6. Gå tillbaka till Visual Studio Code.

  7. Uppdatera din statiska webbapp för att se programinställningar och funktioner.

    Skärmbild av Visual Studio Code som visar Azure Static Web Apps-utforskaren med de nya programinställningarna.

Om du inte ser programinställningarna går du tillbaka till stegen för att uppdatera och starta om GitHub-arbetsflödet.

Använda sökning i din statiska webbapp

  1. Öppna aktivitetsfältet i Visual Studio Code och välj Azure-ikonen.

  2. I sidofältet högerklickar du på din Azure-prenumeration under Static Web Apps området och hittar den statiska webbapp som du skapade för den här självstudien.

  3. Högerklicka på namnet på den statiska webbappen och välj Bläddra webbplats.

    Skärmbild av Visual Studio Code som visar Azure Static Web Apps-utforskaren som visar alternativet **Bläddra på webbplats**.

  4. Välj Öppna i popup-dialogrutan.

  5. I sökfältet för webbplatsen anger du en sökfråga som code, så förslagsfunktionen föreslår boktitlar. Välj ett förslag eller fortsätt att ange en egen fråga. Tryck på Retur när du har slutfört sökfrågan.

  6. Granska resultaten och välj sedan en av böckerna för att se mer information.

Felsökning

Om webbappen inte distribuerades eller fungerade använder du följande lista för att fastställa och åtgärda problemet:

  • Lyckades distributionen?

    För att avgöra om distributionen lyckades måste du gå till din förgrening av exempelrepoen och granska om GitHub-åtgärden lyckades eller misslyckades. Det bör bara finnas en åtgärd och den bör ha statiska webbappinställningar för app_location, api_locationoch output_location. Om åtgärden inte har distribuerats kan du gå in i åtgärdsloggarna och leta efter det senaste felet.

  • Fungerar klientprogrammet (klientdelen)?

    Du bör kunna komma åt webbappen och den bör visas. Om distributionen lyckades men webbplatsen inte visas kan det vara ett problem med hur den statiska webbappen konfigureras för att återskapa appen när den finns i Azure.

  • Fungerar API-programmet (serverlös serverdel) ?

    Du bör kunna interagera med klientappen, söka efter böcker och filtrering. Om formuläret inte returnerar några värden öppnar du webbläsarens utvecklarverktyg och avgör om HTTP-anropen till API:et lyckades. Om anropen inte lyckades är den troligaste orsaken till att de statiska webbappkonfigurationerna för API-slutpunktens namn och sökfrågans nyckel är felaktiga.

    Om sökvägen till Azure-funktionskoden (api_location) inte är korrekt i YML-filen läses programmet in men anropar inte någon av de funktioner som tillhandahåller integrering med Azure AI Search. Gå tillbaka till lösningen i distributionsavsnittet för att få hjälp med att korrigera sökvägen.

Rensa resurser

Ta bort resursgruppen om du vill rensa resurserna som skapades i den här självstudien.

  1. Öppna aktivitetsfältet i Visual Studio Code och välj Azure-ikonen.

  2. I sidofältet högerklickar du på din Azure-prenumeration under Resource Groups området och letar reda på resursgruppen som du skapade för den här självstudien.

  3. Högerklicka på resursgruppens namn och välj sedan Ta bort. Detta tar bort både resurserna Search och Static Web Apps.

  4. Om du inte längre vill ha GitHub-förgrening av exemplet ska du komma ihåg att ta bort det på GitHub. Gå till din förgrenings Inställningar och ta sedan bort förgreningen.

Nästa steg