Aplicación web sin servidor y API con Code Engine

Esta guía de aprendizaje puede incurrir en costes. Utilice Estimador de costes para generar una estimación del coste basada en el uso previsto.

En esta guía de aprendizaje, creará una aplicación web sin servidor utilizando un grupo en Object Storage e implementando el programa de fondo de la aplicación con IBM Cloud Code Engine y IBM Cloudant como base de datos de documentos JSON.

Los sitios web estáticos son ideales para el rendimiento y la seguridad. A veces se hace referencia a su modelo de arquitectura como Jamstack en referencia a JavaScript, API y Markup. En esta guía de aprendizaje, creará un sitio web estático alojado en Object Storage. El sitio web tiene un libro de visitas que utiliza JavaScript para acceder a una API para recuperar entradas o añadir una nueva entrada. La API para la interacción con la base de datos de respaldo se implementa utilizando un enfoque sin servidor. Se despliega como una aplicación o un microservicio de fondo en IBM Cloud Code Engine. El programa de fondo solo se ejecuta cuando es necesario y, por lo tanto, se incurre en cargos cuando se utiliza.

Objetivos

  • Despliegue de un programa de fondo sin servidor y de una base de datos
  • Exponer una API REST como una aplicación sin servidor
  • Alojamiento de un sitio web estático

La aplicación que se muestra en esta guía de aprendizaje es un sitio web sencillo de registro de visitas en el que los usuarios pueden publicar mensajes.

de arquitectura del

  1. El usuario acceder a la aplicación alojada en el grupo de Object Storage
  2. La aplicación web llama a una API de programa de fondo.
  3. La aplicación con la API de fondo se despliega en Code Engine.
  4. El programa de fondo utiliza IBM Cloudant para almacenar y recuperar entradas de libro de visitas.

Creación de la base de datos Guestbook

Empecemos creando una instancia de servicio de IBM Cloudant. IBM Cloudant es una base de datos de documentos JSON totalmente gestionada. Se basa y es compatible con Apache CouchDB.

  1. En el Catálogo, en Servicios, vaya a la categoría Bases de datos. Pulse sobre el mosaico IBM Cloudant. En el nuevo diálogo:
    1. En Multiarrendatario, seleccione una región.

    2. En Configurar instancia de Cloudant, elija un nombre exclusivo para el servicio, como por ejemplo <yourinitials>-guestbook-db.

    3. Seleccione un grupo de recursos.

    4. Seleccione IAM como método de autenticación.

    5. Seleccione el plan Lite. Si ya tiene un plan Lite en su cuenta, seleccione otro plan de servicio.

    6. Pulse Crear.

  2. De nuevo en la lista de recursos IBM Cloud Lista de recursos, en Servicios, haga clic en la instancia IBM Cloudant que ha creado para abrir la página de detalles completos de la instancia. Nota: Es posible que tenga que esperar hasta que cambie el estado de servicio a Active.
  3. Pulse Iniciar panel de control para abrir el panel de control en un nuevo separador del navegador.
  4. En la parte superior derecha, pulse Crear base de datos. Introduzca guestbook como nombre y seleccione No Particionado en Particionado. Pulse Crear para crear la base de datos.

Crear programa de fondo sin servidor

En esta sección, creará la aplicación de programa de fondo sin servidor con Code Engine. Las aplicaciones sin servidor solo incurren en cargos en el tiempo de ejecución, lo que es ideal para soluciones a las que se accede con poca frecuencia, como un libro de visitas.

Crear un proyecto de Code Engine

  1. Vaya a la página Visión general de IBM Cloud Code Engine.
  2. En el panel izquierdo, pulse Proyectos y, a continuación, pulse Crear.
    • Seleccione una ubicación.
    • Utilice <yourinitials>-guestbook como nombre de proyecto y seleccione el mismo grupo de recursos que antes.
    • Pulse Crear.
    • Espere hasta que el status del proyecto cambie a Activo.
  3. Pulse el nombre del proyecto para entrar en el panel de control del proyecto.

Crear y desplegar una aplicación de fondo

  1. En el panel de control del proyecto, pulse Aplicaciones y, a continuación, Crear.
  2. En el nuevo diálogo, escriba guestbook-backend como nombre.
  3. Deje Imagen de contenedor seleccionado y utilice icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest como Referencia de imagen. Utiliza una imagen de contenedor ya existente.
  4. En Recursos de instancia, seleccione 0.25 vCPU / 0.5 GB para CPU y memoria. No se necesitan muchos recursos para este tipo de aplicación.
  5. Aumente el Número mínimo de instancias a 1 y reduzca el Número máximo de instancias a 2. El mínimo de uno hace que la aplicación sea más sensible durante las pruebas iniciales. Podrá reducirlo más tarde a cero otra vez.
  6. Pulse Crear para desplegar la nueva aplicación de fondo para el libro de visitas. Tenga en cuenta que sin el paso siguiente de crear un enlace de servicio, el despliegue fallará con un error de código.
  7. Cree un enlace de servicio a la base de datos.
    1. Haga clic en la pestaña Service bindings.
    2. Pulse Crear.
    3. Pulse Instancia de servicio deIBM Cloud y elija la base de datos en el desplegable.
    4. Deje Rol como Escritor.
    5. Pulse Añadir.
  8. Espere a que el aprovisionamiento se informe como verde y listo. Pulse Aplicación de prueba y URL de aplicación. La aplicación de fondo debe cargar y devolver una página que indique healthy. Recuerde o copie el URL de la aplicación porque es necesario para la siguiente parte.

En lugar de utilizar la imagen de contenedor predefinida, puede crear su propia imagen. Puede hacerlo fuera o con la ayuda de Code Engine. Si no utiliza la imagen de contenedor predefinida y utiliza un registro de contenedor privado, es posible que se necesiten pasos adicionales. Encontrará la fuente en https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

Despliegue de la app web

Cree un grupo de Object Storage configurado con un alojamiento de sitio web estático que contenga los archivos de la aplicación JavaScript de libro de visitas que utiliza la base de datos IBM Cloudant.

Cree una instancia de Object Storage:

  1. Seleccione Object Storage en el catálogo.
  2. Seleccione IBM Cloud para la infraestructura y Estándar para el plan.
  3. Especifique un nombre de servicio exclusivo para la instancia, por ejemplo, <yourinitials>-guestbook-cos.
  4. Seleccione un grupo de recursos.
  5. Pulse Crear

Cree un grupo configurado para el alojamiento de sitio web estático:

  1. Pulse Crear un grupo.
  2. Pulse Personalizar el grupo.
  3. Especifique un nombre de grupo que sea exclusivo en todas las cuentas de IBM. Pruebe <yourinitials>-guestbook.
  4. Seleccione la resiliencia como Regional.
  5. Seleccione una Ubicación coherente con la instancia de IBM Cloudant.
  6. Mantenga el valor predeterminado de Clase de almacenamiento.
  7. Desplácese hasta el Alojamiento de sitio web estático y pulse Añadir+.
  8. Mantenga las reglas de direccionamiento (individuales) seleccionadas y añada el documento de índice index.html.
  9. Pulse Acceso público en Activado
  10. Pulse Guardar
  11. Desplácese a la parte inferior y pulse Crear grupo

Copie los archivos en el directorio docs de https://github.com/IBM-Cloud/serverless-guestbook/tree/ce en el grupo:

  1. Abra https://github.com/IBM-Cloud/serverless-guestbook/tree/ce en una nueva pestaña.

  2. Descargue un archivo zip pulsando Código y, a continuación, Descargar archivo ZIP.

  3. Descomprima el archivo y vaya hasta el directorio docs del archivo descomprimido.

  4. Edite guestbook.js: sustituya el valor apiurl por el URL de la aplicación de la sección anterior.

    Asegúrese de que el URI no termina en una barra inclinada (/). De lo contrario, la aplicación no funcionará.

  5. Abra la vista de grupo Objetos y arrastre y suelte los archivos guestbook.js e index.html en el grupo de COS.

  6. Vaya a la pestaña Configuración del grupo. En la sección Endpoints localice la sección Static website hosting endpoints. Copie el punto final Público en una pestaña del navegador.

  7. Debería ver la página del libro de visitas.

  8. Añada nuevas entradas al libro de visitas.

Captura de pantalla de libro de visitas
Captura de pantalla de libro de visitas

Eliminación de recursos

Para suprimir el grupo que ha creado y el servicio Object Storage:

  1. Vaya hasta los objetos del grupo de Object Storage
  2. Marque el recuadro de la fila de títulos para seleccionar todos los objetos del grupo
  3. Pulse Suprimir objetos
  4. En la parte superior derecha del menú Acciones de la página del objeto de grupo, seleccione Suprimir grupo
  5. En la parte superior derecha del menú Acciones de la instancia Object Storage seleccione Eliminar instancia

Para suprimir el servicio de IBM Cloudant que ha creado,

  1. Vaya a la lista de recursos
  2. En Bases de datos, haga clic en el menú de acciones situado junto a <yourinitials>-guestbook-db service
  3. Pulse Suprimir

Para suprimir la aplicación y el proyecto Code Engine,

  1. Vaya a la página de destino de Code Engine.
  2. En el panel izquierdo, pulse Proyectos.
  3. En la lista de proyectos, seleccione el proyecto del libro de visitas y, a continuación, pulse Suprimir.

En función del recurso, es posible que no se suprima de inmediato sino que se retenga (durante 7 días de forma predeterminada). Puede reclamar el recurso suprimiéndolo de forma permanente o lo puede restaurar dentro del periodo de retención. Consulte este documento sobre cómo utilizar una reclamación de recurso.

Contenido relacionado