Share 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 met voorbeelden.

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-javascript-samples).

  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 in Visual Studio Code waarin u wordt gevraagd uit welke vertakking u wilt implementeren, selecteert u de standaardvertakking, meestal de hoofdvertakking.

    Deze instelling betekent dat alleen wijzigingen die u doorvoert in die vertakking worden geïmplementeerd in uw statische web-app.

  5. 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.

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

    Prompt Enter
    Selecteer een resourcegroep voor nieuwe resources. Gebruik de resourcegroep die u voor deze zelfstudie hebt gemaakt.
    Voer de naam in voor de nieuwe statische web-app. Maak een unieke naam voor uw resource. U kunt uw naam bijvoorbeeld vooraf laten gaan aan de naam van de opslagplaats, my-demo-static-web-appzoals .
    Een SKU selecteren Selecteer de gratis SKU voor deze zelfstudie.
    Selecteer een locatie voor nieuwe resources. Voor Node.js: Selecteren West US 2 tijdens de preview van het Azure Function-programmeermodel (PM) v4. Selecteer voor C# en Python een regio bij u in de buurt.
    Kies vooraf ingestelde build om de standaardprojectstructuur te configureren. Selecteer Aangepast.
    Selecteer de locatie van de clienttoepassingscode search-website-functions-v4/client

    Dit is het pad, van de hoofdmap van de opslagplaats, naar uw statische web-app.
    Selecteer de locatie van uw Azure Functions-code search-website-functions-v4/api

    Dit is het pad, van de hoofdmap van de opslagplaats, naar uw statische web-app. Als de opslagplaats geen andere functies bevat, wordt u niet gevraagd om de locatie van de functiecode. Op dit moment moet u extra stappen uitvoeren om ervoor te zorgen dat de locatie van de functiecode juist is. Deze stappen worden uitgevoerd nadat de resource is gemaakt en worden beschreven in dit artikel.
    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.

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

  8. Momenteel wordt het YML-bestand gemaakt met onjuiste padsyntaxis voor de Azure-functiecode. Gebruik deze tijdelijke oplossing om de syntaxis te corrigeren en de werkstroom opnieuw uit te voeren. U kunt deze stap uitvoeren zodra het YML-bestand is gemaakt. Er wordt een nieuwe werkstroom gestart zodra u de updates pusht:

    1. Open de ./.github/workflows/ map in Visual Studio Code Explorer.

    2. Open het YML-bestand.

    3. Schuif naar het api-location pad (op of in de buurt van regel 31).

    4. Wijzig de padsyntaxis om een slash te gebruiken (alleen api_location bewerkingen vereist, andere locaties zijn hier voor context):

      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. Sla het bestand op.

    6. Open een geïntegreerde terminal en voer de volgende GitHub-opdrachten uit om de bijgewerkte YML naar uw fork te verzenden:

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

    Schermopname van de GitHub-opdrachten in Visual Studio Code.

    Wacht totdat de uitvoering van de werkstroom is voltooid voordat u doorgaat. Het kan een paar minuten duren voordat dit is voltooid.

De Azure AI Search-querysleutel ophalen in Visual Studio Code

  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 cognitive-search-demo-rg --service-name my-cog-search-demo-svc

  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 opbouwen 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 meest waarschijnlijke reden 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 tijdelijke oplossing in de implementatiesectie voor hulp bij het corrigeren van het pad.

Resources opschonen

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

  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 Resource Groups gebied en zoek de resourcegroep die u voor deze zelfstudie hebt gemaakt.

  3. Klik met de rechtermuisknop op de naam van de resourcegroep en selecteer Verwijderen. Hiermee worden zowel de resources Search als Static Web Apps verwijderd.

  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 de fork.

Volgende stappen