sofiaponteb / ROKS-React-Hands-On

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ROKS-React-Hands-On ☁️

Para el desarrollo de este proyecto se tiene como base el desarrollo de una aplicación basada en la librería React de javascript y su posterior despliegue en un Cluster de OpenShift que se encuentra alojado en IBM Cloud.


Indice

  1. Despliegue en OpenShift desde IBM Cloud shell
  2. Despliegue Aplicación Demo en React
  3. Despliegue Aplicación Feedback App Desde la consola web de OpenShift
  4. Monitoreo de la aplicación
  5. Despliegue de una imagen Docker en un contenedor de Openshift
  6. Referencias

Despliegue en OpenShift desde IBM Cloud shell: 🚀

Haga 'login' a IBM Cloud desde la línea de comando

Inicialmente debe acceder al shell de IBM Cloud desde el siguiente link:

https://cloud.ibm.com/shell

Acceda al cluster de Open Shift (ROKS) desplegado en IBM Cloud 📦

  1. Inicie sesión e ingrese desde la CLI de OpenShift al clúster en el que se va a trabajar. Para ingresar al clúster que tengamos aprovisionado en nuestra cuenta de IBM Cloud se deben realizar los siguientes pasos:

    • Ingresar a la plataforma de IBM cloud con sus credenciales de inicio de sesión, lo puede hacer desde el siguiente link:
    https://cloud.ibm.com/
    

    • Diríjase al resource list. Primero debe dar clic en el navigation menu y luego donde dice Resource list, como se puede ver en la siguiente imagen:

      7


    • Diríjase a la sección de clústers y dé clic en el que se desea acceder.

    • Dé clic en el botón OpenShift web console.


Haga 'login' en el cluster de Open Shift (ROKS) desde la linea de comando 📦

Ahora en la parte superior derecha dé clic sobre el ID del correo con el que ingresamos y luego en la sección que dice Copy Login Command.

1


Y por último vuelva a la terminal que se estaba utilizando, pegue el comando y presione enter.


Cree un nuevo proyecto en OpenShift para desplegar las aplicaciones 📦

  1. Cree un nuevo proyecto en el clúster de la siguiente manera:
oc new-project <projectname>

Nota: Para el projectname coloque roks + las iniciales de su nombre y apellido.

  1. Acceda al proyecto que acabó de crear de la siguiente manera:
oc project <projectname>

Despliegue Aplicación Demo en React ⚛️

  1. Desde el Shell de IBM cloud digite el siguiente comando para crear una aplicación de react:
npx create-react-app react-web-app

  1. Dirigirse a esta carpeta con el comando:
 cd react-web-app

  1. Para desplegar la aplicación en OpenShift es necesario escribir el siguiente comando:
npx nodeshift --deploy.port 3000 --expose

El resultado de este comando va a ser una respuesta de este tipo, que nos indica que la aplicación se desplegó correctamente.




  1. Para poder acceder al la URL de la aplicación y realizar la verificación de la misma ingrese a la consola web de OpenShift, en la vista topology



Y por último solo faltaría dar clic en el link que lo llevará a la aplicación desplegada.


De esta forma se daría por terminado el despliegue de la aplicación react en openshift.


Despliegue Aplicación Feedback App Desde la consola web de OpenShift 📦

Para realizar el despliegue desde la consola web de OpenShift de una manera más intuitiva se deben seguir los siguientes pasos:

  1. Cree un nuevo proyecto con la siguiente sintaxis handson-nombreapellido.

new-project


  1. Ingrese a la sección add y luego debe elegir From Catalog.


  1. Ingrese la URL del repositorio de GitHub que contiene la aplicación a desplegar, si lo desea puede ser la siguiente:

https://github.com/sofiaponteb/feedback-app-openshift

  1. Una vez seleccionada, presione Show Advanced Options y baje hasta Show Advanced Routing Options. En el puerto ingrese el puerto donde se expone la aplicación creada. En el caso de react suele ser el puerto 3000, a menos que haya sido cambiado en el desarrollo de la aplicación.


  1. Al final de esta página encontrará una sección de opciones avanzadas en la cual encontrará un link de Scaling.

Scaling


  1. La sección de Scaling, nos permitirá configurar el número de replicas si deseamos un auto escalamiento para nuestra aplicación.

replicas


  1. Al dar clic en crear se iniciará un proceso de build el cual nos entregará el link de despliegue de nuestra aplicación".


Nota: Espere unos cuantos segundos mientras el proceso de construcción y despliegue de la aplicación se termina.


  1. Una vez terminado el proceso de despliegue puede dirigirse a Routes, donde podrá ver la URL mediante la cual podrá acceder a la aplicación ya desplegada.



Monitoreo de la aplicación

Para realizar un monitoreo de la aplicación desplegada debe seguir los pasos que se indican a continuación:

  1. Dé click en la pestaña del proyecto (parte superior) y allí busque y seleccione el proyecto openshift-monitoring. Este namespace está creado por defecto y contiene herramientas como Prometheus y Grafana que permiten monitorear el clúster. Observe los componentes que aparecen y dé click en la opción Open URL que aparece para Grafana.


  1. Esta acción nos va a redirigir a una nueva ventana de nuestro navegador en la cual debemos seleccionar nuestro método de acceso al cual debemos dar clic en Log in with Openshift.

log in grafana


  1. En esta nueva ventana inicialmente nos aparecerá un mensaje de autorización en cual debemos dar clic en Allow Selected Permissions.

acces


  1. Al completar el paso anterior nos aparecerá el Dashboard inicial de Grafana, la cual es la herramineta de monitoreo que viene integrada con openshift.

grafa


  1. Para poder monitorear nuestra aplicacion debemos dar clic en Home y acá se nos mostrará un menú desplegable en el cual debemos seleccionar lo siguienete:

menu-grafa


  1. El paso final es en el apartado de namespace, buscar nuestro proyecto el cual tenía la syntaxis de handson-nombreapellido.

cpu

De esta manera podemos analizar el consumo que se ha tenido en nuestra aplicación tanto en CPU como en Memoria.


Despliegue de una imagen Docker en un contenedor de Openshift 📦

Para realizar el despliegue de una aplicación que se encuentra alojada en un una imagen de DockerHub se deben realizar los siguientes pasos:

  1. Dé clic en la sección Add y luego en la sección **Container Image.

contai


  1. Al dar clic en Container Image se abre una ventana en la cual debemos seleccionar el campo Image Name y llenar el campo con la ruta fuente de la imagen docker.

librty1


  1. Si reconoce la imagen docker, automaticamente aparece la imagen docker y se llena la información necesaria para el despliegue y se habilita la opción para dar clic en CREAR, y al dar clic acá se inicia el despliegue de la aplicación por lo que se debe esperar un momento mientras se realiza el mismo.

ibm-sphere


  1. Una vez terminado el proceso de despliegue puede dirigirse a Overview dando clic sobre el circulo de despliegue, donde podra ver la URL mediante la cual podra acceder a la aplicacion ya desplegada.

we


  1. al dar clic en la URL podrá acceder a la aplicacion ya desplegada.

image


Referencias


Autores ✒️

Equipo IBM Cloud Tech Sales Colombia.

About