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

Implemente el sitio web habilitado para búsquedas como una aplicación web estática de Azure. 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. Seleccione Azure en la barra de actividades y, a continuación, seleccione Static Web Apps en la barra lateral.

  2. Si ve una ventana emergente en VS Code que le pregunta desde qué rama quiere realizar la implementación, seleccione la rama predeterminada, normalmente maestra o principal.

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

  3. 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 VS 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.

  4. Haga clic con el botón derecho en el nombre de la suscripción y seleccione Create Static Web App (Advanced) [(Crear aplicación web estática (avanzada)].

    Haga clic con el botón derecho en el nombre de la suscripción y seleccione **Create Static Web App (Advanced)** [(Crear aplicación web estática (avanzada)] .

  5. Siga los mensajes para proporcionar la siguiente información:

    Prompt Entrar
    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 joansmith-azure-search-javascript-samples.
    Seleccione un grupo de recursos para los nuevos recursos. Utilice el grupo de recursos que ha creado para este tutorial.
    Seleccionar una SKU En este tutorial, seleccione la SKU gratuita.
    Elija el valor preestablecido de compilación para configurar la estructura predeterminada del proyecto. Seleccionar Personalizado
    Seleccione la ubicación del código de la aplicación. search-website

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

    Esta es la ruta de acceso, desde la raíz del repositorio hasta la aplicación de funciones de Azure.
    Escriba la ruta de la salida de la compilación... build

    Esta es la ruta de acceso, desde la aplicación web estática de Azure hasta los archivos generados.
    Seleccione una ubicación para los nuevos recursos. Seleccione una región cercana.
  6. Una vez creado el recurso, seleccione Open Actions in GitHub (Abrir acciones en GitHub) en las notificaciones. Se abrirá una ventana del explorador que apunta al repositorio bifurcado.

    La lista de acciones indica que la aplicación web, el cliente y las funciones, se insertaron correctamente en la aplicación web estática de Azure.

    Espere a que finalicen la compilación y la implementación antes de continuar. Esto puede tardar uno o dos minutos en completarse.

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

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

  2. En la barra lateral, seleccione su suscripción de Azure en el área Azure: Cognitive Search, haga clic con el botón derecho en el recurso de búsqueda y seleccione Copy Query Key (Copiar clave de consulta).

    En la barra lateral, seleccione su suscripción de Azure en el área **Azure: Cognitive Search**, haga clic con el botón derecho en el recurso de búsqueda y seleccione **Copy Query Key** (Copiar clave de consulta) .

  3. Conserve esta clave de consulta, tendrá que utilizarla en la sección siguiente. La clave de consulta puede realizar consultas en el índice.

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

La aplicación de funciones de Azure no devolverá datos de Search 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 de la aplicación web estática y seleccione Abrir en el portal.

    Haga clic con el botón derecho en el recurso de la aplicación web estática de JavaScript y seleccione Abrir en el portal .

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

    Seleccione Configuración y, a continuación, seleccione Agregar para la aplicación JavaScript.

  4. Agregue cada una de las siguientes opciones:

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

    Azure Cognitive 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.

    Seleccione Guardar para guardar la configuración.

  6. Vuelva a VS Code.

  7. Actualice la aplicación web estática para ver su configuración.

    Actualice la aplicación web estática para ver su configuración.

Uso de Search 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 Browse site (Examinar sitio).

    Haga clic con el botón derecho en el nombre de la aplicación web estática y seleccione **Browse site** (Examinar sitio).

  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, lentamente, 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.

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. Esto elimina los recursos de Search y de la aplicación web estática.

  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