Paso 3: Implementación del sitio web de .NET habilitado para búsqueda
Implemente el sitio web habilitado para búsquedas como un sitio de Azure Static Web Apps. Esta implementación incluye la aplicación React para las páginas web y la aplicación de funciones para las operaciones de búsqueda.
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
En Visual Studio Code, asegúrese de que está en la raíz del repositorio y no de la carpeta de inserción masiva (por ejemplo,
azure-search-javascript-samples
).Seleccione Azure en la barra de actividades y, luego, elija Recursos en la barra lateral.
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.
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.
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.
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.
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.
Actualmente, el archivo YML se crea con una sintaxis errónea de ruta de acceso para el código de función de Azure. Use esta solución alternativa para corregir la sintaxis y volver a ejecutar el flujo de trabajo. Puede realizar este paso tan pronto como se cree el archivo YML. Se inicia un nuevo flujo de trabajo en cuanto se insertan las actualizaciones:
En el explorador de Visual Studio Code, abra el directorio
./.github/workflows/
.Abra el archivo YML.
Desplácese hasta la ruta de acceso
api-location
(en o cerca de la línea 31).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
Guarde el archivo.
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
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
En Visual Studio Code, abra una ventana de terminal.
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
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 variables de entorno 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.
Seleccione Azure en la barra de actividades.
Haga clic con el botón derecho en el recurso Static Web Apps y seleccione Abrir en el portal.
Seleccione Variables de entorno seleccione + Agregar configuración de aplicación.
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 tipoCollection(Edm.String)
. Esto permite que la función de Azure agregue filtros a las consultas correctamente.Compruebe la configuración para asegurarse de que tienen un aspecto similar a la captura de pantalla siguiente.
Vuelva a Visual Studio Code.
Actualice la aplicación web estática para ver la configuración y las funciones de la aplicación.
Si no ve la configuración de la aplicación, vuelva a consultar los pasos para actualizar y volver a iniciar el flujo de trabajo de GitHub.
Uso de la búsqueda en la aplicación web estática
En Visual Studio Code, abra la barra de actividad y seleccione el icono de Azure.
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.Haga clic con el botón derecho en el nombre de la aplicación web estática y seleccione Examinar sitio.
Seleccione Open (Abrir) en el cuadro de diálogo emergente.
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.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
youtput_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.
En Visual Studio Code, abra la barra de actividad y seleccione el icono de Azure.
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.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.
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.