3 — Wdrażanie witryny internetowej obsługującej wyszukiwanie
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
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
).Wybierz pozycję Azure na pasku działań, a następnie otwórz pozycję Zasoby na pasku bocznym.
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.
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.
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 .
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-app
na 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.
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.
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:
W Eksploratorze programu Visual Studio Code otwórz
./.github/workflows/
katalog.Otwórz plik YML.
Przewiń do ścieżki
api-location
(w wierszu 31 lub w pobliżu).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
Zapisz plik.
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
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
W programie Visual Studio Code otwórz nowe okno terminalu.
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
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.
Wybierz pozycję Azure na pasku działań.
Kliknij prawym przyciskiem myszy zasób Static Web Apps, a następnie wybierz polecenie Otwórz w portalu.
Wybierz pozycję Zmienne środowiskowe , a następnie wybierz pozycję + Dodaj ustawienie aplikacji.
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 typCollection(Edm.String)
. Dzięki temu funkcja platformy Azure może prawidłowo dodawać filtry do zapytań.Sprawdź ustawienia, aby upewnić się, że wyglądają jak na poniższym zrzucie ekranu.
Wróć do programu Visual Studio Code.
Odśwież statyczną aplikację internetową, aby wyświetlić ustawienia i funkcje 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
W programie Visual Studio Code otwórz pasek Działania i wybierz ikonę platformy Azure.
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.Kliknij prawym przyciskiem myszy nazwę statycznej aplikacji internetowej i wybierz pozycję Przeglądaj witrynę.
Wybierz pozycję Otwórz w oknie podręcznym.
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.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_location
elementów ,api_location
ioutput_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.
W programie Visual Studio Code otwórz pasek Działania i wybierz ikonę platformy Azure.
Na pasku bocznym kliknij prawym przyciskiem myszy subskrypcję platformy Azure w
Resource Groups
obszarze i znajdź grupę zasobów utworzoną na potrzeby tego samouczka.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.
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.