Lo que viene en esta serie de publicaciones:
- 1: - ;
- 2: S2I HTTP-, NGINX, OpenShift -;
- 3: OpenShift .
Primero que nada, necesitamos OpenShift instalado. Usaremos minishift, que le permite ejecutar OpenShift en una máquina virtual en computadoras con Windows, Mac o Linux. Para poner sus manos en minishift, descargue el kit de desarrollo de contenedores de Red Hat (CDK) y siga estas instrucciones para instalarlo y ejecutarlo. Más información se puede encontrar en el CDK documentación y en la documentación sobre la OKD.io sitio .
Una vez que se lanza minishift, debe iniciar sesión y configurar el proyecto, que se realiza con solo dos comandos:
$ oc login
$ oc new-project web-apps
Esto supone que ya tiene Node.js 8+ y npm 5.2+ instalados.
Si abrió este artículo solo para averiguar cuáles son estos dos comandos mágicos, pase a la parte final. De lo contrario, ¡avance más en el texto!
¿Qué es una aplicación web moderna?
En primer lugar, debemos decidir qué queremos decir con "aplicación web moderna" y en qué se diferencia de la llamada aplicación "pura" de Node.js.
Para nosotros, una aplicación web moderna es algo como React, Angular o Ember, con un paso de compilación que genera HTML, JavaScript y CSS estáticos. Durante la fase de construcción, generalmente se realizan varias tareas, como la concatenación, la transpilación (Babel o TypeScript) y la minificación de archivos. Cada uno de los marcos principales tiene su propio proceso de construcción y canalización, pero herramientas como Webpack, Grunt y Gulp también entran en esta categoría. Y todas estas herramientas usan Node.js para ejecutar procesos de compilación.
Sin embargo, el contenido estático generado (compilado) en esta etapa no necesita necesariamente un proceso de nodo para servirlo. Sí, puede usar algo como el módulo de servicio aquí , que es excelente para el desarrollo, ya que le permite ver rápidamente cómo se ve el sitio. Pero para las implementaciones de producción, generalmente se recomienda usar algo como NGINX o Apache HTTP Server.
Por otro lado, una aplicación de nodo "pura" usará el proceso Node.js para comenzar y puede ser algo así como una aplicación Express.js (es decir, un servidor API REST); por lo general, no tiene un paso de compilación (sí sí, conocemos Typecript). Las dependencias de desarrollo no suelen estar instaladas, ya que solo necesitamos las que se utilizan para ejecutar la aplicación.
Puede leer sobre cómo implementar una aplicación de nodo "pura" en OpenShift usando nuestra imagen Node.js S2I, por ejemplo, aquí .
Implementar una aplicación web en OpenShift
Ahora que hemos descrito la diferencia entre una aplicación web moderna y una aplicación Node.js, vamos a mostrarle cómo implementar nuestra aplicación web en OpenShift.
Aquí implementaremos tanto una aplicación React como una aplicación Angular moderna. Ambos proyectos se pueden crear con bastante rapidez utilizando las herramientas CLI adecuadas: create-react-app yangular/ cli. Este será uno de los dos comandos que aparecen en el título de este artículo.
Reaccionar aplicación
Si create-react-app ya está instalado globalmente, genial. Si no es así, simplemente ejecute el comando apropiado con npx, así:
$ npx create-react-app react-web-app
Nota: npx es un corredor de comandos único que se incluye con npm 5.2+, consulte aquí para obtener más detalles .
Este comando creará una nueva aplicación React, y debería ver algo como esto en la pantalla:
Suponiendo que se encuentra en el directorio del proyecto recién creado, puede ejecutar el segundo comando para implementar nuestra aplicación en OpenShift:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
Ahora, la consola de OpenShift se verá así:
Y esta es la consola web después de iniciar la aplicación:
Antes de pasar a la aplicación Angular, echemos un vistazo a lo que hace nuestro último comando.
Comienza con npx nodeshift: aquí ejecutamos el módulo nodeshift utilizando npx , lo que facilita la implementación de aplicaciones de nodo en OpenShift.
Ahora analicemos las opciones que se pasan a nodeshift. El primero es --strictSSL = false.
Dado que tenemos un minishift y usa un certificado autofirmado, necesitamos decirle a nodeshift esto para que no haya errores de seguridad (de hecho, le decimos esto a la biblioteca de solicitudes oculta bajo el capó).
Luego viene la opción larga --dockerImage = nodeshift / ubi8-s2i-web-app --imageTag = 10.x. Ella le dice a nodeshift que use la nueva imagen de Web App Builder con una etiqueta 10.x.
Ahora le decimos a la imagen S2I que queremos usar hilo: --build.env YARN_ENABLED = true. Finalmente, el indicador --expose le dice a nodeshift que cree una ruta OpenShift para nosotros para que podamos obtener una URL accesible desde la web a nuestra aplicación.
Como este es un artículo de la serie OpenShift Fast Track, la imagen S2I aquí usa el módulo de servicio para entregar los archivos estáticos generados. En la próxima publicación, mostraremos cómo usar esta misma imagen S2I con NGINX.
Aplicación angular
Ahora creemos una aplicación Angular. El primer paso es crear nuestra nueva aplicación usando la CLI de Angular. Nuevamente, si no lo tiene instalado globalmente, puede iniciarlo con npx:
$ npx @angular/cli new angular-web-app
Este comando creará un nuevo proyecto Angular, y nosotros, como es el caso con la aplicación React, simplemente ejecutamos otro comando para implementarlo:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
Al igual que en el caso de React, la consola web OpenShift se verá así:
Y esta, respectivamente, es la consola web cuando inicia la aplicación:
Ahora echemos un vistazo al comando de implementación. Es muy similar a React, pero existen diferencias importantes.
Las diferencias radican en el indicador build.env: para Angular escribimos --build.env OUTPUT_DIR = dist / angular-web-app, y aquí hay dos puntos.
Primero, eliminamos la variable YARN_ENABLED ya que no estamos usando hilo para nuestro proyecto Angular.
En segundo lugar, agregamos la variable OUTPUT_DIR = dist / angular-web-app. Por lo tanto, la imagen S2I buscará por defecto su código compilado en el directorio de compilación. React usa build de forma predeterminada, por lo que no configuramos este parámetro en el ejemplo anterior. Pero Angular usa otras cosas para su salida compilada. Por lo tanto, escribimos que el parámetro ist / <PROJECT_NAME> en nuestro caso es igual a dist / angular-web-app.
Conclusión
Para aquellos que se saltaron el análisis de los ejemplos anteriores y vinieron aquí desde el principio del artículo, mostramos los dos comandos con los que se realiza la implementación:
React:
$ npx create-react-app react-web-app
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
Angular:
$ npx @angular/cli new angular-web-app
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
Recursos adicionales
Hoy vio cómo implementar rápida y sin esfuerzo una aplicación web moderna en OpenShift utilizando la nueva imagen de S2I Web App Builder. Nuestros ejemplos utilizan la versión comunitaria de esta imagen, pero Red Hat ya ha lanzado Red Hat Openshift Application Runtime (RHOAR) , así que tenga cuidado.
En la próxima publicación, le mostraremos cómo usar una nueva imagen S2I junto con una imagen de servidor HTTP existente como NGINX, usando la cadena de compilación OpenShift para organizar las implementaciones de producción.
La tercera parte de esta serie se centrará en cómo organizar un flujo de trabajo de desarrollo para una aplicación en la plataforma OpenShift.
También recomendamos descargar y revisar el libro electrónico gratuito Implementación en OpenShift .