Krok 3 : Nasazení webu .NET s podporou vyhledávání

Nasaďte web s podporou vyhledávání jako web Azure Static Web Apps. Toto nasazení zahrnuje aplikaci React pro webové stránky i aplikaci funkcí pro operace vyhledávání.

Statická webová aplikace načítá informace a soubory pro nasazení z GitHubu pomocí forku úložiště azure-search-static-web-app.

Vytvoření statické webové aplikace v editoru Visual Studio Code

1. V editoru Visual Studio Code se ujistěte, že jste v kořenovém adresáři úložiště, a ne ve složce bulk-insert (například azure-search-static-web-app).

2. Na panelu aktivit vyberte Azure a pak na bočním panelu otevřete Prostředky .

3. Klikněte pravým tlačítkem na Static Web Apps a pak vyberte Vytvořit statickou webovou aplikaci (Upřesnit). Pokud tuto možnost nevidíte, ověřte, že máte rozšíření Azure Functions pro Visual Studio Code.

   

4. Pokud se zobrazí automaticky otevírané okno s výzvou k potvrzení změn, udělejte to. Tajné kódy z kroku hromadného importu by neměly být potvrzeny do úložiště.

   Pokud chcete vrátit změny zpět, v editoru Visual Studio Code vyberte ikonu Správy zdrojového kódu na panelu aktivit a pak vyberte každý změněný soubor v seznamu Změn a vyberte ikonu Zahodit změny .

5. Podle pokynů vytvořte statickou webovou aplikaci:

   Instrukce	ENTER
   Vyberte skupinu prostředků pro nové prostředky.	Vytvořte novou skupinu prostředků pro statickou aplikaci.
   Zadejte název nové statické webové aplikace.	Pojmenujte statickou aplikaci, například my-demo-static-web-app.
   Vyberte skladovou položku.	Vyberte bezplatnou skladovou položku pro tento kurz.
   Vyberte umístění pro nové prostředky.	Zvolte oblast ve své blízkosti.
   Zvolte předvolbu sestavení pro konfiguraci výchozí struktury projektu.	Vyberte Vlastní.
   Vyberte umístění kódu klientské aplikace.	client Jedná se o cestu z kořenového adresáře úložiště do vaší statické webové aplikace.
   Zadejte cestu výstupu sestavení...	build Toto je cesta ze statické webové aplikace k vygenerovaným souborům.

   Pokud se zobrazí chyba týkající se nesprávné oblasti, ujistěte se, že skupina prostředků a prostředek statické webové aplikace jsou v některé z podporovaných oblastí uvedených v odpovědi na chybu.

6. Po vytvoření statické webové aplikace se soubor YML pracovního postupu GitHubu vytvoří také místně a na GitHubu ve vašem forku. Tento pracovní postup se spustí ve forku, sestaví a nasadí statickou webovou aplikaci a funkce.

   Pomocí některého z těchto přístupů zkontrolujte stav nasazení statické webové aplikace:

   • V oznámeních vyberte Otevřít akce na GitHubu . Otevře se okno prohlížeče, které odkazuje na vaše forkované úložiště.

   • Vyberte kartu Akce ve forku úložiště. Měl by se zobrazit seznam všech pracovních postupů ve forku.

   • Vyberte Azure: Protokol aktivit ve Visual Code. Měla by se zobrazit zpráva podobná následujícímu snímku obrazovky.

     

Získání klíče dotazu Azure AI Search v editoru Visual Studio Code

I když můžete být lákaví opakovaně používat klíč správce vyhledávání pro účely dotazů, který nesleduje princip nejnižších oprávnění. Funkce Azure By měla použít klíč dotazu, aby odpovídala nejnižším oprávněním.

1. V editoru Visual Studio Code otevřete nové okno terminálu.

2. Pomocí tohoto příkazu Azure CLI získejte klíč rozhraní API dotazu:

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

3. Tento klíč dotazu ponechte, abyste ho mohli použít v další části. Klíč dotazu autorizuje přístup pro čtení k indexu vyhledávání.

Přidání proměnných prostředí na webu Azure Portal

Aplikace Funkcí Azure nevrací data hledání, dokud se tajné kódy hledání nenajdou v nastavení.

1. Na panelu aktivit vyberte Azure .

2. Klikněte pravým tlačítkem na prostředek Static Web Apps a pak vyberte Otevřít na portálu.

   

3. Vyberte proměnné prostředí a pak vyberte + Přidat nastavení aplikace.

   

4. Přidejte každé z následujících nastavení:

   Nastavení	Hodnota vašeho vyhledávacího prostředku
   SearchApiKey	Váš klíč vyhledávacího dotazu
   SearchServiceName	Název vašeho vyhledávacího prostředku
   SearchIndexName	good-books
   SearchFacets	authors*,language_code

   Azure AI Search vyžaduje pro filtrování kolekcí jinou syntaxi, než to dělá u řetězců. * Přidejte za název pole, který označuje, že pole je typu Collection(Edm.String). Díky tomu může funkce Azure Functions správně přidávat filtry do dotazů.

5. Zkontrolujte nastavení a ujistěte se, že vypadají jako na následujícím snímku obrazovky.

   

6. Vraťte se do editoru Visual Studio Code.

7. Aktualizujte statickou webovou aplikaci, abyste viděli nastavení a funkce aplikace.

   

Pokud nastavení aplikace nevidíte, znovu se podívejte na postup aktualizace a opětovného spuštění pracovního postupu GitHubu.

Použití vyhledávání ve statické webové aplikaci

1. V editoru Visual Studio Code otevřete panel aktivit a vyberte ikonu Azure.

2. Na bočním panelu klikněte pravým tlačítkem na předplatné Azure v Static Web Apps oblasti a vyhledejte statickou webovou aplikaci, kterou jste vytvořili pro účely tohoto kurzu.

3. Klikněte pravým tlačítkem na název statické webové aplikace a vyberte Procházet web.

   

4. V automaticky otevíraných dialogech vyberte Otevřít .

5. Na panelu hledání na webu zadejte vyhledávací dotaz, například code, aby funkce návrhu navrhla názvy knih. Vyberte návrh nebo pokračujte v zadávání vlastního dotazu. Po dokončení vyhledávacího dotazu stiskněte enter.

6. Prohlédněte si výsledky a vyberte jednu z knih, abyste zobrazili další podrobnosti.

Řešení problému

Pokud webová aplikace nenasadila nebo nefungovala, pomocí následujícího seznamu zjistěte a opravte problém:

• Bylo nasazení úspěšné?

  Pokud chcete zjistit, jestli nasazení proběhlo úspěšně, musíte přejít do forku ukázkového úložiště a zkontrolovat úspěch nebo selhání akce GitHubu. Měla by existovat pouze jedna akce, která by měla obsahovat nastavení statické webové aplikace pro aplikaci app_location, api_locationa output_location. Pokud se akce úspěšně nenasadila, projděte si protokoly akcí a vyhledejte poslední selhání.

• Funguje klientská (front-endová) aplikace?

  Měli byste být schopni se dostat do webové aplikace a měla by se úspěšně zobrazit. Pokud nasazení proběhlo úspěšně, ale web se nezobrazuje, může to být problém s tím, jak je statická webová aplikace nakonfigurovaná pro opětovné sestavení aplikace, jakmile je v Azure.

• Funguje rozhraní API (bezserverová back-endová aplikace)?

  Měli byste být schopni pracovat s klientskou aplikací a hledat knihy a filtrování. Pokud formulář nevrací žádné hodnoty, otevřete vývojářské nástroje prohlížeče a určete, jestli volání HTTP do rozhraní API proběhla úspěšně. Pokud volání nebyla úspěšná, nejpravděpodobnějším důvodem, proč jsou konfigurace statické webové aplikace pro název koncového bodu rozhraní API a klíč vyhledávacího dotazu nesprávné.

  Pokud cesta k kódu funkce Azure (api_location) není v souboru YML správná, aplikace se načte, ale nebude volat žádné funkce, které poskytují integraci se službou Azure AI Search. Znovu se můžete vrátit k části nasazení, abyste měli jistotu, že cesty jsou správné.

Vyčištění prostředků

Pokud chcete vyčistit prostředky vytvořené v tomto kurzu, odstraňte skupinu prostředků nebo jednotlivé prostředky.

1. V editoru Visual Studio Code otevřete panel aktivit a vyberte ikonu Azure.

2. Na bočním panelu klikněte pravým tlačítkem na předplatné Azure v Static Web Apps oblasti a najděte aplikaci, kterou jste vytvořili pro účely tohoto kurzu.

3. Klikněte pravým tlačítkem myši na název aplikace a vyberte Odstranit.

4. Pokud už nechcete fork ukázky gitHubu, nezapomeňte ho odstranit na GitHubu. Přejděte do nastavení forku a odstraňte úložiště.

5. Pokud chcete odstranit Azure AI Search, vyhledejte vyhledávací službu a v horní části stránky vyberte Odstranit .

Další kroky

• Vysvětlení integrace vyhledávání pro web s podporou vyhledávání