Krok 3. Wdrażanie witryny internetowej .NET z obsługą wyszukiwania

  • Artykuł

Wdróż witrynę internetową z obsługą wyszukiwania jako witrynę usługi Azure Static Web Apps. To wdrożenie obejmuje zarówno aplikację React dla stron internetowych, jak i aplikację funkcji na potrzeby operacji wyszukiwania.

Statyczna aplikacja internetowa pobiera informacje i pliki do wdrożenia z usługi GitHub przy użyciu rozwidlenia repozytorium przykładów.

Tworzenie statycznej aplikacji internetowej w programie Visual Studio Code

  1. W programie Visual Studio Code upewnij się, że jesteś w katalogu głównym repozytorium, a nie folderem bulk-insert (na przykład azure-search-javascript-samples).

  2. Wybierz pozycję Azure na pasku działań, a następnie otwórz pozycję Zasoby na pasku bocznym.

  3. Kliknij prawym przyciskiem myszy pozycję Static Web Apps, a następnie wybierz pozycję Utwórz statyczną aplikację internetową (zaawansowaną). Jeśli ta opcja nie jest widoczna, sprawdź, czy masz rozszerzenie usługi Azure Functions dla programu Visual Studio Code.

    Zrzut ekranu programu Visual Studio Code z eksploratorem usługi Azure Static Web Apps z opcją utworzenia zaawansowanej statycznej aplikacji internetowej.

  4. Jeśli w programie Visual Studio Code zostanie wyświetlone okno podręczne z pytaniem o gałąź, z której chcesz wdrożyć, wybierz gałąź domyślną, zazwyczaj główną.

    To ustawienie oznacza, że tylko zmiany zatwierdzane w tej gałęzi są wdrażane w statycznej aplikacji internetowej.

  5. Jeśli zostanie wyświetlone okno podręczne z prośbą o zatwierdzenie zmian, nie rób tego. Wpisy tajne z kroku importu zbiorczego nie powinny być zatwierdzane w repozytorium.

    Aby wycofać zmiany, w programie Visual Studio Code wybierz ikonę Kontrola źródła na pasku działania, a następnie wybierz każdy zmieniony plik na liście Zmiany i wybierz ikonę Odrzuć zmiany .

  6. Postępuj zgodnie z monitami, aby utworzyć statyczną aplikację internetową:

    Monit Enter
    Wybierz grupę zasobów dla nowych zasobów. Użyj grupy zasobów utworzonej na potrzeby tego samouczka.
    Wprowadź nazwę nowej statycznej aplikacji internetowej. Utwórz unikatową nazwę zasobu. Możesz na przykład wstępnie wpisać nazwę do nazwy repozytorium, my-demo-static-web-appna przykład .
    Wybierz jednostkę SKU Wybierz bezpłatną jednostkę SKU dla tego samouczka.
    Wybierz lokalizację nowych zasobów. W przypadku Node.js: wybierz West US 2 pozycję w wersji zapoznawczej modelu programowania funkcji platformy Azure (PM) w wersji 4. W przypadku języków C# i Python wybierz region w pobliżu.
    Wybierz ustawienie wstępne kompilacji, aby skonfigurować domyślną strukturę projektu. Wybierz Niestandardowy.
    Wybierz lokalizację kodu aplikacji klienckiej search-website-functions-v4/client

    Jest to ścieżka z katalogu głównego repozytorium do statycznej aplikacji internetowej.
    Wybieranie lokalizacji kodu usługi Azure Functions search-website-functions-v4/api

    Jest to ścieżka z katalogu głównego repozytorium do statycznej aplikacji internetowej. Jeśli w repozytorium nie ma żadnych innych funkcji, nie zostanie wyświetlony monit o lokalizację kodu funkcji. Obecnie należy wykonać dodatkowe kroki, aby upewnić się, że lokalizacja kodu funkcji jest poprawna. Te kroki są wykonywane po utworzeniu zasobu i są udokumentowane w tym artykule.
    Wprowadź ścieżkę danych wyjściowych kompilacji... build

    Jest to ścieżka ze statycznej aplikacji internetowej do wygenerowanych plików.

    Jeśli wystąpi błąd dotyczący nieprawidłowego regionu, upewnij się, że grupa zasobów i statyczny zasób aplikacji internetowej znajdują się w jednym z obsługiwanych regionów wymienionych w odpowiedzi na błąd.

  7. Po utworzeniu statycznej aplikacji internetowej plik YML przepływu pracy usługi GitHub jest również tworzony lokalnie i w usłudze GitHub w rozwidleniu. Ten przepływ pracy jest wykonywany w rozwidleniu, kompilowaniu i wdrażaniu statycznej aplikacji internetowej i funkcji.

    Sprawdź stan wdrożenia statycznej aplikacji internetowej przy użyciu dowolnego z następujących podejść:

    • Wybierz pozycję Open Actions in GitHub (Otwórz akcje w usłudze GitHub ) w obszarze Powiadomienia. Spowoduje to otwarcie okna przeglądarki wskazywanego na rozwidlenie repozytorium.

    • Wybierz kartę Akcje w rozwidlonym repozytorium. Powinna zostać wyświetlona lista wszystkich przepływów pracy w rozwidleniach.

    • Wybierz pozycję Azure: Dziennik aktywności w programie Visual Code. Powinien zostać wyświetlony komunikat podobny do poniższego zrzutu ekranu.

      Zrzut ekranu przedstawiający dziennik aktywności w programie Visual Studio Code.

  8. Obecnie plik YML jest tworzony z błędną składnią ścieżki dla kodu funkcji platformy Azure. Użyj tego obejścia, aby poprawić składnię i ponownie uruchomić przepływ pracy. Ten krok można wykonać natychmiast po utworzeniu pliku YML. Po wypchnięciu aktualizacji zostanie uruchomiony nowy przepływ pracy:

    1. W Eksploratorze programu Visual Studio Code otwórz ./.github/workflows/ katalog.

    2. Otwórz plik YML.

    3. Przewiń do ścieżki api-location (w wierszu 31 lub w pobliżu).

    4. Zmień składnię ścieżki, aby użyć ukośnika do przodu (tylko api_location wymaga edycji, inne lokalizacje są tutaj w kontekście):

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

    6. Otwórz zintegrowany terminal i wydaj następujące polecenia usługi GitHub, aby wysłać zaktualizowany kod YML do rozwidlenia:

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

    Zrzut ekranu przedstawiający polecenia usługi GitHub w programie Visual Studio Code.

    Przed kontynuowaniem poczekaj na zakończenie wykonywania przepływu pracy. Może to potrwać minutę lub dwie.

Pobieranie klucza zapytania usługi Azure AI Search w programie Visual Studio Code

  1. W programie Visual Studio Code otwórz nowe okno terminalu.

  2. Pobierz klucz interfejsu API zapytań za pomocą tego polecenia interfejsu wiersza polecenia platformy Azure:

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

  3. Zachowaj ten klucz zapytania do użycia w następnej sekcji. Klucz zapytania autoryzuje dostęp do odczytu do indeksu wyszukiwania.

Dodawanie zmiennych środowiskowych w witrynie Azure Portal

Aplikacja funkcji platformy Azure nie zwróci danych wyszukiwania, dopóki wpisy tajne wyszukiwania nie będą w ustawieniach.

  1. Wybierz pozycję Azure na pasku działań.

  2. Kliknij prawym przyciskiem myszy zasób Static Web Apps, a następnie wybierz polecenie Otwórz w portalu.

    Zrzut ekranu programu Visual Studio Code przedstawiający eksploratora usługi Azure Static Web Apps z wyświetloną opcją Otwórz w portalu.

  3. Wybierz pozycję Zmienne środowiskowe , a następnie wybierz pozycję + Dodaj ustawienie aplikacji.

    Zrzut ekranu przedstawiający stronę zmiennych środowiskowych statycznej aplikacji internetowej w witrynie Azure Portal.

  4. Dodaj każde z następujących ustawień:

    Ustawienie Wartość zasobu wyszukiwania
    SearchApiKey Klucz zapytania wyszukiwania
    Nazwa usługi wyszukiwania Nazwa zasobu wyszukiwania
    Nazwa indeksu wyszukiwania good-books
    SearchFacets authors*,language_code

    Usługa Azure AI Search wymaga innej składni filtrowania kolekcji niż w przypadku ciągów. Dodaj wartość * po nazwie pola, aby oznaczyć, że pole ma typ Collection(Edm.String). Dzięki temu funkcja platformy Azure może prawidłowo dodawać filtry do zapytań.

  5. Sprawdź ustawienia, aby upewnić się, że wyglądają jak na poniższym zrzucie ekranu.

    Zrzut ekranu przedstawiający przeglądarkę z wyświetloną witryną Azure Portal z przyciskiem umożliwiającym zapisanie ustawień aplikacji.

  6. Wróć do programu Visual Studio Code.

  7. Odśwież statyczną aplikację internetową, aby wyświetlić ustawienia i funkcje aplikacji.

    Zrzut ekranu programu Visual Studio Code przedstawiający eksploratora usługi Azure Static Web Apps z nowymi ustawieniami aplikacji.

Jeśli nie widzisz ustawień aplikacji, ponownie zapoznaj się z krokami aktualizowania i ponownego uruchamiania przepływu pracy usługi GitHub.

Korzystanie z wyszukiwania w statycznej aplikacji internetowej

  1. W programie Visual Studio Code otwórz pasek Działania i wybierz ikonę platformy Azure.

  2. Na pasku bocznym kliknij prawym przyciskiem myszy subskrypcję platformy Azure w Static Web Apps obszarze i znajdź statyczną aplikację internetową utworzoną na potrzeby tego samouczka.

  3. Kliknij prawym przyciskiem myszy nazwę statycznej aplikacji internetowej i wybierz pozycję Przeglądaj witrynę.

    Zrzut ekranu programu Visual Studio Code przedstawiający eksploratora usługi Azure Static Web Apps z wyświetloną opcją **Przeglądaj witrynę**.

  4. Wybierz pozycję Otwórz w oknie podręcznym.

  5. Na pasku wyszukiwania w witrynie internetowej wprowadź zapytanie wyszukiwania, takie jak code, więc sugerowana funkcja sugeruje tytuły książek. Wybierz sugestię lub kontynuuj wprowadzanie własnego zapytania. Naciśnij klawisz Enter po zakończeniu zapytania wyszukiwania.

  6. Przejrzyj wyniki, a następnie wybierz jedną z książek, aby wyświetlić więcej szczegółów.

Rozwiązywanie problemów

Jeśli aplikacja internetowa nie została wdrożona lub nie działa, użyj poniższej listy, aby określić i rozwiązać problem:

  • Czy wdrożenie zakończyło się pomyślnie?

    Aby określić, czy wdrożenie zakończyło się pomyślnie, musisz przejść do rozwidlenia przykładowego repozytorium i przejrzeć powodzenie lub niepowodzenie akcji usługi GitHub. Powinna istnieć tylko jedna akcja i powinna mieć statyczne ustawienia aplikacji internetowej dla app_locationelementów , api_locationi output_location. Jeśli akcja nie została pomyślnie wdrożona, zapoznaj się z dziennikami akcji i poszukaj ostatniej awarii.

  • Czy aplikacja klienta (frontonu) działa?

    Powinno być możliwe uzyskanie dostępu do aplikacji internetowej i powinno zostać pomyślnie wyświetlone. Jeśli wdrożenie zakończyło się pomyślnie, ale witryna internetowa nie jest wyświetlana, może to być problem z konfiguracją statycznej aplikacji internetowej pod kątem ponownego kompilowania aplikacji po jej przejściu na platformę Azure.

  • Czy aplikacja interfejsu API (bezserwerowa) działa?

    Powinno być możliwe interakcja z aplikacją kliencka, wyszukiwanie książek i filtrowanie. Jeśli formularz nie zwraca żadnych wartości, otwórz narzędzia deweloperskie przeglądarki i ustal, czy wywołania HTTP interfejsu API zakończyły się pomyślnie. Jeśli wywołania nie powiodły się, najbardziej prawdopodobną przyczyną jest nieprawidłowa konfiguracja statycznej aplikacji internetowej dla nazwy punktu końcowego interfejsu API i klucza zapytania wyszukiwania.

    Jeśli ścieżka do kodu funkcji platformy Azure (api_location) nie jest poprawna w pliku YML, aplikacja ładuje się, ale nie wywoła żadnych funkcji zapewniających integrację z usługą Azure AI Search. Ponownie zajmij się obejściem w sekcji wdrażania, aby uzyskać pomoc dotyczącą poprawiania ścieżki.

Czyszczenie zasobów

Aby wyczyścić zasoby utworzone w tym samouczku, usuń grupę zasobów.

  1. W programie Visual Studio Code otwórz pasek Działania i wybierz ikonę platformy Azure.

  2. Na pasku bocznym kliknij prawym przyciskiem myszy subskrypcję platformy Azure w Resource Groups obszarze i znajdź grupę zasobów utworzoną na potrzeby tego samouczka.

  3. Kliknij prawym przyciskiem myszy nazwę grupy zasobów, a następnie wybierz polecenie Usuń. Spowoduje to usunięcie zasobów wyszukiwania i statycznych aplikacji internetowych.

  4. Jeśli nie chcesz już rozwidlenia w usłudze GitHub przykładu, pamiętaj, aby usunąć go w usłudze GitHub. Przejdź do Ustawienia rozwidlenia, a następnie usuń rozwidlenie.

Następne kroki