Laboratorio 08: Creación de una solución de niveles múltiples mediante los servicios de Azure

Interfaz de usuario de Microsoft Azure

Dada la naturaleza dinámica de las herramientas en la nube de Microsoft, puede experimentar cambios en la interfaz de usuario de Azure que se producen después del desarrollo de este contenido de entrenamiento. Como resultado, es posible que las instrucciones y los pasos del laboratorio no se alineen correctamente.

Microsoft actualiza este curso de entrenamiento cuando la comunidad nos alerta de los cambios necesarios. Sin embargo, las actualizaciones en la nube se producen con frecuencia, por lo que es posible que se produzcan cambios en la interfaz de usuario antes de que se actualice este contenido de entrenamiento. Si esto ocurre, adáptese a los cambios y, a continuación, trabaje con ellos en los laboratorios según sea necesario.

Instructions

Antes de comenzar

Inicio de sesión al entorno de laboratorio

Inicie sesión en la máquina virtual (VM) de Windows 11 con las credenciales siguientes:

  • Nombre de usuario: Admin
  • Contraseña: Pa55w.rd

Nota: El instructor le proporcionará instrucciones para conectarse al entorno de laboratorio virtual.

Revisión de las aplicaciones instaladas

Busque la barra de tareas en el escritorio de Windows 11. La barra de tareas contiene los iconos de las aplicaciones que usará en este laboratorio:

  • Microsoft Edge

Escenario de laboratorio

En esta prueba de concepto, creará una aplicación contenedorizada para hospedar una aplicación web en Azure, como origen de información para la API. A continuación, creará un proxy de API mediante las funcionalidades de Azure API Management para exponer y probar las API. Los desarrolladores pueden consultar las API para probar el servicio y validar su aplicabilidad.

Diagrama de la arquitectura

Diagrama de arquitectura que muestra la creación de una aplicación de niveles múltiples mediante los servicios de Azure.

Ejercicio 1: Creación de un recurso de Azure App Service mediante una imagen de contenedor de Docker

Tarea 1: Abra Azure Portal

  1. En la barra de tareas, seleccione el icono de Microsoft Edge.

  2. En la ventana del explorador que se abrirá, vaya a Azure Portal en https://portal.azure.com y, a continuación, inicie sesión con la cuenta que va a usar para este laboratorio.

    Nota: Si es la primera vez que inicia sesión en Azure Portal, se le ofrecerá un paseo por el portal. Seleccione Introducción para omitir el paseo y empezar a usar el portal.

Tarea 2: Creación de una aplicación web mediante el recurso de Azure App Service mediante una imagen de contenedor httpbin

  1. En Azure Portal, use el cuadro de texto Buscar recursos, servicios y documentos para buscar App Services y, a continuación, en la lista de resultados, seleccione App Services.

  2. En la hoja App Services, seleccione + Crear.

  3. En la hoja Crear aplicación web, en la pestaña Aspectos básicos, realice las siguientes acciones:

    Configuración Acción
    Lista desplegable de Suscripción Conserve los valores predeterminados
    Sección Grupo de recursos Seleccione Crear nuevo, escriba ApiService y seleccione Aceptar.
    Cuadro de texto de nombre Escriba httpapi [sunombre]
    Sección Publicar Seleccione contenedor
    Sección del sistema operativo Seleccione Linux.
    Lista desplegable de Región Seleccione cualquier región de Azure en la que pueda implementar una aplicación web de Azure.
    Sección Plan de Linux Seleccione Crear nuevo, escriba ApiPlan en el cuadro de texto Nombre y seleccione Aceptar.
    Sección Plan de precios Seleccione Explorar planes de precios, en la página Seleccionar plan de precios de App Service, seleccione Básico B1 y, a continuación, elija Seleccionar

  4. Seleccione Siguiente: Base de datos >.

  5. Seleccione Siguiente: Contenedor >.

  6. En la pestaña Docker, realice las siguientes acciones y, a continuación, seleccione Revisar y crear:

    Configuración Acción
    Lista desplegable de Origen de la imagen Seleccione Docker Hub u otros registros
    Lista desplegable de opciones Seleccione Contenedor único
    Lista desplegable del Tipo de acceso Seleccione Público.
    Cuadro de texto Imagen y etiqueta Escriba kennethreitz/httpbin:latest.

  7. En la pestaña Revisar y crear, revise las opciones que seleccionó durante los pasos anteriores.

  8. Seleccione Crear para crear la aplicación web mediante la configuración especificada.

    Nota: Espere a que se complete la tarea de creación antes de continuar con este laboratorio.

Tarea 3: Prueba de la aplicación web httpbin

  1. En Azure Portal, use el cuadro de texto Buscar recursos, servicios y documentos para buscar App Services y, a continuación, en la lista de resultados, seleccione App Services.

  2. En la hoja App Services, seleccione la aplicación web recién creada.

  3. En la hoja que muestra las propiedades de la aplicación recién creada, seleccione Examinar.

  4. En la aplicación web, realice las siguientes acciones:

    a. Seleccione Formatos de respuesta.

    b. Seleccione GET /html.

    c. Haga clic en Probar.

    En la captura de pantalla siguiente se muestra la sección Probar de la aplicación web.

    httpbin.org API page GET /html try it out section

    d. Seleccione Ejecutar.

    e. Revise el valor de los cuadros de texto Cuerpo de la respuesta y Encabezados de respuesta.

    f. Revise el valor del cuadro de texto Dirección URL de la solicitud.

  5. En la aplicación web, realice las siguientes acciones:

    a. Seleccione Datos dinámicos.

    b. Seleccione GET /bytes/{n} .

    c. Haga clic en Probar.

    d. En el cuadro de texto n, escriba 25.

    e. Seleccione Execute(Ejecutar).

    f. Revise el valor de los cuadros de texto Cuerpo de la respuesta y Encabezados de respuesta.

    g. Seleccione Descargar archivo y, una vez descargado el archivo, ábralo en el Bloc de notas, revise su contenido y, a continuación, cierre el archivo.

    Nota: El archivo contiene una secuencia de bytes generados aleatoriamente.

    En la captura de pantalla siguiente se muestra la sección de datos dinámicos de la aplicación web.

    httpbin.org API page GET /bytes/{n} dynamic data section

  6. En la aplicación web, realice las siguientes acciones:

    a. Seleccione Códigos de estado.

    b. Seleccione GET /status/{codes} .

    c. Haga clic en Probar.

    d. En el cuadro de texto Códigos, escriba 404.

    e. Seleccione Execute(Ejecutar).

    f. Revise la respuesta del servidor y observe que incluye la entrada Error: NO ENCONTRADO.

  7. Cierre la ventana del explorador que muestra la aplicación web.

  8. Vuelva a la ventana del explorador que muestra la aplicación webhttpapi [su nombre].

  9. En la hoja Información general de App Service, en Essentials, registre el valor del vínculo Dominio predeterminado. Usará este valor más adelante en el laboratorio para enviar solicitudes a la API correspondiente.

Revisar

En este ejercicio, ha creado una nueva aplicación web de Azure mediante una imagen de contenedor procedente de Docker Hub.

Ejercicio 2: Creación de un nivel de proxy de API mediante Azure API Management

Tarea 1: Creación de un recurso de API Management

  1. En Azure Portal, use el cuadro de texto Buscar recursos, servicios y documentos para buscar servicios de API Management y, a continuación, en la lista de resultados, seleccione servicios de API Management.

  2. En la hoja Servicios de API Management, seleccione + Crear.

  3. En la hoja Instalar puerta de enlace de API Management, realice las siguientes acciones y, a continuación, seleccione Revisar y crear:

    Configuración Acción
    Lista desplegable de Suscripción Conserve los valores predeterminados.
    Sección Grupo de recursos Seleccione el grupo ApiService que creó anteriormente en el laboratorio.
    Lista de regiones Seleccione la misma región que eligió en el ejercicio anterior.
    Cuadro de texto Nombre del recurso Escriba proapi [su nombre] .
    Cuadro de texto Nombre de la organización Escriba Contoso
    Cuadro de texto Correo electrónico del administrador Escriba admin@contoso.com.
    Lista desplegable de planes de tarifa Consumo (99,95 % del SLA)

    En la captura de pantalla siguiente se muestran los valores configurados de la hoja Crear una instancia de API Management de la aplicación web.

    Hola Crear una instancia de API Management

  4. En la pestaña Revisar y crear, revise la opción que especificó en el paso anterior y, a continuación, seleccione Crear.

    Nota: Espere a que se complete la tarea de creación antes de continuar con este laboratorio.

  5. En la hoja Información general sobre la implementación, seleccione Ir al recurso.

Tarea 2: Definición de una nueva API

  1. En la hoja del servicio de API Management,en la sección API, seleccione API.

  2. En la sección Definir una nueva API, seleccione HTTP.

  3. En la ventana Creación de una API HTTP, realice las siguientes acciones y, a continuación, seleccione Crear:

    Configuración Acción
    Cuadro de texto Nombre para mostrar Escriba HTTPBin API
    Cuadro de texto de nombre Escriba httpbin-api.
    Cuadro de texto Dirección URL del servicio web Escriba la dirección URL de la aplicación web que copió anteriormente en este laboratorio. Nota: Asegurarse de que la dirección URL comienza con el prefijo https://
    Cuadro de texto Sufijo de dirección URL de API Déjelo vacío.

    En la captura de pantalla siguiente, se muestran los valores configurados de la ventana Crear una API en blanco de la aplicación web.

    Creación de un panel de API en blanco

    Nota: Espere a que la nueva API termine de crearse.

  4. En la pestaña Diseño, seleccione + Agregar operación.

  5. En la sección Agregar operación, realice las siguientes acciones y, a continuación, seleccione Guardar:

    Configuración Acción
    Cuadro de texto Nombre para mostrar Escriba Encabezados de eco.
    Cuadro de texto de nombre Compruebe que su valor está establecido en encabezados-de-eco.
    Lista de direcciones URL Seleccione GET.
    Cuadro de texto de la dirección URL Escriba /

    En la captura de pantalla siguiente se muestran los ajustes configurados de la sección Agregar operación.

    Propiedades de la operación Agregar encabezados de eco

  6. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Encabezados de eco.

  7. En la sección Diseño, en el icono Procesamiento de entrada, seleccione + Agregar directiva.

  8. En la sección Agregar directiva entrante, seleccione el icono Establecer encabezados.

  9. En la sección Establecer encabezados, realice las siguientes acciones y, a continuación, seleccione Guardar:

    Configuración Acción
    Cuadro de texto de nombre Escriba el origen.
    Cuadro de texto Valor Seleccione la lista, Agregar valor y, a continuación, escriba azure-api-mgmt.
    Lista de acciones Seleccione anexar.

    En la captura de pantalla siguiente se muestran los ajustes configurados de la sección Diseño.

    Panel de diseño de los Encabezados de eco

  10. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Encabezados de eco.

  11. En la sección Diseño de los Echo Headers, en el icono Back-end, seleccione el icono con forma de lápiz.

  12. En la sección Back-end, realice las siguientes acciones y, a continuación, seleccione Guardar:

    Configuración Acción
    Sección Dirección URL del servicio Seleccione la casilla de invalidación.
    Cuadro de texto Dirección URL del servicio Anexe el valor /headers a su valor actual. Nota: Por ejemplo, si el valor actual es https://httpapi[yourname].azurewebsites.net, el nuevo valor será https://httpapi[yourname].azurewebsites.net/headers.

  13. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Encabezados de eco y, a continuación. seleccione la pestaña Prueba.

  14. En la sección Encabezados de eco, seleccione Enviar.

    En la captura de pantalla siguiente se muestran los ajustes configurados de la sección Encabezados de eco.

    Pestaña Encabezados de eco de prueba

  15. Revise los resultados de la solicitud de API.

    Nota: Compruebe que haya muchos encabezados enviados como parte de la solicitud que se repitan en la respuesta. Deben incluir el nuevo encabezado Origen que creó como parte de esta tarea.

    En la captura de pantalla siguiente se muestra la respuesta a la solicitud Encabezados de eco.

    Respuesta a la solicitud de encabezados de eco de prueba

  16. Seleccione la pestaña Diseño para volver a la lista de operaciones.

Tarea 3: Manipular una respuesta de API

  1. En la pestaña Diseño, seleccione + Agregar operación.

  2. En la sección Agregar operación, realice las siguientes acciones y, a continuación, seleccione Guardar:

    Configuración Acción
    Cuadro de texto Nombre para mostrar Escriba Obtener datos heredados.
    Cuadro de texto de nombre Compruebe que su valor está establecido en en obtener-datos-heredados.
    Lista de direcciones URL Compruebe que su valor está establecido en GET.
    Cuadro de texto de la dirección URL Escriba /xml.

  3. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Obtener datos heredados.

  4. Seleccione la pestaña Prueba y, a continuación, seleccione Enviar.

  5. Revise los resultados de la solicitud de API.

    Nota: En este momento, los resultados deben estar en formato XML.

    En la captura de pantalla siguiente se muestran los resultados de la solicitud de API.

    Respuesta a la solicitud de obtener datos heredados

  6. Seleccione la pestaña Diseño y, a continuación, seleccione Obtener datos heredados.

  7. En el panel Diseño, en la sección Procesamiento de salida, seleccione Agregar directiva.

    En la siguiente captura de pantalla se muestra la sección Procesamiento de salida.

    Sección de procesamiento de salida de la operación para obtener datos heredados

  8. En la sección Agregar directiva de salida, seleccione el icono Otras directivas.

  9. En el editor de código de directiva, busque el siguiente bloque de contenido XML:

     <outbound>
     <base />
 </outbound>

  10. Reemplace ese bloque de XML por el siguiente XML:

     <outbound>
     <base />
     <xml-to-json kind="direct" apply="always" consider-accept-header="false" />
 </outbound>

  11. En el editor de código de la directiva, seleccione Guardar.

  12. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Obtener datos heredados y, a continuación, seleccione Probar.

  13. En la sección Obtener datos heredados, seleccione Enviar.

  14. Revise los resultados de la solicitud de API.

    Nota: Los nuevos resultados están en formato de Notación de objetos JavaScript (JSON).

  15. En la sección Respuesta de HTTP, realice los pasos siguientes:

    1. Seleccione Seguimiento.

    2. Si se le solicita, seleccione Habilitar seguimiento durante una hora.

    3. Seleccione la pestaña Seguimiento, revise el contenido de los cuadros de texto de Back-end y Saliente y tenga en cuenta que incluyen detalles de las operaciones de API correspondientes con su información de tiempo.

Tarea 4: Manipular una solicitud de API

  1. En la pestaña Diseño, seleccione + Agregar operación.

  2. En la sección Agregar operación, realice las siguientes acciones y, a continuación, seleccione Guardar:

    Configuración Acción
    Cuadro de texto Nombre para mostrar Escriba Escriba Modificar el código de estado.
    Cuadro de texto de nombre Compruebe que su valor está establecido en modificar-el-codigo-de-estado.
    Lista de direcciones URL Seleccione GET.
    Cuadro de texto de la dirección URL Escriba /status/404.

  3. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Modificar el código de estado.

  4. En la sección Diseño, en el icono Procesamiento de entrada, seleccione + Agregar directiva.

  5. En la sección Agregar directiva de entrada, seleccione el icono Reescribir dirección URL.

  6. En la sección Reescribir dirección URL, realice las acciones siguientes:

    a. En el cuadro de texto Back-end, escriba /status/200.

    b. Seleccione Guardar.

  7. De nuevo en la pestaña Diseño, en la lista de operaciones, seleccione Modificar el código de estado y, a continuación. seleccione la pestaña Prueba.

  8. En la sección Modificar el código de estado, seleccione Enviar.

  9. Revise los resultados de la solicitud de API.

    Nota: Compruebe que la solicitud devolvió la respuesta HTTP/1.1 200 Aceptar.

Revisar

En este ejercicio, ha creado un nivel de proxy entre el recurso App Service y los desarrolladores que quieren realizar consultas en su API.