3 - Distribuire il sito Web Python 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 di esempi.

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-javascript-samples.

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

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

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

  4. Se viene visualizzata una finestra popup in Visual Studio Code in cui viene chiesto il ramo da cui si vuole eseguire la distribuzione, selezionare il ramo predefinito, in genere principale.

    Questa impostazione indica solo le modifiche di cui si esegue il commit in tale ramo vengono distribuite nell'app Web statica.

  5. 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 .

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

    Richiesta INVIO
    Selezionare un gruppo di risorse per le nuove risorse. Usare il gruppo di risorse creato per questa esercitazione.
    Immettere il nome per la nuova app Web statica. Creare un nome univoco per la risorsa. Ad esempio, è possibile anteporre il nome al nome del repository, ad esempio . my-demo-static-web-app
    Selezionare uno SKU Selezionare lo SKU gratuito per questa esercitazione.
    Select a location for new resources. Per Node.js: selezionare West US 2 durante l'anteprima del modello di programmazione delle funzioni di Azure (PM) v4. Per C# e Python selezionare 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 search-website-functions-v4/client

    Questo è il percorso, dalla radice del repository, all'app Web statica.
    Select the location of your Azure Functions code search-website-functions-v4/api

    Questo è il percorso, dalla radice del repository, all'app Web statica. Se non sono presenti altre funzioni nel repository, non verrà richiesto il percorso del codice della funzione. Attualmente, è necessario eseguire passaggi aggiuntivi per assicurarsi che la posizione del codice della funzione sia corretta. Questi passaggi vengono eseguiti dopo la creazione della risorsa e sono documentati in questo articolo.
    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.

  7. 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 allo screenshot seguente.

      Screenshot del log attività in Visual Studio Code.

  8. Attualmente, il file YML viene creato con sintassi di percorso errata per il codice della funzione di Azure. Usare questa soluzione alternativa per correggere la sintassi ed eseguire di nuovo il flusso di lavoro. È possibile eseguire questo passaggio non appena viene creato il file YML. Un nuovo flusso di lavoro viene avviato non appena si esegue il push degli aggiornamenti:

    1. In Esplora risorse di Visual Studio Code aprire la ./.github/workflows/ directory.

    2. Aprire il file YML.

    3. Scorrere fino al api-location percorso (sulla o vicino alla riga 31).

    4. Modificare la sintassi del percorso per usare una barra (è necessaria solo api_location la modifica, altre posizioni sono disponibili per il contesto):

      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. Salvare il file.

    6. Aprire un terminale integrato ed eseguire i comandi GitHub seguenti per inviare il file YML aggiornato al fork:

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

    Screenshot dei comandi di GitHub in Visual Studio Code.

    Attendere il completamento dell'esecuzione del flusso di lavoro prima di continuare. Il completamento dell'operazione può richiedere un minuto o due.

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

  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 cognitive-search-demo-rg --service-name my-cog-search-demo-svc

  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 in 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 App Web statiche di Azure Explorer 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 nella 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 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 App Web statiche di Azure Explorer 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 individuare 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 l'App Web statiche di Azure explorer 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, codead esempio , 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 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 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_locatione 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 visualizzato correttamente. Se la distribuzione ha avuto esito positivo ma il sito Web non viene visualizzato, questo potrebbe essere un problema con il modo in cui l'app Web statica è configurata 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 soluzione alternativa nella sezione relativa alla distribuzione per informazioni sulla correzione del percorso.

Pulire le risorse

Per pulire le risorse create in questa esercitazione, eliminare il gruppo di 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 Resource Groups e trovare il gruppo di risorse creato per questa esercitazione.

  3. Fare clic con il pulsante destro del mouse sul nome del gruppo di risorse e quindi scegliere Elimina. In questo modo vengono eliminate sia le risorse di ricerca che di App Web statiche.

  4. Se non si vuole più usare il fork GitHub dell'esempio, ricordarsi di eliminarlo in GitHub. Passare al fork Impostazioni quindi eliminare il fork.

Passaggi successivi