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, nedělejte to. Tajemství z kroku hromadného importu by neměly být zapsány 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:

   Výzva	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 SKU pro tento tutoriál.
   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 webové 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í v Azure Portálu

Aplikace funkcí Azure nevrátí data prohledávání, dokud nebudou tajné klíče hledání nastaveny 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 v 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 zdroje
   SearchApiKey	Váš klíč vyhledávacího dotazu
   Název služby hledání	Název vašeho vyhledávacího prostředku
   NázevIndexuVyhledávání	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 vaše předplatné Azure v oblasti a najděte 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. Do vyhledávacího pole na webu zadejte vyhledávací dotaz, například code, aby funkce návrhů zobrazila 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)?

  Uměli byste pracovat s klientskou aplikací, hledat knihy a filtrovat. 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 je, že konfigurace statické webové aplikace pro název koncového bodu rozhraní API a klíč vyhledávacího dotazu jsou 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. Projděte znovu část nasazení a ujistěte se, že cesty jsou správné.

Uvolně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 vaše předplatné Azure v oblasti Static Web Apps 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ázkového projektu na GitHubu, nezapomeňte jej tam odstranit. Přejděte do nastavení forku a odstraňte úložiště.

5. Pokud chcete službu Azure AI Search odstranit, přejděte na webu Azure Portal do vyhledávací služby a v horní části stránky vyberte Odstranit .

Další kroky

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