Vista previa de apps

Puede obtener una vista previa de las aplicaciones que se ejecutan en IBM® Cloud Shell igual que si las ejecutara localmente. La vista previa web de Cloud Shell hace que la interfaz de usuario o el punto final de la app estén disponibles en un URL al que solo pueda acceder el usuario. Con esta función, tienes la oportunidad de ver los cambios en tu aplicación antes de desplegarla en un lugar de acceso público.

Antes de empezar

Habilite Vista previa web en la consola de IBM Cloud. Para obtener más información sobre cómo habilitar la vista previa web, consulte Habilitación o inhabilitación de características de Cloud Shell para una cuenta.

Puertos de vista previa web

Puede obtener una vista previa de una aplicación pulsando el icono Vista previa web Vista previa web en la barra de menús de Cloud Shell. La vista previa web está disponible para cualquier app que está a la escucha de solicitudes HTTP en los puertos siguientes:

  • 3000
  • 8080
  • 8081
  • 8082
  • 8083
  • 8084
  • 9080

Al igual que con el sistema local, solo se puede ejecutar una app en cada puerto en cualquier momento. Si tiene varias apps que están a la escucha en el mismo puerto, ocurren conflictos de puerto.

Vista previa de apps en ejecución directamente en Cloud Shell

Cloud Shell incluye numerosos plugins, herramientas y tiempos de ejecución que puede utilizar para trabajar con apps que está desarrollando. Puesto que el almacenamiento de Cloud Shell es temporal, la forma más fácil de trabajar con una app es copiarla o clonarla en el espacio de trabajo de Cloud Shell, realizar los cambios y, a continuación, previsualizarla.

El siguiente flujo de trabajo de ejemplo muestra cómo puedes previsualizar una Node.js Express que está alojada en un GitHub.

  1. En una sesión de Cloud Shell, clone el origen de la app en el directorio de inicio.

    git clone https://github.com/IBM/nodejs-express-app.git

    A continuación, cambie al directorio en el que se ha clonado la app.

    cd nodejs-express-app

    En este punto, puede realizar cualquier cambio en el código de la app, como por ejemplo mediante el editor de texto vim.

  2. Inicie la app en Cloud Shell.

    Para iniciar esta app de ejemplo de Node.js, primero tiene que descargar las dependencias de proyecto.

    npm install

    A continuación, puede iniciar la app de modo que se ejecute en un servidor web en Cloud Shell.

    npm run start

    Una vez que se inicie la app, anote el puerto en el que está a la escucha el servidor web. El puerto debe ser uno de los puertos disponibles para poder previsualizarlo en Cloud Shell. Cuando se inicia esta app de ejemplo, genera la información siguiente, que muestra que está a la escucha en el puerto 3000.

    > nodejsexpressapp@1.0.0 start /home/my-user-name/nodejs-express-app
> node server/server.js

App UI available http://localhost:3000
Swagger UI available http://localhost:3000/swagger/api-docs

  3. En la barra de menús de Cloud Shell, pulse el icono Vista previa web Vista previa web y seleccione el puerto donde escucha el servidor. Para la app de ejemplo de Node.js, seleccione 3000.

    La vista previa web se abre en una ventana de navegador nueva y muestra el equivalente de http://localhost:3000. Debería ver la primera pantalla de la interfaz de usuario de la app.

    Si ve un mensaje que indica que no hay nada que previsualizar en Cloud Shell, el servidor en el que se ejecuta la app no está a la escucha en el puerto seleccionado. Verifique que el servidor está a la escucha en el puerto del que ha obtenido la vista previa y renueve la página de vista previa.

Ahora que estás previsualizando tu aplicación, puedes ver cualquier cambio que hagas reiniciando la aplicación si es necesario y actualizando la página. Confirme los cambios en el repositorio de GitHub o descargue los cambios, porque el almacenamiento del espacio de trabajo es temporal.

Previsualización de aplicaciones que se ejecutan en un pod Kubernetes

También puede utilizar Cloud Shell para previsualizar apps que se ejecutan en Kubernetes, como por ejemplo un panel de control de Prometheus o la app web típica. Dado que las aplicaciones que se ejecutan en un pod en un clúster Kubernetes utilizan un puerto interno, es necesario exponer el puerto del pod. Puede hacerlo creando un servicio o configurando el reenvío de puertos.

Si crea un servicio, tiene que exponerlo públicamente, configurar la autenticación para un acceso seguro y configurar un equilibrador de carga de aplicación (ALB) para el servicio. Para obtener más información, consulte Conectar aplicaciones con servicios.

Si está desarrollando y probando las apps, el reenvío de puertos es una forma más sencilla de poder previsualizar rápidamente apps en el clúster. Requiere mucha menos configuración inicial, pero también hay que reconfigurarlo cada vez que se reinicia el pod. Los siguientes pasos le guían a través del proceso de configuración del reenvío de puertos y de vista previa de una app que se ejecuta en un clúster de IBM Cloud Kubernetes Service.

  1. En una sesión de Cloud Shell, establezca el clúster en el que se ejecuta la app como contexto. Con esta configuración puede utilizar comandos kubectl para trabajar con su clúster. Para obtener más información, consulte Instalación de la CLI.

  2. Busque el nombre del pod en el que se ejecuta la app.

    kubectl get pods

    El nombre de pod aparece en una lista bajo la columna NAME; por ejemplo my-pod-123abc.

    NAME            READY   STATUS    RESTARTS   AGE
my-pod-123abc   1/1     Running   0          9d

  3. Busque el puerto en el pod que desea mostrar ejecutando el comando kubectl describe en el pod.

    kubectl describe pod my-pod-123abc

    En la sección Containers, el puerto local aparece en la lista como valor de Port, como 6000 en el ejemplo siguiente.

    Containers:
  cluster-agent:
  Container ID:   containerd://1234abcd5678efab90cde603e4ba6986fdaf26daae94c4f309
  Image:          us.icr.io/my-registry/my-image:0.5.0-dev.0.1234
  Image ID:       us.icr.io/my-registry/my-image@sha256:abc123def456abc789def012
  Port:           6000/TCP
  Host Port:      0/TCP

  4. Configura el reenvío de puertos ejecutando el comando kubectl port-forward. Seleccione uno de los puertos disponibles para la vista previa web en Cloud Shell.

    Por ejemplo, el mandato siguiente está a la escucha en el puerto 8080 localmente y lo reenvía al puerto 6000 dentro del pod.

    kubectl port-forward pod/my-pod-123abc 8080:6000

    Ahora que el reenvío de puertos está configurado, puede obtener una vista previa de la app.

  5. En la barra de menús de Cloud Shell, pulse el icono Vista previa web Vista previa web y seleccione el puerto que se reenviará a su pod.

    La vista previa web se abre en una ventana de navegador nueva. Puedes ver la primera pantalla de la interfaz de usuario de tu aplicación.

    Si ves un mensaje que dice que no hay nada que previsualizar en Cloud Shell, el servidor donde se ejecuta tu app no está escuchando en el puerto seleccionado. Verifique que el servidor está a la escucha en el puerto interno del pod y que está reenviando el puerto que está previsualizando en el puerto interno correcto.

Vista previa de otros puntos finales en un puerto

Después de abrir la vista previa web, puede ver cualquier otro punto final en el que esté a la escucha el servidor en el mismo puerto. La vista previa web se abre en un URL que es el equivalente a http://localhost:<port>. Para ver otro punto final, añada la vía de acceso al URL de vista previa web.

Por ejemplo, la app de ejemplo de Node.js genera los URL siguientes:

App UI available http://localhost:3000
Swagger UI available http://localhost:3000/swagger/api-docs

Para ver la interfaz de usuario de Swagger, añada /swagger/api-docs en el URL de vista previa web:

https://p3000-abcd1234-ef56-a1b2-b122-a122560ba24f.dp3.us-south.shell.cloud.ibm.com/swagger/api-docs