3 - Implementación del sitio web habilitado para búsquedas

  • Artículo

Implemente el sitio web habilitado para búsquedas como un sitio de Azure Static Web Apps. Esta implementación incluye la aplicación React y la aplicación de funciones.

La aplicación web estática extrae la información y los archivos para la implementación desde GitHub mediante la bifurcación del repositorio de ejemplos.

Creación de una aplicación web estática en Visual Studio Code

  1. En Visual Studio Code, abra una carpeta en la raíz del repositorio (por ejemplo, azure-search-javascript-samples).

  2. Seleccione Azure en la barra de actividades y, luego, elija Recursos en la barra lateral.

  3. Haga clic con el botón derecho en Static Web Apps y, luego, elija Crear aplicación web estática (avanzado). Si no ve esta opción, compruebe que tiene la extensión Azure Functions para Visual Studio Code.

    Screenshot of Visual Studio Code, with the Azure Static Web Apps explorer showing the option to create an advanced static web app.

  4. Si ve una ventana emergente en Visual Studio Code que le pregunta desde qué rama quiere realizar la implementación, seleccione la rama predeterminada, normalmente es main.

    Esta configuración significa que solo los cambios que se confirman en esa rama se implementan en la aplicación web estática.

  5. Si ve una ventana emergente que le pide que confirme los cambios, no lo haga. Los secretos del paso de importación masiva no se deben confirmar en el repositorio.

    Para revertir los cambios, en Visual Studio Code seleccione el icono Control de código fuente de la barra de actividad, elija cada archivo modificado en la lista Cambios y seleccione el icono Descartar cambios.

  6. Siga las indicaciones para crear la aplicación web estática:

    Prompt Entrar
    Seleccione un grupo de recursos para los nuevos recursos. Utilice el grupo de recursos que ha creado para este tutorial.
    Escriba el nombre de la nueva aplicación web estática. Cree un nombre único para el recurso. Por ejemplo, puede anteponer su nombre al nombre del repositorio, como en my-demo-static-web-app.
    Seleccionar una SKU En este tutorial, seleccione la SKU gratuita.
    Seleccione una ubicación para los nuevos recursos. Para Node.js: seleccione West US 2 durante la versión preliminar del modelo de programación de funciones de Azure (PM) v4. En C# y Python, seleccione una región cercana.
    Elija el valor preestablecido de compilación para configurar la estructura predeterminada del proyecto. seleccione Personalizada.
    Seleccione la ubicación del código de su aplicación cliente search-website-functions-v4/client

    Esta es la ruta de acceso, desde la raíz del repositorio hasta la aplicación web estática.
    Seleccione la ubicación del código de Azure Functions. search-website-functions-v4/api

    Esta es la ruta de acceso, desde la raíz del repositorio hasta la aplicación web estática. Si no hay ninguna otra función en el repositorio, no se le pedirá la ubicación del código de función. Actualmente, deberá realizar pasos adicionales para asegurarse de que la ubicación del código de función es correcta. Estos pasos se realizan después de crear el recurso y se documentan en este artículo.
    Escriba la ruta de la salida de la compilación... build

    Esta es la ruta de acceso, desde la aplicación web estática hasta los archivos generados.

    Si recibe un error sobre una región incorrecta, asegúrese de que el grupo de recursos y el recurso de aplicación web estática se encuentran en una de las regiones admitidas enumeradas en la respuesta de error.

  7. Cuando se crea la aplicación web estática, también se crea un archivo YML de flujo de trabajo de GitHub localmente y en GitHub en la bifurcación. Este flujo de trabajo se ejecuta en la bifurcación, la compilación e implementación de la aplicación web estática y las funciones.

    Compruebe el estado de la implementación de aplicaciones web estáticas mediante cualquiera de estos enfoques:

    • Seleccione Open Actions in GitHub en las notificaciones. Se abrirá una ventana del explorador que apunta al repositorio bifurcado.

    • Seleccione la pestaña Acciones del repositorio bifurcada. Debería ver una lista de todos los flujos de trabajo de la bifurcación.

    • Seleccione Azure: Registro de actividad en Visual Code. Debería ver un mensaje similar a la siguiente captura de pantalla.

      Screenshot of the Activity Log in Visual Studio Code.

  8. Actualmente, el archivo YML se crea con una sintaxis de ruta de acceso errónea para el código de función de Azure. Use esta solución alternativa para corregir la sintaxis. Puede realizar este paso tan pronto como se cree el archivo YML. Se iniciará un nuevo flujo de trabajo en cuanto inserte las actualizaciones:

    1. En el explorador de Visual Studio Code, abra el directorio ./.github/workflows/.

    2. Abra el archivo YML.

    3. Desplácese hasta la ruta de acceso api-location (en o cerca de la línea 31).

    4. Cambie la sintaxis de ruta de acceso para usar una barra diagonal (solo api_location necesita edición; otras ubicaciones están aquí como contexto):

      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. Guarde el archivo.

    6. Abra un terminal integrado y envíe los siguientes comandos de GitHub para enviar el YML actualizado a la bifurcación:

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

    Screenshot of the GitHub commands in Visual Studio Code.

    Espere a que finalice la ejecución del flujo de trabajo antes de continuar. Esto puede tardar uno o dos minutos en completarse.

Obtención de la clave de consulta de Azure AI Search en Visual Studio Code

  1. En Visual Studio Code, abra una ventana de terminal.

  2. Obtenga la clave de API de consulta con este comando de la CLI de Azure:

    az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc

  3. Guarde esta clave de consulta para utilizarla en la siguiente sección. La clave de consulta autoriza el acceso de lectura a un índice de búsqueda.

Adición de valores de configuración en Azure Portal

La aplicación de Azure Functions no devolverá datos de búsqueda hasta que los secretos de Search estén en la configuración.

  1. Seleccione Azure en la barra de actividades.

  2. Haga clic con el botón derecho en el recurso Static Web Apps y seleccione Abrir en el portal.

    Screenshot of Visual Studio Code showing Azure Static Web Apps explorer with the Open in Portal option shown.

  3. Seleccione Configuración y, a continuación, seleccione + Agregar.

    Screenshot of Visual Studio Code showing the Azure Static Web Apps explorer with the Configuration option shown.

  4. Agregue cada una de las siguientes opciones:

    Valor El valor del recurso de Search
    SearchApiKey La clave de la consulta de Search
    SearchServiceName El nombre del recurso de Search
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI Search requiere sintaxis diferentes para filtrar colecciones y cadenas. Agregue un * después de un nombre de campo para indicar que el campo es de tipo Collection(Edm.String). Esto permite que la función de Azure agregue filtros a las consultas correctamente.

  5. Haga clic en Save (Guardar) para guardar la configuración.

    Screenshot of browser showing Azure portal with the button to save the settings for your app.

  6. Vuelva a Visual Studio Code.

  7. Actualice la aplicación web estática para ver la configuración y las funciones de la aplicación.

    Screenshot of Visual Studio Code showing the Azure Static Web Apps explorer with the new application settings.

Uso de la búsqueda en la aplicación web estática

  1. En Visual Studio Code, abra la barra de actividad y seleccione el icono de Azure.

  2. En la barra lateral, haga clic con el botón derecho en la suscripción de Azure en el área Static Web Apps y busque la aplicación web estática que creó para este tutorial.

  3. Haga clic con el botón derecho en el nombre de la aplicación web estática y seleccione Examinar sitio.

    Screenshot of Visual Studio Code showing the Azure Static Web Apps explorer showing the **Browse site** option.

  4. Seleccione Open (Abrir) en el cuadro de diálogo emergente.

  5. En la barra de búsqueda de sitios web, escriba una consulta de búsqueda como code, de modo que la característica de sugerencia sugiera títulos de libros. Seleccione una sugerencia o continúe escribiendo su propia consulta. Presione ENTRAR cuando haya completado la consulta de búsqueda.

  6. Revise los resultados y, a continuación, seleccione uno de los libros para ver más detalles.

Solución de problemas

Si la aplicación web no se implementó o no funcionó, use la siguiente lista para determinar y corregir el problema:

  • ¿La implementación se realizó correctamente?

    Para determinar si la implementación se realizó correctamente, debe ir a su bifurcación del repositorio de ejemplo y revisar el éxito o error de la acción de GitHub. Solo debe haber 1 acción y debe tener la configuración de la aplicación web estática para app_location, api_location y output_location. Si la acción no se implementó correctamente, profundice en los registros de acciones y busque el último error.

  • ¿Funciona la aplicación cliente (front-end)?

    Debería poder acceder a la aplicación web y debería mostrarse correctamente. Si la implementación se realizó correctamente, pero el sitio web no se muestra, puede haber un problema con el modo en que la aplicación web estática está configurada para recompilar la aplicación, una vez que se encuentra en Azure.

  • ¿Funciona la aplicación de API (back-end sin servidor)?

    Debería poder interactuar con la aplicación cliente, buscar libros y filtrarlos. Si el formulario no devuelve ningún valor, abra las herramientas de desarrollo del explorador y determine si las llamadas HTTP a la API se realizaron correctamente. Si las llamadas no se realizaron correctamente, lo más probable es que la configuración de la aplicación web estática para el nombre del punto de conexión de API y la clave de consulta de búsqueda sean incorrectas.

    Si la ruta de acceso al código de la función de Azure (api_location) no es correcta en el archivo YML, la aplicación se carga pero no llama a ninguna de las funciones que proporcionan integración con Azure AI Search. Vuelva a consultar la solución alternativa de la sección de implementación para obtener ayuda para corregir la ruta de acceso.

Limpieza de recursos

Para borrar los recursos que ha creado en este tutorial, elimine el grupo de recursos.

  1. En Visual Studio Code, abra la barra de actividad y seleccione el icono de Azure.

  2. En la barra lateral, haga clic con el botón derecho en la suscripción de Azure en el área Resource Groups y busque el grupo de recursos que creó para este tutorial.

  3. Haga clic con el botón derecho en el nombre del grupo de recursos y seleccione Eliminar. Se eliminan los recursos de búsqueda y de Static Web Apps.

  4. Si ya no desea la bifurcación de GitHub del ejemplo, no olvide eliminarla en GitHub. Vaya a la configuración de la bifurcación y elimínela.

Pasos siguientes

Explora el código JavaScript de búsqueda