Delen via

Stap 3: de .NET-website met zoekfunctionaliteit implementeren

  • Artikel

Implementeer de website met zoekmogelijkheden als een Azure Static Web Apps-site. Deze implementatie omvat zowel de React-app voor de webpagina's als de Functie-app voor zoekbewerkingen.

De statische web-app haalt de informatie en bestanden op voor implementatie vanuit GitHub met behulp van uw fork van de opslagplaats azure-search-static-web-app.

Een statische web-app maken in Visual Studio Code

  1. Zorg ervoor dat u zich in Visual Studio Code in de hoofdmap van de opslagplaats bevindt en niet de map voor bulksgewijs invoegen (bijvoorbeeld azure-search-static-web-app).

  2. Selecteer Azure op de activiteitenbalk en open resources in de zijbalk.

  3. Klik met de rechtermuisknop op Static Web Apps en selecteer Vervolgens Statische web-app maken (geavanceerd). Als u deze optie niet ziet, controleert u of u de Azure Functions-extensie voor Visual Studio Code hebt.

    Schermopname van Visual Studio Code, met azure Static Web Apps Explorer met de optie voor het maken van een geavanceerde statische web-app.

  4. Als u een pop-upvenster ziet waarin u wordt gevraagd uw wijzigingen door te voeren, doet u dit niet. De geheimen uit de stap voor bulkimport mogen niet worden doorgevoerd in de opslagplaats.

    Als u de wijzigingen wilt terugdraaien, selecteert u in Visual Studio Code het pictogram Broncodebeheer in de activiteitenbalk en selecteert u vervolgens elk gewijzigd bestand in de lijst Wijzigingen en selecteert u het pictogram Wijzigingen negeren.

  5. Volg de aanwijzingen om de statische web-app te maken:

    Prompt Enter
    Selecteer een resourcegroep voor nieuwe resources. Maak een nieuwe resourcegroep voor de statische app.
    Voer de naam in voor de nieuwe statische web-app. Geef uw statische app een naam, zoals my-demo-static-web-app.
    Een SKU selecteren Selecteer de gratis SKU voor deze zelfstudie.
    Selecteer een locatie voor nieuwe resources. Kies een regio bij u in de buurt.
    Kies vooraf ingestelde build om de standaardprojectstructuur te configureren. Selecteer Aangepast.
    Selecteer de locatie van de clienttoepassingscode client

    Dit is het pad, van de hoofdmap van de opslagplaats, naar uw statische web-app.
    Voer het pad van de build-uitvoer in... build

    Dit is het pad, van uw statische web-app, naar uw gegenereerde bestanden.

    Als u een fout krijgt over een onjuiste regio, controleert u of de resource van de resourcegroep en de statische web-app zich in een van de ondersteunde regio's bevinden die worden vermeld in het foutbericht.

  6. Wanneer de statische web-app wordt gemaakt, wordt er ook een GitHub-werkstroom YML-bestand lokaal en op GitHub in uw fork gemaakt. Deze werkstroom wordt uitgevoerd in uw fork, het bouwen en implementeren van de statische web-app en -functies.

    Controleer de status van de implementatie van statische web-apps met behulp van een van deze methoden:

    • Selecteer Acties openen in GitHub in de meldingen. Hiermee opent u een browservenster dat naar uw vervalste opslagplaats wijst.

    • Selecteer het tabblad Acties in uw geforkte opslagplaats. U ziet nu een lijst met alle werkstromen op uw fork.

    • Selecteer azure : Activiteitenlogboek in Visual Code. Er wordt een bericht weergegeven dat lijkt op de volgende schermopname.

      Schermopname van het activiteitenlogboek in Visual Studio Code.

De Azure AI Search-querysleutel ophalen in Visual Studio Code

Hoewel u misschien geneigd bent om uw zoekbeheerderssleutel opnieuw te gebruiken voor querydoeleinden die niet het principe van minimale bevoegdheden volgt. De Azure-functie moet de querysleutel gebruiken om te voldoen aan minimale bevoegdheden.

  1. Open in Visual Studio Code een nieuw terminalvenster.

  2. Haal de query-API-sleutel op met deze Azure CLI-opdracht:

    az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME

  3. Laat deze querysleutel gebruiken in de volgende sectie. De querysleutel autoriseert leestoegang tot een zoekindex.

Omgevingsvariabelen toevoegen in Azure Portal

De Azure Function-app retourneert pas zoekgegevens als de zoekgeheimen zich in instellingen bevinden.

  1. Selecteer Azure op de activiteitenbalk.

  2. Klik met de rechtermuisknop op uw Static Web Apps-resource en selecteer Openen in de portal.

    Schermopname van Visual Studio Code met Azure Static Web Apps Explorer met de optie Openen in portal weergegeven.

  3. Selecteer Omgevingsvariabelen en selecteer vervolgens + Toepassingsinstelling toevoegen.

    Schermopname van de pagina met omgevingsvariabelen van de statische web-app in Azure Portal.

  4. Voeg elk van de volgende instellingen toe:

    Instelling Uw zoekresourcewaarde
    SearchApiKey Uw zoekquerysleutel
    SearchServiceName De naam van uw zoekresource
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI Search vereist verschillende syntaxis voor het filteren van verzamelingen dan voor tekenreeksen. Voeg een * na een veldnaam toe om aan te geven dat het veld van het type Collection(Edm.String)is. Hierdoor kan de Azure-functie filters correct toevoegen aan query's.

  5. Controleer uw instellingen om ervoor te zorgen dat ze eruitzien als de volgende schermopname.

    Schermopname van de browser waarin Azure Portal wordt weergegeven met de knop om de instellingen voor uw app op te slaan.

  6. Ga terug naar Visual Studio Code.

  7. Vernieuw uw statische web-app om de toepassingsinstellingen en -functies te bekijken.

    Schermopname van Visual Studio Code met de Verkenner van Azure Static Web Apps met de nieuwe toepassingsinstellingen.

Als u de toepassingsinstellingen niet ziet, gaat u opnieuw naar de stappen voor het bijwerken en opnieuw starten van de GitHub-werkstroom.

Zoeken gebruiken in uw statische web-app

  1. Open in Visual Studio Code de activiteitenbalk en selecteer het Azure-pictogram.

  2. Klik in de zijbalk met de rechtermuisknop op uw Azure-abonnement onder het Static Web Apps gebied en zoek de statische web-app die u voor deze zelfstudie hebt gemaakt.

  3. Klik met de rechtermuisknop op de naam van de statische web-app en selecteer Bladeren site.

    Schermopname van Visual Studio Code met de Verkenner van Azure Static Web Apps met de optie **Bladeren op site**.

  4. Selecteer Openen in het pop-updialoogvenster.

  5. Voer in de zoekbalk van de website een zoekquery in, zoals code, zodat de suggestiefunctie boektitels voorstelt. Selecteer een suggestie of ga door met het invoeren van uw eigen query. Druk op Enter wanneer u de zoekquery hebt voltooid.

  6. Bekijk de resultaten en selecteer vervolgens een van de boeken voor meer informatie.

Probleemoplossing

Als de web-app niet is geïmplementeerd of werkt, gebruikt u de volgende lijst om het probleem te bepalen en op te lossen:

  • Is de implementatie geslaagd?

    Als u wilt bepalen of uw implementatie is geslaagd, moet u naar uw fork van de voorbeeldopslagplaats gaan en het slagen of mislukken van de GitHub-actie controleren. Er mag slechts één actie zijn en er moeten statische web-app-instellingen zijn voor de app_location, api_locationen output_location. Als de actie niet is geïmplementeerd, duikt u in de actielogboeken en zoekt u naar de laatste fout.

  • Werkt de clienttoepassing (front-end)?

    U moet uw web-app kunnen openen en deze moet worden weergegeven. Als de implementatie is geslaagd, maar de website niet wordt weergegeven, kan dit een probleem zijn met de configuratie van de statische web-app voor het opnieuw bouwen van de app, zodra deze zich in Azure bevindt.

  • Werkt de API-toepassing (serverloze back-end)?

    U moet kunnen communiceren met de client-app, boeken zoeken en filteren. Als het formulier geen waarden retourneert, opent u de ontwikkelhulpprogramma's van de browser en bepaalt u of de HTTP-aanroepen naar de API zijn geslaagd. Als de aanroepen niet zijn geslaagd, is de kans groot dat de configuraties van de statische web-app voor de naam van het API-eindpunt en de zoekquerysleutel onjuist zijn.

    Als het pad naar de Azure-functiecode (api_location) niet juist is in het YML-bestand, wordt de toepassing geladen, maar worden geen functies aangeroepen die integratie bieden met Azure AI Search. Ga opnieuw naar de implementatiesectie om ervoor te zorgen dat paden juist zijn.

Resources opschonen

Als u de resources wilt opschonen die in deze zelfstudie zijn gemaakt, verwijdert u de resourcegroep of afzonderlijke resources.

  1. Open in Visual Studio Code de activiteitenbalk en selecteer het Azure-pictogram.

  2. Klik in de zijbalk met de rechtermuisknop op uw Azure-abonnement onder het Static Web Apps gebied en zoek de app die u voor deze zelfstudie hebt gemaakt.

  3. Klik met de rechtermuisknop op de naam van de app en selecteer Verwijderen.

  4. Als u de GitHub-fork van het voorbeeld niet meer wilt, moet u deze verwijderen op GitHub. Ga naar de instellingen van uw fork en verwijder vervolgens de opslagplaats.

  5. Als u Azure AI Search wilt verwijderen, zoekt u uw zoekservice en selecteert u Verwijderen boven aan de pagina.

Volgende stappen