Condividi tramite

Passaggio 3: Distribuire il sito Web .NET abilitato per la ricerca

  • Articolo

Distribuire il sito Web abilitato per la ricerca come sito app Web statiche di Azure. Questa distribuzione include sia l'app React per le pagine Web che l'app per le funzioni per le operazioni di ricerca.

L'app Web statica esegue il pull delle informazioni e dei file per la distribuzione da GitHub usando il fork del repository azure-search-static-web-app.

Creare un'app Web statica in Visual Studio Code

  1. In Visual Studio Code assicurarsi di essere nella radice del repository e non della cartella di inserimento bulk (ad esempio azure-search-static-web-app).

  2. Selezionare Azure dalla barra delle attività e quindi aprire Risorse dalla barra laterale.

  3. Fare clic con il pulsante destro del mouse su App Web statiche e quindi scegliere Crea app Web statica (avanzate). Se non viene visualizzata questa opzione, verificare di avere l'estensione Funzioni di Azure per Visual Studio Code.

    Screenshot di Visual Studio Code, con l’explorer di App Web statiche di Azure che mostra l'opzione per creare un'app Web statica avanzata.

  4. Se viene visualizzata una finestra popup che chiede di eseguire il commit delle modifiche, non eseguire questa operazione. I segreti del passaggio di importazione bulk non devono essere sottoposti a commit nel repository.

    Per eseguire il rollback delle modifiche, in Visual Studio Code selezionare l'icona Controllo del codice sorgente nella barra attività, quindi selezionare ogni file modificato nell'elenco Modifiche e selezionare l'icona Ignora modifiche.

  5. Seguire le istruzioni per creare l'app Web statica:

    Richiesta Immettere
    Selezionare un gruppo di risorse per le nuove risorse. Creare un nuovo gruppo di risorse per l'app statica.
    Immettere il nome per la nuova app Web statica. Assegnare un nome all'app statica, ad esempio my-demo-static-web-app.
    Selezionare uno SKU Selezionare lo SKU gratuito per questa esercitazione.
    Selezionare una località per le nuove risorse. Scegliere un'area nelle vicinanze.
    Scegliere il set di impostazioni di compilazione per configurare la struttura predefinita del progetto. Seleziona Personalizza.
    Selezionare il percorso del codice dell'applicazione client client

    Questo è il percorso, dalla radice del repository, all'app Web statica.
    Immettere il percorso dell'output di compilazione... build

    Questo è il percorso, dall'app Web statica, ai file generati.

    Se viene visualizzato un errore relativo a un'area non corretta, assicurarsi che il gruppo di risorse e la risorsa app Web statica si trovino in una delle aree supportate elencate nella risposta di errore.

  6. Quando viene creata l'app Web statica, viene creato anche un file YML del flusso di lavoro GitHub in locale e in GitHub nel fork. Questo flusso di lavoro viene eseguito nel fork, creando e distribuendo le funzioni e l'app Web statica.

    Controllare lo stato della distribuzione di app Web statiche usando uno di questi approcci:

    • Selezionare Apri azioni in GitHub dalle notifiche. Verrà visualizzata una finestra del browser che punta al repository con fork.

    • Selezionare la scheda Azioni nel repository con fork. Verrà visualizzato un elenco di tutti i flussi di lavoro nel fork.

    • Selezionare Azure : Log attività in Visual Code. Verrà visualizzato un messaggio simile a quello mostrato nello screenshot seguente.

      Screenshot del log attività in Visual Studio Code.

Ottenere la chiave di query di Ricerca intelligenza artificiale di Azure in Visual Studio Code

Anche se si potrebbe essere tentati di riutilizzare la chiave di amministrazione della ricerca per scopi di query che non seguono il principio dei privilegi minimi. La funzione di Azure deve usare la chiave di query per essere conforme al principio dei privilegi minimi.

  1. In Visual Studio Code, aprire una nuova finestra del terminale.

  2. Ottenere la chiave API di query con questo comando dell'interfaccia della riga di comando di Azure:

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

  3. Mantenere questa chiave di query da usare nella sezione successiva. La chiave di query autorizza l'accesso in lettura a un indice di ricerca.

Aggiungere variabili di ambiente nel portale di Azure

L'app per le funzioni di Azure non restituirà i dati di ricerca fino a quando i segreti di ricerca non si trovano nelle impostazioni.

  1. Selezionare Azure dalla barra delle attività.

  2. Fare clic con il pulsante destro del mouse sulla risorsa App Web statiche e quindi scegliere Apri nel portale.

    Screenshot di Visual Studio Code che mostra l’explorer di App Web statiche di Azure con l'opzione Apri nel portale visualizzata.

  3. Selezionare Variabili di ambiente e quindi + Aggiungi impostazione dell'applicazione.

    Screenshot della pagina delle variabili di ambiente dell'app Web statica nel portale di Azure.

  4. Aggiungere ognuna delle impostazioni seguenti:

    Impostazione Valore della risorsa di ricerca
    SearchApiKey Chiave della query di ricerca
    SearchServiceName Nome della risorsa di ricerca
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Ricerca di intelligenza artificiale di Azure richiede una sintassi diversa per filtrare le raccolte rispetto alle stringhe. Aggiungere un oggetto * dopo un nome di campo per indicare che il campo è di tipo Collection(Edm.String). In questo modo, la funzione di Azure può aggiungere filtri correttamente alle query.

  5. Controllare le impostazioni per assicurarsi che abbiano un aspetto simile allo screenshot seguente.

    Screenshot del browser che mostra il portale di Azure con il pulsante per salvare le impostazioni per l'app.

  6. Tornare a Visual Studio Code.

  7. Aggiornare l'app Web statica per visualizzare le impostazioni e le funzioni dell'applicazione.

    Screenshot di Visual Studio Code che mostra Esplora app Web statiche di Azure con le nuove impostazioni dell'applicazione.

Se non vengono visualizzate le impostazioni dell'applicazione, rivedere i passaggi per aggiornare e riavviare il flusso di lavoro di GitHub.

Usare la ricerca nell'app Web statica

  1. In Visual Studio Code aprire la barra attività e selezionare l'icona di Azure.

  2. Nella barra laterale, fare clic con il pulsante destro del mouse sulla sottoscrizione di Azure nell'area Static Web Apps e trovare l'app Web statica creata per questa esercitazione.

  3. Fare clic con il pulsante destro del mouse sul nome dell'app Web statica e scegliere Sfoglia sito.

    Screenshot di Visual Studio Code che mostra lo strumento di esplorazione di App Web statiche di Azure che mostra l'opzione **Sfoglia sito**.

  4. Selezionare Apri nella finestra di dialogo popup.

  5. Nella barra di ricerca del sito Web immettere una query di ricerca, ad esempio code, in modo che la funzionalità di suggerimento suggerisca i titoli dei libri. Selezionare un suggerimento o continuare a immettere la propria query. Premere INVIO al termine della query di ricerca.

  6. Esaminare i risultati e quindi selezionare uno dei libri per visualizzare altri dettagli.

Risoluzione dei problemi

Se l'app Web non è stata distribuita o non funziona, usare l'elenco seguente per determinare e risolvere il problema:

  • La distribuzione ha avuto esito positivo?

    Per determinare se la distribuzione è riuscita, è necessario passare al proprio fork del repository di esempio ed esaminare l'esito positivo o negativo dell'azione GitHub. Deve essere presente una sola azione e deve avere impostazioni di app Web statiche per app_location, api_location e output_location. Se l'azione non è stata distribuita correttamente, esaminare i log delle azioni e cercare l'ultimo errore.

  • L'applicazione client (front-end) funziona?

    Dovrebbe essere possibile accedere all'app Web e dovrebbe essere visualizzata correttamente. Se la distribuzione ha avuto esito positivo ma il sito Web non viene visualizzato, potrebbe trattarsi di un problema con la configurazione dell'app Web statica per la ricompilazione dell'app, una volta che si trova in Azure.

  • L'applicazione API (back-end serverless) funziona?

    Dovrebbe essere possibile interagire con l'app client, cercando libri e filtri. Se il modulo non restituisce valori, aprire gli strumenti di sviluppo del browser e determinare se le chiamate HTTP all'API hanno avuto esito positivo. Se le chiamate non hanno esito positivo, il motivo più probabile è che le configurazioni dell'app Web statica per il nome dell'endpoint API e la chiave di query di ricerca non siano corrette.

    Se il percorso del codice della funzione di Azure (api_location) non è corretto nel file YML, l'applicazione viene caricata ma non chiamerà alcuna delle funzioni che forniscono l'integrazione con Ricerca di intelligenza artificiale di Azure. Rivedere la sezione relativa alla distribuzione per assicurarsi che i percorsi siano corretti.

Pulire le risorse

Per pulire le risorse create in questa esercitazione, eliminare il gruppo di risorse o le singole risorse.

  1. In Visual Studio Code aprire la barra attività e selezionare l'icona di Azure.

  2. Nella barra laterale fare clic con il pulsante destro del mouse sulla sottoscrizione di Azure nell'area Static Web Apps e trovare l'app creata per questa esercitazione.

  3. Fare clic con il pulsante destro del mouse sul nome dell'app e quindi scegliere Elimina.

  4. Se non si vuole più usare il fork GitHub dell'esempio, ricordarsi di eliminarlo in GitHub. Passare alle impostazioni del fork, quindi eliminare il repository.

  5. Per eliminare Ricerca di intelligenza artificiale di Azure, trovare il servizio di ricerca e selezionare Elimina nella parte superiore della pagina.

Passaggi successivi