Desplegando un sitio de reseñas de restaurantes desacoplado en producción con Strapi y Platform.sh

♪♪ Hola, soy Chad Carlson de PlatformSH. Entonces, ¿quién aquí ha oído hablar de PlatformSH antes? Si lo has hecho, déjame un mensaje. Si no, no importa. Tomaré el silencio como que nadie ha oído esto antes. Escuchado, pero no utilizado. De acuerdo. Genial. ¿Qué tal Strapi? ¿Alguien ya tiene cierta familiaridad con Strapi? Haremos un poco de descripción general cuando lleguemos a esa sección. Sí. Escuchado, pero no utilizado. No me sorprende. De acuerdo. Muy bien. Creado una muestra. Genial. De acuerdo. Tal vez lo mejor aquí sea comenzar con, para aquellos de ustedes que han oído hablar de Strapi o no están familiarizados con, lo que vamos a usar para nuestra demostración hoy se basa en la aplicación de demostración oficial que proporciona Strapi, llamada FoodAdvisor. Y lo que contiene esta aplicación es una aplicación de Strapi dentro de este subdirectorio API y una aplicación de Next.js dentro de cliente. Y dentro de API, vamos a tener algunos comandos allí. Vas a generar algunos datos de muestra inicialmente en una base de datos SQLite. Y eso va a configurar nuestro backend. Y va a contener restaurantes, autores, algunas publicaciones de blog y categorías y etiquetas que van junto con esas colecciones. Y luego en la aplicación de front-end, es solo una aplicación simple de Next.js que está configurada para consumir todos esos datos de la API de Strapi y presenta un front-end que se ve más o menos como esta captura de pantalla. Y llegaremos a eso al final.

Entonces, lo que me gustaría comenzar es ir adelante y vamos a intentar ampliar esto un poco. Ve al terminal desde donde vas a trabajar. Y cuando interactuamos con la CLI de la plataforma, todo va a tener este prefijo de plataforma aquí. Y vamos a hacer inicialmente el inicio de sesión. Y todo lo que hará es generar una clave SSH temporal para que la CLI la use basada en un token temporal en tu cuenta. Y así... Oh, ya me adelanté. Lo siento, chicos. Una vez que hayas instalado la CLI, haz clic en este enlace aquí. Esto te llevará a la página para registrar una cuenta para el taller. Y te llevará a una pantalla para crear un nuevo proyecto. No te preocupes por hacer eso ahora mismo. Lo haremos a través de la CLI aquí. Pero una vez que hayas creado esa cuenta, puedes iniciar sesión en el correo electrónico que has utilizado y autorizar a la CLI a usar tu cuenta. Y veremos que ahora estoy conectado. Aquí está mi correo electrónico si quieres ponerte en contacto conmigo. De acuerdo. Y ahora vamos a obtener este repositorio de demostración. Oops. Hay un archivo de volcado de migración SQL aquí por lo que podría llevar un segundo. Y debería ser un directorio llamado node congress. Entonces aquí está, como describí antes en la aplicación de demostración original de FoodAdvisor, un subdirectorio API y cliente. Todas las instrucciones si quieres seguir con el repositorio están en este subdirectorio doc bajo instrucciones. Así que voy a usar la CLI aquí para crear un proyecto. Y cuando lo haga, puedo decir no congress. Le daré una región.

Solo elige algo que esté cerca de ti o sigue adelante y la mayoría de estos serán por defecto en tu lado, pero vamos a elegir un proyecto de desarrollo, por defecto para entornos, almacenamiento y una rama principal predeterminada. Y luego te preguntará, ¿quiero hacer que ese proyecto sea remoto para el repositorio con el que estamos trabajando? Adelante y hazlo sí y luego lo confirmaremos y luego Platform Stage comenzará a construir ese proyecto para ti.

Bienvenido al chat. Hola Abandeep. No, en este momento, solo tenemos la prueba gratuita de 30 días. Estamos en una fase de desarrollo tratando de obtener un nivel gratuito para nuestra plataforma, pero por ahora es la prueba gratuita. Pero si me contactas y quieres seguir probándolo, ya sea en el canal de Slack o en mi correo electrónico, que puedo adjuntar aquí, no es difícil para nosotros extender la prueba para que sigas probándolo. Así que tenemos una URL aquí para lo que llamamos la Consola de Gestión. Así que puedo abrir una nueva pestaña y escribirla en la barra y nos llevará al proyecto individual. Y todo esto va a ser nuestra área de implementación para el repositorio. No importa si integramos un repositorio en GitHub, o si empujamos algo localmente, como vamos a hacer en este taller, el proyecto es equivalente a nuestro repositorio y a su alrededor, va a detectar algunos archivos de configuración para aprovisionar automáticamente la infraestructura en función de lo que comprometamos y para manejar parte de la herencia que hará que la plataforma haga lo que hace. Esto incluye permisos de acceso, variables de entorno, y esa misma infraestructura y los data dentro de ella en todos los entornos que corresponderán aproximadamente a cada rama de nuestro repositorio. Así que veremos aquí, tengo un entorno principal que está inactivo porque no he empujado nada a él para mi rama principal, porque es la única rama que tengo en este repositorio. Ahora que tenemos eso configurado, echemos un vistazo al repositorio que acabamos de clonar.

Muy bien, como mostré antes, tenemos un subdirectorio API y un subdirectorio cliente. Solo quiero asegurarme de que lo haya cubierto aquí. Entonces, lo primero que haremos es comenzar con Strapi. Queremos asegurarnos de tener nuestra fuente de datos configurada antes de hacer cualquier otra cosa. Y así, como dije, eso está dentro del subdirectorio API aquí para aquellos de ustedes que no están familiarizados con Strapi. Tiene un subdirectorio de configuración, para v4 en adelante, que en su mayoría nos preocuparemos por cómo está configurado este archivo database.js. Que en este caso dice que todos nuestros data vendrán de la base de datos SQLite en el directorio dot temp, que aún no hemos creado. Y luego habrá un directorio de origen que será donde se definen los componentes. Así que cuando hablé anteriormente de que estamos haciendo efectivamente una aplicación de reseñas de restaurantes que vamos a implementar. Entonces habrá tipos de contenido como restaurantes o publicaciones de blog o categorías o reseñas. Y así, dentro de nuestros componentes, tenemos restaurantes. Lo siento, tenemos una página de blog, un artículo que define un tipo de contenido individual para una de esas entidades que describí, tenemos categorías, tenemos algunas páginas globales, tenemos ubicaciones, restaurantes y una página principal de restaurante y reseña. Entonces este repositorio ya tiene todas esas colecciones definidas de antemano. Lo que vamos a hacer es sembrar esa base de datos temporal, esa base de datos SQLite. Así que voy a ir al subdirectorio API. Shadrack, ¿hay algo más que quisieras decir sobre la estructura de Strapi mientras continúo haciendo esto?

Sí, claro, seguro. Eso es cuando compartir mi pantalla o, creo, está bien, necesitas hacer esto. Entonces, la forma en que está estructurado Strapi es que Strapi es en realidad... Espera, déjame sacar esto aquí. Antes de que Shadrack comience. Lo que voy a hacer es instalar las dependencias, ejecutar el comando Scene y ejecutar esta API localmente. Para aquellos de ustedes que están en OS 10, revisen el repositorio, porque hay este problema que sé que a veces me encuentro en mi computadora. Si copias este comando, notarás que se detendrá. Y luego solo necesitarás exportar esta variable de entorno y luego todo debería estar bien para instalar las dependencias allí. Lo siento, Shadrack. De acuerdo, sí, gracias. Entonces, Strapi es básicamente como cualquier CMS que puedas imaginar, pero esta vez se ejecuta en node. La forma en que está construido, está construido para funcionar como el backend. Tiene menos CMS básicamente para funcionar como un backend para cualquier frontend con el que necesites conectarlo. Y Strapi tiene la capacidad de funcionar también de forma independiente. Entonces, si necesitas un CMS independiente, solo un CMS, Strapi también tiene la capacidad de hacerlo. Entonces, si revisas la carpeta API, revisa la carpeta API, verás que está construido, está separado en función de, las carpetas están básicamente nombradas en función del trabajo que están haciendo, pero la parte más importante de estas carpetas en particular es la carpeta de origen y la carpeta de configuración. Y bueno, digamos la carpeta database, pero eso es cuando ejecutas la migración de la database. Entonces la carpeta de origen y la carpeta de configuración. Ahora, la carpeta de configuración puede consistir en cualquier tipo de configuración que desees específicamente en tu aplicación de Strapi. Entonces, cómo debería verse tu administrador, qué tokens de API necesitas, ahí es donde debería estar.

Luego la API, por lo que la API es básicamente la forma en que se ve Strapi 4. Antes de Strapi 4, la API, había un archivo de API en particular llamado api.js en la carpeta de construcción donde no estaba antes, básicamente en Strapi 4 donde intentan hacer una separación de responsabilidades para que tu administrador, tu archivo database o tu archivo de administrador no se atasquen. Así que todo esto, si has usado Strapi 3 antes, verías que todos estos archivos en particular se ven nuevos, pero en realidad son parte de los archivos server.js y admin.js de Strapi. Lo que Strapi hizo con la versión 4 es separar todas estas funciones en varios archivos para que si necesitas hacer algún cambio o cualquier otro, puedas cambiarlo fácilmente. Básicamente, separación de responsabilidades. Lo siguiente es crontax. Entonces, si necesitas un cron, si necesitas un cron básicamente para tal vez actualizar tus artículos, en un momento específico del día, publicar un artículo en un momento específico del día. Para eso sirve tu archivo crontax. Y si lo miras, ya está definido aquí para hacer una publicación en un momento específico del día. Luego, database.js es tu mejor amigo en general. Como, sé que todos usan un CMS porque necesitan un sistema de gestión de contenido, ¿verdad? Necesitas algo donde puedas almacenar tu contenido. Entonces, el archivo database.js consta de la configuración para tu database. La configuración para SQLite es diferente de la forma en que lo harías con Postgres y la forma en que lo harías con MongoDB. Strapi 4 aún no tiene soporte para MongoDB, pero aún puedes usar SQLite, MySQL y Postgres en Strapi. Entonces, lo que se hace aquí básicamente es intentar conectarse a tu database, ejecutando la database. Platform.msg proporciona servicios como, básicamente, database como servicio. Platform.msg proporciona database como servicios, por lo que para conectarte a esa database, básicamente, puedes modificar este archivo en particular aquí. Pero como aún no hemos enviado a platform.msg, este archivo en particular aquí, básicamente se conecta a tu database SQLite local, pero a medida que avanzamos en la masterclass, verás dónde crearemos una relación de base de datos, una relación de database, y veremos cómo la conectamos con Strapi. Eso es para lo que sirve el archivo database.js.

Luego, el middleware es básicamente, si necesitas un middleware adicional, luego los plugins. Entonces, el archivo de plugins generalmente es para, Strapi tiene soporte para instalar varios plugins. Entonces, cuando instalas un plugin, si quieres crear tu propio plugin, tu plugin personalizado, puedes hacerlo, la forma en que Strapi está construido es que puedes instalar plugins desde el panel de administración, pero también puedes construir tus propios plugins personales.

Sí, entonces si tienes requisitos especiales adicionales, cualquier actualización especial que necesites hacer, que necesitas crear por ti mismo, el archivo plugins.js es básicamente donde probablemente quieras hacer eso. Ahora, como cualquier nuevo archivo JS, el archivo server.js es la parte más importante de él porque necesitamos ejecutar un nuevo servidor JS. Cuando inicias un server.js, básicamente se conecta, crea un puerto 1337 para que nuestros hosts escuchen. Y eso es básicamente solo un servidor simple que tiene el host y un puerto en general. Eso es exactamente para lo que sirve el archivo de configuración, que es una de las partes más importantes del archivo.

Luego, la carpeta de origen, que es donde ocurre gran parte de la magia, toda tu magia desde la interfaz de usuario, etc., para el panel de administración, las extensiones que necesita tu panel de administración, así que si arrancas una aplicación Strapi normal, ¿sí? Si arrancas, ya sabes, gran parte del contenido que ves aquí en realidad no estaría porque está vacío, pero como ya tenemos una aplicación construida, verás que está realmente, realmente separado en varios archivos, admin, API, componentes, extensiones, y tus índices, que es tu punto de entrada. Es realmente, realmente más fácil. Entonces, Strapi ahora acaba de iniciar el servidor Strapi, así que si revisas el repositorio, hay una instrucción allí sobre cómo llegar a este punto en particular. Entonces, simplemente puedes ejecutar yarn stage, ejecutar yarn develop en tu, en la API, dentro de la carpeta API, luego tus cuentas de administrador, crea las siguientes credenciales con node, workshop, luego el correo electrónico, como admin@example.com, luego la contraseña que puedes usar la que se muestra allí. Y después de eso, me gustaría que vayas a este enlace en particular, los artículos, la API / artículos. ¿Puedes ir allí, Chad?

Sí, claro. Lo único que iba a agregar es que ejecuté el comando yarn seed, y lo que hizo fue inicializar esta base de datos SQLite, y me dio todas nuestras imágenes para nuestra aplicación de reseñas de restaurantes en esta carpeta de subidas públicas. Sí. En cuanto a estas credenciales, solo para que lo sepas, puedes cambiarlas más tarde. Probablemente deberías usar estas. No es gran cosa si no lo haces, pero más adelante en la demostración, estas serán las credenciales que tendrás que usar, y puedes actualizarlas. Así que las mantuve consistentes aquí. Así que no tendrías que recordar un par de contraseñas diferentes. Como dije, podemos cambiarlas más tarde. Inicié sesión con, creé un usuario administrador con esas credenciales, y eso me dio el panel de administración, y verás que esta tiene la misma estructura reflejada que estaba en el subdirectorio de la API de origen aquí, y nuestro comando seed ha inicializado todos estos datos iniciales para acompañar a todos estos diferentes tipos de colecciones, incluidas las imágenes que formaban parte de esa inicialización. Y lo que Shadrach me está pidiendo que haga es, Strapi proporciona este panel de administración esencialmente sobre la base de datos para usar, que en este momento es SQLite. Pero lo cambiaremos a un servicio diferente, y todo el punto aquí es que vamos a comenzar a servir una API sobre esto. Entonces verás en las instrucciones, tengo esto aquí. Así que este es nuestro servidor local en el puerto 1337. Así que aquí está el panel de administración, pero en lugar de eso, simplemente voy a ir directamente a la colección de artículos, y veremos cuatro de esos datos iniciales allí. Lo siento, adelante Shadrach. ¿Quieres ir? ¿Quieres que siga? Oh, sí, sí, claro. Entonces, esto básicamente, esto como seguramente estás viendo aquí es lo que obtuvimos al ver los datos particulares si navegas a cinpu.cda.db. Entonces, el archivo .db de datos es básicamente lo que nos ha dado estos artículos en particular. Entonces, lo que vamos a hacer esencialmente, lo que es todo el concepto de esta charla es este taller es vamos a tomar estos datos, estos artículos de datos en particular que estamos viendo aquí, las imágenes, los archivos, y los vamos a desplegar, luego servirlos en un frontend. Esa es básicamente toda la idea detrás de esta charla. Entonces vamos a agregar el frontend en esta charla y conectarlo a Strapi y ver estos datos en particular mostrados de una forma muy, muy... Esta forma muy, muy interactiva, luego vamos a tomar toda la aplicación y desplegarla en Platform S.H. como una aplicación desacoplada. Ese es básicamente el objetivo de esta charla en este taller en lugar de hacer charlas. Muy bien, así que vamos a entrar un poco en Platform. Tenemos un servidor local. Genial, ahora solo necesitamos desplegar esto. Ya hemos... Asegurémonos de que todo se vea bien aquí. Perfecto. Entonces, cada aplicación tendrá al menos tres archivos de configuración en la plataforma que están asociados con tres tipos de contenedores diferentes. Entonces, el primero será, ¿cómo queremos dirigir el tráfico a nuestra aplicación? En este caso, quiero que todo el tráfico vaya directamente a un contenedor de aplicación, que en este caso, nombraremos en un segundo, strapi para este backend, en este dominio de marcador de posición. Entonces, lo interesante de este marcador de posición es que cuando, en un momento, creamos una rama, obtendremos un entorno de desarrollo que acompaña a esa rama, y una URL se generará y se sustituirá por este marcador de posición predeterminado. Entonces, eso es lo que significa ese predeterminado allí. También obtendremos un ID. Veremos en un momento dónde se vuelve útil, pero básicamente asociando esta ruta con un ID.

Sí, ¿debería hacerlo? Sí, sí. Solo necesitaba señalar el upstream, el nombre de los tipos de tu upstream debe coincidir con el título de tu aplicación en el archivo .platform.yaml. Entonces, cualquier nombre que le estés dando, aquí en la API, cualquier nombre que le estés dando al upstream aquí, debe coincidir con el nombre que le darás en tu archivo de configuración de la plataforma. Así que debes tener eso en cuenta porque he visto a mucha gente, incluso a mí mismo, al principio usando plataformas por primera vez y obteniendo errores porque omitimos esa información en particular. Así que debes tener eso en cuenta a partir de ahora. Lo veremos aquí. Así que solo recuerda esta etiqueta aquí para strappy. Luego también tenemos una de las definiciones raíz, que es una redirección desde el subdominio www. Y todo esto junto terminará en una URL generada en este subdominio API en nuestro entorno. El siguiente archivo de configuración es el archivo de demostración de la aplicación en la plataforma que Shedrack acaba de describir. En este caso, voy a tener un contenedor de aplicación que se llama strappy para que el tráfico de nuestro contenedor de enrutador vaya a la aplicación. Contendrá Node.js 12. Como dije antes, esta es una versión principal. Entre implementaciones, no tienes que definir versiones menores y de parche del lenguaje de tiempo de ejecución del contenedor de la aplicación. Nosotros los implementaremos a medida que se publiquen. Tenemos, hay etapas de un contenedor de aplicación. Estamos todos familiarizados con esto. Entonces aquí, lo que he definido es, voy a anular parte del comportamiento predeterminado de un contenedor de Node.js, que en este caso es NPM. Y a partir de eso, voy a definir lo que se llama un gancho de construcción. Y en ese gancho de construcción, voy a decir, instala mis dependencias usando yarn, que he instalado al principio. Y voy a construir la aplicación. Luego puedo definir un comando de inicio. En este caso, no tenemos pasos de implementación, que estarían en un gancho de implementación. Lo veremos en un momento, pero vamos a tener un comando de inicio. En este caso, voy a pasar la variable de entorno de producción y voy a iniciar la aplicación. Las únicas otras cosas relevantes que podrían valer la pena mirar aquí es que la plataforma trata de proporcionar un poco de garantía cuando implementas aplicaciones. Entonces, cuando dije que tu proyecto es efectivamente un repositorio, eso significa que toda la lógica que se aplica a la infraestructura y las compilaciones individuales está vinculada a los hashes de confirmación, a los slugs que tienes asociados con una confirmación individual. Entonces, lo que se construye sobre eso es una regla. Si estás en el gancho de construcción, puedes escribir en el sistema de archivos, pero tan pronto como el gancho de construcción haya terminado, todo es de solo lectura en ese momento. Y cuando lo hacemos de esa manera, vamos a poder hacer cosas interesantes, es decir, podemos asociar toda nuestra configuración para nuestra infraestructura y todo el código en nuestro repositorio a un solo ID de confirmación. Y luego podemos reutilizar ese slug que se crea a partir del hash de confirmación, y podemos mover esa compilación donde queramos. En este caso, cuando creamos una rama, obtendremos una implementación exactamente igual a la que tenemos en producción. Cuando hacemos una fusión, podremos llevar lo que teníamos en el entorno de desarrollo y efectivamente moverlo a producción sin el temor de arruinar nuestro sitio de producción. Entonces, debido a eso, es posible que realmente necesites escribir en el sistema de archivos en tiempo de ejecución. Si es así, está definido en estos montajes aquí. Así que acabamos de mostrar en la situación local que tenemos este archivo o directorio .tmp donde está la base de datos. Entonces podemos definir un montaje aquí que nos permita seguir escribiendo en esa base de datos en tiempo de ejecución. Si no está definido explícitamente en tu montaje, no tendrá acceso de escritura. Y eso es una especie de garantía que te brinda compilaciones repetibles y una gran cantidad de seguridad cuando implementas esta cosa. Lo mismo ocurre con las cargas que tienen nuestras imágenes porque en tiempo de ejecución podemos agregar más imágenes cuando creamos nuevos artículos, por ejemplo. Entonces, creo que eso es un resumen decente de nuestra configuración. Vamos a detener el servidor local y vamos a confirmar los cambios. En este caso, deberías tener un remoto definido como plataforma. Creo que tengo todos los comandos dentro de las instrucciones enumerados como plataforma. Así que voy a confirmar los cambios. Supongo que no hice ningún cambio mientras pasaba por esto. Muy bien, luego vamos a hacer push a platform main. Y luego vamos a hacer push de esto al proyecto. Así que hazlo tú mismo.

Esto tomará solo un minuto. Y eso ocurrirá mientras construimos esta aplicación por primera vez en el backend, tomará un momento. Así que adelante y hazlo tú mismo en tu entorno local hasta que todos podamos alcanzar el mismo punto. Veremos que ese entorno se está inicializando desde ese commit en este momento. Y basado en nuestro archivo de configuración, veremos la actividad del push, todos los commits que tengo en el repositorio, el nombre de la aplicación, el runtime que estoy usando, y luego el final del hash que se utiliza para identificar esta compilación específica. Y en este caso, la construcción será una combinación de código de la aplicación, todo lo que tenemos en esos archivos de configuración de la plataforma, como el archivo app.yaml, rutas y servicios, todo agrupado en un solo hash. Veremos dónde ramificamos para poder reutilizar este hash y ahorrar algo de tiempo en las construcciones.

En este momento estamos haciendo la misma instalación localmente y estamos haciendo la compilación. Veo que desde que comenzamos, hemos ganado un par de personas nuevas. Así que hola, bienvenidos. Soy Chad Carlson de PlatformersH, con Chedra Kakintayo. Si adelante- Hola, amigo. Oye, si vas y revisas el chat en Zoom o preferiblemente dentro del foro, tendrás un enlace al repositorio con el que estamos trabajando, que es platformersh-workshops.com/Node Congress, y luego algunos pasos iniciales, y luego puedes llegar a esta misma página, la página de instrucciones en la que estamos trabajando aquí. Algunas de estas implementaciones tomarán un poco de tiempo, así que estoy seguro de que pueden alcanzar si llegan un poco tarde.

De acuerdo. No estoy seguro de dónde sucedió eso. De acuerdo. Um, Si estás empezando a juntar tus pensamientos negativos, o cosas en las que estás atascado en el pasado, queremos ayudarte a volver al lugar correcto. Bien, primer despliegue. Así que aquí tenemos la actividad final para el commit de nuestro entorno principal, la URL generada, y en realidad veremos una imagen de cómo se ve nuestro clúster en este momento. Una cosa que no describí inicialmente fue que hay un tercer archivo de configuración llamado services.yml. Aquí es donde vamos a definir nuestra base de datos MySQL. Pero en este momento no tenemos nada, así que no lo vemos en el clúster. Solo vemos una aplicación nodejs para Strapi. Y tenemos el contenedor de enrutador dentro de nuestro clúster. Vamos a nuestra URL generada. El handshake de TLS no se completó allí. Vemos que tenemos nuestra aplicación Strapi desplegada que teníamos localmente. Voy a ir a la administración, veremos la misma hoja de inicio de sesión que teníamos antes. Antes de hacer eso, queremos migrar algunos de esos datos que generamos antes, que tenemos localmente. Podemos hacer eso tomando esos directorios que hemos definido como tener acceso de escritura en este momento, esos montajes, y subiendo los documentos que hemos generado localmente. En este caso, voy a... Hagamos esto primero. Voy a subir mi API local, y voy a subir todo lo que está dentro de .tmp, que es esa base de datos SQLite, al upstream de Mount. Continúa. Y luego haré lo mismo para las fotos. Y veremos que todos se están subiendo. Así que vamos a actualizar esto y crear nuestro usuario nuevamente. Ahí está en caso de que no lo tuvieras delante de ti nuevamente. De acuerdo. De acuerdo. De acuerdo. De acuerdo. De acuerdo. Debbie, ¿tienes el mismo error en tu lado? Te lo diré. El problema es en un segundo, solo tengo que rastrearlo. Escucha cuál es el error. ¿Qué pasa con esta cosa, cuál es el error? Sí, lo vi antes, pero pensé que lo arreglé en mi.

Entendido el inicio. Entendido el final. ¿Qué pusiste en el entorno? No necesitamos tanto. No creo que necesites vincularlos aún. Todavía me quedé atascado en eso, por eso lo puse allí. No, no es... Creo que es solo de estos. Terminado.

¿Es solo recargar. Wow, Chad todavía está trabajando en esto. ¿Alguien tiene alguna pregunta que le gustaría responder? Puedes simplemente, ya sabes, dejarlo en el chat de Zoom o en Discord, realmente en cualquier lugar que quieras. ¿Y alguien está atascado en algún lugar? Bien hecho, Chad. Probablemente todos estén atascados en el mismo paso aquí. Voy a averiguar cuál es el problema en esta configuración. Genial. Se está implementando correctamente. Sí. Esto es realmente molesto. Claro. Hasta que te escuche hacer esto en tu señal. Entonces revisa la consola nuevamente, revisa los registros. Revisa las cargas nuevamente. Esto podría ser solo un error de copia. ¿Hiciste, como, cuando estábamos trabajando en esto, encontraste esta información particular para mí, mm flecha? Solo una vez más. Bien, voy a intentar ver esos problemas en solo un segundo. de todos modos, alguien tiene alguna pregunta.

Muy bien. Solo estoy haciendo esto para verificar si esto puede solucionar este paso inicial en todos sus lados, pero si esto no soluciona el problema de SQL lite, simplemente seguiré adelante porque ese no es el propósito de esta demostración de todos modos, esto solo se suponía Vamos a tomar lo que teníamos inicialmente localmente y ponerlo en nuestro entorno de producción, pero lo vamos a reemplazar con un servicio de producción real aquí. Y asegurémonos de que si arreglar al tipo similar que configuró no soluciona el problema, simplemente seguiremos adelante. Oh, no lo voy a hacer. Vamos a seguir adelante. De acuerdo. Entonces, lo que no vemos aquí es que SQLite database en producción, pero está bien. Pero está bien. Oh, mi cámara todavía está apagada. Porque lo que Platform es realmente útil es para usar servicios de producción. Entonces, eso es lo que vamos a agregar ahora, y vamos a prescindir de las cosas de SQLite. Entonces, en el siguiente paso, ups, siguiente paso aquí, vamos a crear un nuevo entorno. Y lo que hará es copiar este comando con la CLI de Platform, creará una nueva rama localmente y hará una copia exacta de lo que teníamos en producción. No se implementó, pero lo pondrá en este nuevo entorno de desarrollo, y veremos exactamente lo que dije antes, si volvemos a nuestra actividad inicial, veremos este hash de confirmación en el entorno de producción. Y eso se debe a que no hemos cambiado nada con una confirmación adicional al crear este nuevo entorno, porque simplemente hicimos una rama. Vamos a reconstruir. O perdón, vamos a reutilizar la compilación de ese entorno de producción. Entonces, en este caso, vamos a prescindir de todas las instalaciones de dependencias que teníamos antes, y todo simplemente se moverá a este nuevo espacio. Entonces, si vuelvo al nivel de proyecto de la consola de administración, veremos que se está a punto de crear ese entorno de actualizaciones. Ahora, mientras eso sucede, sigamos adelante y hagamos algunos cambios. Como Shadrach y yo hablamos antes en Strapi, vamos a este subdirectorio de la API.

Una de las partes más importantes de nuestra configuración es este archivo database.js. En este momento se está cargando desde esta base de datos SQLite o al menos localmente. Lo que queremos hacer es cambiar esto para aceptar o guardar nuestros data en una base de datos Oracle MySQL. Si vas a la subcarpeta docs del repositorio, encontrarás este archivo, database mysql.js. Así que ve y copia ese archivo, vuelve al archivo database.js y pégalo allí. Veamos qué está sucediendo aquí. Lo primero es cargar una biblioteca que ya ha sido instalada en el repositorio llamada platform.sh-config. Entonces, cuando definimos un servicio, lo colocaremos en el archivo services.YAML en un segundo. Y eso hará cosas como darle un nombre, decirnos cuánto espacio en disco hay. Luego colocaremos una definición llamada relación en nuestra definición de aplicación. Ahora, una vez que hagamos eso, eso en realidad expondrá todas las credenciales para acceder a ese contenedor de servicio dentro del contenedor de la aplicación. Y lo hace a través de variables de entorno. En este caso, habrá un objeto JSON codificado en Base64 llamado PlatformRelationships. Y lo que hace esta biblioteca es decodificarlo. En este caso, es un módulo para Node.js, para que dentro de nuestra aplicación podamos acceder fácilmente a esas credenciales y usarlas en nuestra aplicación. Entonces, aquí vamos a hacer algunas definiciones del resto de la configuración para que podamos ver cómo todo encaja.

En este momento, tengo un archivo services.yaml vacío. Pero si en cambio entro en mis documentos, veremos que tengo un nuevo archivo services.yaml que puedo colocar allí en este directorio oculto de plataforma. Y aquí está nuestra configuración para obtener un nuevo contenedor MySQL. Le doy un nombre. Indico el tipo, la versión que quiero y cuánto espacio en disco está asociado a él. Y eso es todo. Tan pronto como lo empujemos, obtendremos un cambio completo en nuestra infraestructura en este entorno de actualizaciones. Así que ten en cuenta este nombre para el servicio, dbMySQL.

Necesito una forma de acceder a lo que es la forma correcta de hacerlo, para permitir el acceso a este contenedor de servicio dentro del contenedor de la aplicación. Nada más en el mundo podrá acceder a esto aparte del contenedor de la aplicación. Entonces, nuevamente, si entro en mi directorio de documentos y si voy al archivo Strapi app.yml, veremos algo que es bastante similar a lo que teníamos antes pero con algunos cambios. Así que voy a volver a API a mi archivo platform app.yml y lo pego allí. En este caso, tenemos prácticamente el mismo gancho de construcción. El único cambio real que ha ocurrido aquí es la definición de una nueva relación, que en este caso apuntará al contenedor de servicio DB MySQL que tiene el siguiente tipo. Y vamos a nombrar cada forma en que interactúo con ese contenedor a través de esta relación MySQL database. Y así, con ese nombre de relación, veremos que eso es lo que tenemos aquí. MySQL database como nombre de relación. Este bloque aquí es relevante porque para asegurarnos de que estas construcciones sean utilizables en todos los entornos y hagan cosas como las que describí antes de guardar ese ID de construcción en eventos de rama y fusión, una de las otras restricciones, además de no tener acceso de escritura en runtime, es que estos contenedores no pueden comunicarse entre sí durante la construcción. Y lo que hacemos es decirle temporalmente a Strapi, oye, sigue utilizando la configuración de SQLite mientras estás construyendo y luego, una vez que lleguemos a un estado de implementación en Platform SH, que es con esta declaración if aquí, vamos a cargar esa relación y obtener las credenciales del entorno de las variables de entorno allí. Y luego usar eso para conectarse a la database y eso es lo que veremos dentro de nuestra actividad cuando empujemos aquí, Vamos a usar el gancho de construcción predeterminado, la base de datos SQLite predeterminada hasta que esos contenedores de servicio estén disponibles y luego cambiar tan pronto como lo estén. Así que he definido una relación, un nuevo servicio y le he indicado a Strapi cómo conectarse a él y eso debería ser todo. Entonces, lo que voy a hacer es que debería estar en la rama de actualizaciones allí. Debería haber cambiado estos 3 archivos. Voy a hacer clic en finalizar. Así que vamos a empujar esos cambios. Y lo que he incluido en este repositorio es un volcado de uno de los contenedores de servicio llamado Food Advisor SQL. Tomé la base de datos SQLite que se genera automáticamente. Y luego utilicé una herramienta bastante interesante que encontré recientemente, que es una biblioteca de conversión de SQLite a MySQL en Python, la subí a un contenedor de servicio, porque interactúa con él. Cuando realiza su conversión con el contenedor de servicio en vivo real, y luego descargué ese archivo de volcado. Debería haber alguna documentación de cómo lo hice dentro de este repositorio de ejemplo también. Solo tomará un minuto implementar esos cambios, espero que tengas lo mismo en tu lado. Si hay algo interesante para poner aquí, supongo que viste mientras intentaba solucionar el problema de SQL lite, me viste SSHing en el contenedor de la aplicación, puedes hacer eso para cada entorno, así que aquí estoy en el entorno de actualizaciones, es como si estuviéramos todavía en construcción, así que no podré hacerlo hasta que esto se implemente, pero tenemos estos menús desplegables aquí que dan la URL de donde nuestra configuración de rutas dirige el tráfico, un enlace SSH en bruto y luego comandos para clonar realmente el repositorio desde el propio proyecto. Lo que viste fue que simplemente usé la CLI de plataforma, solo usé platform SSH y luego especialmente al final de esto, cuando tenemos múltiples contenedores de aplicación en marcha, puedes especificar a qué aplicación quieres solucionar problemas y conectarte por SSH. Um, así que aquí vemos que tenemos esa declaración if de la que estaba hablando durante el paso de construcción donde vamos a seguir usando la base de datos SQLite hasta que esto llegue a runtime. y nuestro gráfico de servicios aún no se ha actualizado. Bien, ahora vemos que sí lo ha hecho. Ahora tenemos un contenedor de enrutador, el contenedor de aplicación y la base de datos SQL. Y creo que inicialmente estos certificados TLS no les gustan los nombres de mis entornos. Esto va a fallar. Eso se debe a que tenemos un contenedor de servicio, pero no tenemos ningún data en él. Así que no sabe qué hacer con eso. Así que vamos a hacer una migración. Vamos a copiar este comando y veremos que esto no está en esta carpeta, pero si entramos en API, deberíamos... Oh, lo siento, no API. Vamos a entrar en docs. Y luego en docs, vamos a agregar ese volcado de Food Advisor SQL. Así que estamos en la rama de actualizaciones en el entorno de actualizaciones. Así que voy a ejecutar platform SQL, no main. Vamos a usar el entorno actual, food advisor SQL. Y luego vamos a darle un segundo para cargar ese archivo de volcado en nuestro contenedor de servicio y migrar todos nuestros datos de restaurantes a la aplicación Chappie del entorno de actualizaciones. Bien.

Muchos datos, muchos datos. Muy bien, ahora los datos están ahí. Esto va a estar bien. Vamos a iniciar sesión en nuestro panel de administración, y el volcado ya contendrá las mismas credenciales que teníamos antes. Por eso lo estaba mencionando como usarlas, porque así no tienes que restablecerlas. Así que voy a usar Admin Example, admin1234, se ve bien. Voy a iniciar sesión. Ahora nuestra aplicación Strapi tiene todo el mismo contenido que teníamos localmente, pero ahora se ha migrado a un contenedor Oracle MySQL. Y así tenemos todo lo que teníamos localmente, todo ya está publicado. Ahora lo que queremos hacer es fusionar esto en producción. Así que obtengamos el comando nuevamente. Vamos a usar la CLI nuevamente, y vamos a fusionar el entorno de actualizaciones en el entorno de producción. Sí, lo hago. Muy bien, eso tomará solo un segundo. Mientras eso sucede, solo quiero mencionar que parte del beneficio de tener este entorno de desarrollo es que podemos probar nuestra migración fuera de nuestra aplicación de producción. Así que tendremos que ejecutarlo una vez más para producción, pero si nuestra migración fallara por alguna razón, obviamente no tendríamos un sitio de producción roto porque lo probamos en este entorno de desarrollo. Así que vamos a darle un segundo para fusionarse en producción. Mientras eso sucede, podemos comenzar a trabajar en el front end porque ahora tenemos una API en vivo. Igual que antes, puedo ir a API articles. Y ahí están todos nuestros artículos en nuestro entorno de desarrollo. Esto se está implementando, así que está bien. Vamos aquí, todavía en la rama de actualizaciones. En este caso, voy a entrar en el subdirectorio del cliente por primera vez. Y aquí tenemos una aplicación NextJS. Vemos que no tenemos nada específico de platform.sh excepto este script, al que iré en un segundo. Lo que vamos a hacer es simplemente verificar cómo se ve esto. Veremos que para el front end, tenemos este archivo M development que espera que se ejecute localmente una instancia de Strapi. En cambio, vamos a actualizar esto a lo que tenemos implementado. Será esto. Vamos a eliminar esta barra diagonal al final porque eso es muy importante para él. Veremos lo mismo en nuestro entorno de producción. Voy a hacer dos cosas a la vez para que podamos seguir avanzando. Cuando tengas la oportunidad entre estos pasos, ve y haz lo que hicimos antes. Vamos a ir a escritorio, Node Congress, docs, y vamos a.... Todavía en la rama de actualizaciones. Voy a ejecutar la misma migración, pero esta vez en los entornos principales. Creo que me va a dar, no, está bien, estamos bien. Así que cuando tengas la oportunidad, haz lo mismo. Puedes agregar esta bandera de entorno para asegurarte de importar al entorno correcto, pero con la misma importación, como dije, eso te brinda cierta protección para que puedas probar las importaciones de antemano en un entorno de desarrollo. Pero es un reflejo de cómo funciona nuestro modelo. Cada vez que creas un nuevo entorno de desarrollo, obtienes toda la misma infraestructura y código en un entorno de desarrollo. Y viene con todos los data que se encuentran en el entorno de producción, pero los data no se sobrescriben. Tiene sentido, es decir, fusionamos el código y la infraestructura se mueve hacia arriba a un entorno superior, pero no los data. Así que probamos esa migración en desarrollo y luego pasamos a producción. Adelante, Chedarak, lo siento. Sí, disculpa por interrumpir. Estoy curioso, ¿verdad? ¿Qué pasa si tengo un entorno de desarrollo que está más actualizado que mi entorno principal y trato de fusionarlos, verdad? ¿Plataforma lo haría automáticamente por mí o habría un conflicto de fusión? Si tengo, lo siento, ¿puedes repetir eso, hombre? Entonces, si tengo actualizaciones, sabes cómo funcionan las fusiones de ramas diferentes. Cuando hay una fusión, se haría una fusión. ¿Entonces hay alguna situación en la que el entorno de desarrollo y el entorno principal tengan un conflicto de fusión? Supongo que eso podría suceder, en cuyo caso siempre es una buena idea. Cuando hago proyectos, generalmente configuro una integración con GitHub o GitLab porque te brinda una mejor visibilidad de cómo resolver esos conflictos.

Pero si te encuentras en esa situación, hay una parte dentro de la consola de administración y a la que puedes acceder a través de la CLI, que se llama sincronización. Esto te permite volver a sincronizar selectivamente solo los datos o volver a sincronizar el código. Así que si hiciste algo y rompiste algo y quieres reiniciar tu entorno actual, esto es lo que hace, descarga efectivamente ese entorno para que puedas seguir trabajando. Sí, exactamente.

De acuerdo, así que seguí adelante e instalé las dependencias en mi aplicación de frontend. Actualicé este archivo de desarrollo, archivo de entorno en el frontend. Y te mostraré cómo se verá esta aplicación implementada final. Voy a ejecutar yarn dev dentro del subdirectorio del cliente después de actualizar ese archivo de entorno. Déjame verificar aquí. Sí, mi aplicación de producción está bien. Voy a volver a actualizaciones. En este caso, mi frontend está aquí en el puerto 3000. Así que le daremos un segundo para construir las páginas a partir de lo que tengo en Strapi. Aquí está la aplicación de la que hablaba. Está obteniendo datos de esa API de artículos, API de restaurantes para crear un sitio de reseñas de restaurantes. Esto es la demostración de Strapi. Puedo ir a la página de lista de restaurantes y echarle un vistazo. Vamos a ir a Kinsei en San Francisco y ver los horarios, información, reseñas totales, una colección de imágenes que forman parte de nuestro backend de Strapi y los comentarios dejados por varios usuarios con una calificación promedio para el restaurante. También puedo ver las publicaciones del blog que se sirven y verlas individualmente y esta aplicación del front end automáticamente toma el contenido para crear páginas individuales para las publicaciones del blog también según los estilos en la plantilla. Así que todo se ve bien aquí. Voy a apagar el servidor y voy a plataformaizar esto.

Entonces, una de las primeras cosas que necesitaremos cambiar aquí es decirle a platform.sh cómo dirigir el tráfico a esta aplicación del front end una vez que la implementemos. En este caso, eso significará agregar otro conjunto de rutas que apunten a un nuevo contenedor de aplicación. Teníamos este par para el subdominio de la API desde el que nuestro front end local simplemente obtenía y que apuntaba a la aplicación de Strapi y ahora usaremos el dominio de la ruta, en el subdominio www, para definir un nuevo upstream a una nueva aplicación llamada Next.js. Le daremos un ID y eso será todo en nuestra nueva configuración de rutas. Pero necesitamos uno de estos dos, necesitamos algo que le diga a platform cómo construir e implementar esto. Así que voy a ir nuevamente a mi subdirectorio de Doc y voy a un archivo llamado nextjs.app.yaml y luego en clientes, voy a agregar un nuevo archivo.platform.app.yaml e incluir eso. Así que una vez más, vamos a revisar esto. Tengo un nombre de la aplicación, tengo una versión de node.js, vamos a restringir esto a yarn una vez más. Voy a instalar esas dependencias. Y en este caso, en realidad tenemos algunos pasos más aquí. Así que vamos a revisarlos. Durante la construcción, voy a otorgar permisos a este script aquí en el gancho de construcción para que se ejecute en mi gancho de implementación. Y lo que esto hará, de la misma manera que había una biblioteca de lectura de configuración que leía nuestras variables de entorno para obtener credenciales de servicio, hay otras variables disponibles allí, como las rutas de plataforma, que serán importantes porque queremos que la aplicación del front end detecte dinámicamente la URL del backend de Strapi. Para que pueda usarlo en sus propias construcciones. Pero ese valor va a cambiar en cada entorno en el que estemos. Así que supongo que puedo tomarme un segundo para mostrar esto. Aquí está nuestro entorno de actualizaciones. Cualquier URL que se genere aquí contendrá este entorno de plataforma, algo así como un hash, pero tendrá un ID único con el nombre del entorno. Y será el mismo para cada aplicación que tengamos dentro de este entorno. Mientras que si vamos a nuestro entorno principal, será un poco diferente. Tendremos main aquí. Así que nuestra URL del backend va a cambiar según el entorno en el que estemos. Y queremos aprovechar el hecho de que podemos crear tantos entornos como queramos para definir dinámicamente la URL del backend. Entonces, lo que este script va a hacer es leer nuestra variable de entorno de rutas de plataforma y dentro de ella tendrá esencialmente lo que realmente se genera y se completa para estos términos predeterminados. Y va a extraer el que tiene el ID API. Y luego va a escribir en un archivo .M que la aplicación de Next.js va a usar una URL pública de la API, que efectivamente será exactamente lo que puse aquí. Será el backend del entorno actual menos esta barra diagonal al final. Y luego pondrá aquí un secreto de vista previa.

No voy a hacer mucho en cuanto a las claves de vista previa en esta masterclass, pero se configurará el archivo this.M y luego se ejecutará ese script en el gancho de implementación. Nuevamente, en el gancho de construcción, no hay otros containers disponibles, pero están disponibles en el gancho de implementación. Así que es cuando realmente podemos ejecutarlo y obtener estos valores. Luego vamos a construir la aplicación. También hay un comando de inicio, que en este caso, vamos a iniciar el servidor Next.js. Vamos a hacer una reconstrucción rápida y comenzar a usar la variable de puerto incorporada porque todos los containers de la aplicación se ejecutan en el puerto 8888 en Platform SH. Y luego, sí, aparte de eso, vamos a tener algunas configuraciones que dictan cuánta memoria se utiliza dentro de nuestro gancho de implementación y comando de inicio. Y eso nos dará suficiente espacio para extraer todos los datos de nuestra aplicación backend de Strapi y construir el front end. Creo que esos son todos los pasos que necesitamos cambiar aquí. Actualicé el archivo YAML de rutas, actualicé el archivo YAML de la aplicación. Asegurémonos de tenerlo en el lugar correcto. Aún no lo encontré. Así que haremos otro push allí. Lo que veremos dentro de este entorno, porque esto se está moviendo ahora, es otro contenedor de aplicación que aparece en nuestro clúster. En este caso, será nuestro front end que está extrayendo datos del backend que está extrayendo y almacenando datos de nuestra base de datos. Cada entorno que creemos a partir de ahora tendrá la misma configuración hasta que cambiemos explícitamente la versión de cualquiera de nuestros servicios o containers de aplicaciones. Voy a seguir adelante y fusionar para que podamos llevar esto a producción. Y veremos todas las mismas cosas que vimos localmente. Incluso un poco más rápido ahora que no está restringido a nuestra instancia local. Así que aquí está ese mismo restaurante Kinsey. Todas las reseñas que lo acompañan. El blog de nuestro backend. Todo se ve bien. Volvamos a los artículos. Puedo filtrar por categorías. Supongo que no tengo las categorías de Meet American. ¿Cuáles tengo aquí? Bien, tengo uno con la etiqueta de categoría Europea. Voy a volver a los restaurantes y ver cómo se ve aquí mi filtrado. Voy a ver los restaurantes de Guatemala aquí. Y puedo ver un restaurante individual que cumpla con ese criterio. Y esto debería estar casi terminado fusionándose a producción. Obtengamos algo agradable y listo para producción en lugar de ese problema de base de datos SQLite. Veamos qué más tenemos aquí. Voy a buscar comida europea, el Mint Lounge. Todo se ve bien. Voy a desplazarme por todas las imágenes diferentes. No he mirado esto mucho para ver si hay alguna función de resaltado de imagen en esa presentación de diapositivas. Esto te permite iniciar el repositorio, documentación. Ups. Lo siento.

Implementación del Entorno Multiaplicación

La mayoría de las personas que siguen el taller pueden tener dificultades para llegar a este último paso de la implementación del entorno multiaplicación. Si solo quieres verlo ahora y descargarlo más tarde para probarlo tú mismo, está bien. Obviamente, ten en cuenta que hay algo que debemos solucionar en esa etapa de SQLite, pero parece que todo lo relacionado con los servicios de producción y la implementación en sí se ve bien aquí. Entonces, una vez más, solo necesitaremos hacer esta primera compilación para llevarlo a producción. Y luego estaremos listos para hacerlo en este punto. Para comenzar a desarrollar a partir de ahora.

Sí, Next.js es un frontend bastante interesante. Lo he estado usando mucho más. Cuando comencé a hacer estas cosas desacopladas en Platform, trabajaba mucho con Gatsby y recién hace poco cambié a Next.js para preparar esta aplicación de demostración, pero también como frontend para Drupal, lo cual ha sido bastante interesante. Recientemente salió una nueva herramienta específicamente para Drupal y Next.js. Pero me ha gustado, no quiero decir mucho más que Gatsby, pero ha resuelto mis demostraciones de implementación multiaplicación mucho mejor que esa situación. Y realmente se atasca en la primera implementación, tengo que averiguar qué está pasando allí. Parece que estamos atascados tratando de iniciar Strapi. Bueno, como dije, debido a esa primera vez donde no está disponible en absoluto, esencialmente está escribiendo la URL del backend en un archivo EMV con enlace simbólico. Entonces, la primera vez que lo hace, esos datos no están disponibles ni siquiera para crear ese archivo. Entonces, esencialmente, inicia el servidor con un archivo EMV mal configurado. Y luego lleva un segundo, parece, en el primer push al migrar para completar el archivo a tiempo para establecer esa conexión. De acuerdo. Sí, todavía hay que averiguar qué va a hacer con ese contenedor, supongo. Pero sí, me gustaría saber las soluciones de implementación de todos los demás aquí, porque la mayoría de las veces, cuando veo un patrón como este, se coloca el frontend en Vercel y se implementa el backend en otro lugar. Y lo interesante de nuestra solución es que todo se mantiene dentro del mismo repositorio para que puedas crear un entorno de desarrollo. Y luego, ya sea que estés cambiando el esquema de la API del backend y estés tratando de asegurarte de que el frontend siga siendo compatible con lo que has cambiado, puedes hacerlo con copias completas tanto del frontend como del backend en ese entorno, o viceversa. Si estás trabajando en el frontend, puedes tener tu propia copia de desarrollo de esa aplicación de API dentro del entorno de desarrollo. Ahí vamos. Así que tenemos nuestra API. Vamos a actualizar. Tenemos nuestro frontend de Next.js y luego deberíamos tener... Genial. Tenemos nuestro entorno de producción, una arquitectura desacoplada entre una aplicación Next.js y Strapi. Ahora estamos en este punto, libres para agregar un dominio a este entorno de producción y continuar con nuestro desarrollo. Y dado que hemos completado la migración a producción y tenemos toda nuestra infraestructura y código configurados en producción, si vamos a través de la CLI o a través de la consola de administración, ahora podemos venir aquí y decir, digamos que queremos agregar una tienda a la aplicación frontend de alguna forma que no pase específicamente por Strapi pero use algo externo como Shopify, pero queremos tener una copia de la API que no entre en conflicto necesariamente con lo que está sucediendo en producción, ahora podremos aprovisionar este entorno de desarrollo llamado agregar tienda que tendrá la misma infraestructura exacta y todos los mismos datos que migrados a producción en este entorno de desarrollo. Todos los restaurantes, todos los artículos de blog, cualquier dato que queramos tener a nuestra disposición cuando estemos escribiendo pruebas para los cambios en este entorno aislado estará disponible para nosotros allí en ese entorno aislado. Eso es. Sí, eso es prácticamente lo que quería cubrir hoy y espero que todos ustedes hayan podido seguir a su propio ritmo o revisar la grabación más tarde o consultar el repositorio para obtener las instrucciones y configurar el patrón ustedes mismos. Otra cosa que quería agregar es que si vas a nuestro... Si vas a nuestra organización de plantillas de Platform SH en GitHub y buscas Strapi, encontrarás en realidad varias plantillas diferentes que utilizan la base de Strapi para el backend por sí sola. Pero estas dos aquí son dos tipos diferentes de frontends que extraen datos del backend de Strapi, tal como te estoy mostrando en esta demostración. De lo contrario, obviamente puedes eliminar tu búsqueda y buscar JavaScript y verás una buena cantidad de diferentes opciones que tenemos allí. Espero que esto haya sido interesante y útil. Hemos reservado tiempo, no es necesario quedarse las tres horas completas, pero Shadow Rack y yo estaremos disponibles para ayudar a cualquiera, ya sea para llegar al punto en el que llegué aquí o para hacer cualquier pregunta sobre Platform o cómo es Node en Platform. Estaremos encantados de quedarnos y responder a cualquiera de esas preguntas y realmente agradecemos que todos ustedes hayan venido. Sí, gracias a todos por venir a este taller. Si necesitas ayuda, por favor avísanos y estaremos disponibles para responder tus preguntas. Sí, gracias. Sí, solo quiero hablar sobre el canal de comunidad. Nuestro enlace de comunidad es muy útil. Está dividido en varias secciones, desde guías de cómo hacer hasta tutoriales, preguntas y respuestas. Puedes venir aquí y consultarlo. Seguro que encontrarás una forma de responder a tu pregunta en el enlace de la comunidad.

Así que siéntete libre de hacerlo. Sí, lo mismo ocurre con Slack. Puedes ir a chat.platform.sh y unirte a nuestro espacio de trabajo de Slack, Shedrack, yo y el resto de nuestro equipo de DevRel estaremos allí junto con... Quiero decir, podrías tener una conversación con el CTO potencialmente dentro de nuestro canal público de Slack. Todos estamos aquí para ayudar a las personas a familiarizarse con Platform.sh porque sé que puede ser un poco diferente a otras plataformas de implementación a las que estás acostumbrado. Pero si puedes aceptar algunas de las pocas reglas de revocación de acceso de escritura después de la compilación, manejar las cosas a través de variables de entorno, tal vez un poco más de tiempo durante la migración inicial, realmente te encontrarás en una posición en la que puedes aprovechar estos entornos de desarrollo aislados e idénticos y realizar trabajos bastante interesantes. Y ve a nuestro repositorio aquí y di, bueno, tengo un frontend en node 14 y tengo un backend de Strapi en node 12. Pero si voy a la documentación y voy a la sección de Node.js, veo que en realidad tenemos soporte para 16. Así que puedo ir y entrar en ambos archivos App.yml y decir, probemos Strapi en 16. Haz push y obtendrás todo completamente idéntico a lo que teníamos en producción con el único cambio de, ahora se ejecuta en un contenedor de Node 16. Y cuando digo idéntico, me refiero a que ese contenedor de Node 16 heredará la relación con la misma base de datos, una copia de esa base de datos y tendrá los mismos datos. También será lo suficientemente inteligente como para detectar que ya he construido esa aplicación de frontend en Node 12, tengo ese hash de confirmación asociado, ese ID de compilación, por lo que puedo omitir la reconstrucción del frontend. Simplemente puedo darle un comando de inicio de actualización porque tenemos una nueva versión del backend y puedo probar, bien, probemos en Node 16. Lo mismo para el frontend y simplemente aprovisionar infraestructura de manera muy fácil de esa manera en estos entornos aislados.

Muy bien. Bueno, supongo que vamos aquí, te mostré, sí, estas eran las variaciones de las que estaba hablando que había hecho antes, así que un simple front-end de Gatsby, y luego otras dos variaciones, o tres en total del patrón multi-app, en este caso, Gatsby integrando desde WordPress, CMS, Strapi y Drupal, así que hay muchos recursos aquí para ver el mismo patrón en nuestra organización de GitHub.

Gracias, Irving. Sí, estaremos aquí un rato. Si tienen alguna pregunta, siéntanse libres de hacerla. Chedarak y yo estamos disponibles para señalarles algunos recursos o, ya saben, incluso tenía planeado quedarme, así que si hay algo más interesante que quieran ver una demostración, con gusto lo haré. Pero sí, hay muchos recursos sobre multi-app y Node en Platform.

Veamos. Gracias Shane. Espero que hayan podido seguir. Si no, revisen el repositorio y háganlo en su tiempo libre. Intenté ser bastante detallado con las instrucciones. Vamos a ver qué pasó allí con el problema de SQLite. Pero como dije, ese no era el objetivo de la masterclass de todos modos.

Oh, quería verificar, ¿ves eso Shed Rack? Hay un error allí en la encuesta que la fecha no es válida en estos artículos. ¿Ves esto? Bueno, supongo que están en los comentarios. Sí, no puedo verlo. Vamos a revisar. Ve a uno de estos. Mm-hmm. No hay un campo para la fecha, aparentemente. No. Pero... Está bien. Así que mi... De acuerdo. Así que mi volcado fue bueno excepto por la creación y actualización de la fecha. Eso está bastante bien. La última vez que hice esto, no pude obtener un volcado completo de todos los data preparados para MySQL, y encontré, ¿qué era? ¿Qué era? No sé si alguno de ustedes que están escuchando se ha encontrado con esto, si... No sé si hacen demostraciones como nosotros. Pero el repositorio de food advisor viene con ese comando seed para armar la base de datos SQLite. Pero lo que realmente quería mostrarte era este servicio de producción que utiliza MySQL. Y he buscado en Google varias veces tratando de entenderlo. Y encontré este esta semana. Es un paquete de Python que instalé a través de Pip. Y así que lo que hice fue instalarlo y luego cuando... Otra cosa que puedes hacer cuando comienzas a desarrollar esto localmente, que obviamente es el siguiente paso, es que puedes actualizar este archivo database.js para que no sea tan estricto en cuanto a estar realmente en la plataforma. Y puedes abrir un túnel a tus servicios. Entonces, ¿cuál es mi rama ahora mismo? Todavía estoy en updates. Así que puedo hacer Platform tunnel single lo cual me dará acceso al contenedor de servicio en ejecución en mi entorno de desarrollo. Obviamente, no haces esto en producción. Y luego ¿dónde tenía mis notas aquí? ¿Era este? No. Oh. No importa. Puedo buscarlo en la documentación. Entonces, puedo abrir un túnel a la aplicación. Ahora que tengo el túnel abierto, puedo abrir un... Así que ahora tengo una variable de entorno simulada para las relaciones de la plataforma, que puedo decodificar de la misma manera y pasarla a través de esta biblioteca jq que estoy utilizando dentro del contenedor de la aplicación para obtener mis credenciales para el contenedor de servicio que se está ejecutando en vivo en mi entorno. Y así que lo que hice fue usar ese túnel abierto con las credenciales para luego ejecutar SQL8, MySQL, lo apunté al archivo de base de datos data db que venía con la demo de Food Advisor, le di el nombre, que en este caso en la plataforma, el nombre es esta variable de ruta, la credencial de ruta, usuario, y puerto. Todavía es localhost, así que solo necesito el usuario y luego en este caso cuando yo

De acuerdo. No, sin código. Creo que he visto a mucha gente usar DynamoDB, creo. He visto a mucha gente usar DynamoDB, pero esa es la única vez que lo he visto. Por supuesto, me refiero a la configuración sin código. Oh sí, he visto fauna, también he visto tuna... Sí. Sí. Oye, todo esto, sí, no lo consideraríamos solo como hosting, quiero decir, parte de lo que estamos tratando de proporcionar es toda la orquestación que iría junto con la reconstrucción de este flujo de trabajo en acciones o cualquier otro webhook que necesites adjuntar a tu repositorio donde estás haciendo tu desarrollo. Y ahora que he hecho esta migración, puedo copiar todo esto a GitHub y hacer una integración con el mismo proyecto. Y ya tengo mi asociación entre una rama o una solicitud de extracción que equivale a un entorno de desarrollo, por lo que puedo hacerlo funcionar junto con todas mis tareas de CI existentes, todas las pruebas que tengo configuradas para los entornos individuales, puedo esperar a que se implemente para luego hacer cualquier prueba de regresión visual u otras pruebas que deba hacer en el entorno implementado. Así que creé este entorno, agregar tienda, cuando estaba hablando. Y si voy aquí, y vuelvo a la parte de la cámara. Este fue la aplicación de producción que acabamos de construir, este fue el entorno en el que lo estábamos construyendo. Y después de terminar todo eso y ponerlo en producción, creé esta rama. Así que ahora que tengo esta rama, puedo empezar a hacer trabajo como dije, cambiar la infraestructura. Obtengo todo lo que hice antes. Pero también obtengo todos los data. Esta es una copia completamente construida del entorno de producción. Así que es hosting pero también es este paradigma de herencia, supongo que así, obtendré todos mis datos de producción en cada entorno de desarrollo que cree. Y puedo vincularlo a mi lógica de git que ya estoy usando. Y esa misma herencia ocurre para cosas como puedo establecer... Digamos que para mi entorno de producción, puedo establecer variables de entorno que sean específicas de esta aplicación. Así que digamos que necesito algunas credenciales para ir a Shopify para trabajar en producción. Es posible que no quiera que se hereden por nada, pero podría crear muy bien un entorno de preparación del que luego hago hijos y darle sus propias credenciales de prueba de Shopify que se heredarán en cada entorno de desarrollo, como parte de nuestra API. Esas son las cosas, la herencia, la abstracción de todas las tareas de DevOps solo golpean a Git con la infraestructura como código que se gestiona. Así que no puedes cambiar nada de tu infraestructura hasta que lo confirmes, pero no tienes que confirmarlo hasta la versión de parche. Las actualizaciones de seguridad se aplican automáticamente. Así que tendemos a considerarlo más que solo hosting. Así que si voy a mi entorno de producción, puedo programar o hacer copias de seguridad individuales del entorno, y realmente puedo usar esas copias de seguridad para sincronizar con los entornos secundarios. Una de las cosas interesantes además de, ¿no es interesante que puedas tener un front-end y un back-end en el mismo proyecto es que este estándar de una rama equivale a un entorno y cómo funciona la herencia hace que sea fácil hacer cumplir los estándares de cómo tu equipo de desarrolladores trabaja en un solo proyecto de manera fácil y segura en términos de auditoría. Pero esta API se puede escalar a tantas aplicaciones como desees. Por lo tanto, podrías tomar este patrón desacoplado de un front-end y un back-end que tiene un back-end de CMS similar. Y podrías crear un producto SAS que luego inicialice tantos proyectos bajo demanda para clientes como desees. Crear e inicializar desde este repositorio el mismo proyecto Y luego obtienes estos proyectos aislados que dentro de ellos tienen entornos aislados en los que, por ejemplo, tus desarrolladores internos pueden hacer personalizaciones y personalizaciones para cualquier cliente que sea. Y establecer esta flota de aplicaciones que ya tienen todo el DevOps incorporado en lugar de tener que construirlo desde cero como en el caso de un solo sitio para 100 sitios. Y luego puedes hacer cosas como definir comandos para ejecutar la actualización de Yarn en todas tus aplicaciones en este repositorio principal, y luego simplemente decir ahí están mis 100 sitios, ejecuta la actualización de Yarn en todos ellos y mantén las actualizaciones en un entorno de desarrollo y simplemente ejecuta mis pruebas. Si alguno de ellos falla, necesita inspección. Pero si pasan, luego se fusionan en producción y mantén tus dependencias actualizadas de esa manera. Así que es una plataforma de DevOps, supongo que es cómo lo vemos con todas esas pequeñas características incluidas. Claro. Sí. Por favor, prueba esta demo. Visita nuestro sitio web y únete a nuestro Slack porque nos encontrarás a ShedRack y a mí allí. Y estaremos encantados de hablar sobre lo que estás implementando, a menos que quieras compartirlo ahora. Y luego, sí, ayudarte a ver cómo encaja o se ejecuta, al menos, en la plataforma. Gracias a todos. Gracias a todos. ShedRack, ¿sabes si esto, porque vi esta variable de entorno, la que dijiste que era demasiado. Sí.

¿Dónde está? Bueno, está en ambos lados. Gracias, Nazeem. Gracias por venir. Tengo un secreto de vista previa en el lado de Strapi, y también se supone que tengo un secreto en el lado del cliente. Es el que reescribí. Porque con Next, se supone que puedo hacer ping al frontend y actualizar lo que se ha actualizado en el backend, ¿verdad? Sí, sí. Bueno, quiero decir, vamos a probarlo. Dudo que funcione. Pero podría ser. Veamos. Artículo... Estos son mis blogs, supongo. Espera, limpiemos todas estas pestañas antes de hacerlo en un entorno diferente. Vamos a Agregar Tienda. Aquí está mi API, y aquí está mi frontend. Muy bien.

Estoy construyendo lo mismo para un backend de Drupal, y realmente quiero resolver esta parte porque hacer vista previa con un frontend de Gatsby no fue sencillo. Sí, definitivamente. Creo que intentaré adaptarlo cuando tenga más tiempo. Sí, como tuve que ejecutar un servidor de desarrollo en entornos que no eran de producción y configurar todo tipo de cosas, pero por lo que entiendo, Next no funciona así cuando hemos hablado. Así que quiero ir a Artículos. Y veamos, blog, ¿por qué son los hamperers chinos? De acuerdo. Vamos a eso. Como hacemos. Um, así es como se hace esto. Y luego, guardaremos. Editando una versión publicada. De acuerdo. Mira eso. Sí, así que ustedes se quedaron. Eso ya está configurado. Esperaba que lo estuviera. Fue muy difícil intentar hacer lo mismo con el frontend de Gatsby. Todavía es agradable, pero se tuvo que hacer una lógica diferente. Tal vez leeré esto y tal vez eso sea todo. Necesitaba un poco de tiempo para entender la diferencia. Libre. Creo que el código del taller para lo que ves, ¿qué hiciste? ¿Para qué parte? Para la vista previa en vivo. ¿Cómo se implementó? Parece que ya está implementado, ya sabes, al menos haremos una actualización. No sabía, aún no estoy familiarizado con la versión 4 de Strapi. Tengo una URL de vista previa configurada. Así que puedo ver una versión de borrador. Creo que tengo tres secretos de vista previa. Extensiones. Sí. De acuerdo, solo necesito incluir algo en el archivo de índice de Strapi. Esto es para la versión 3, tal vez ahora haya una mejor manera.

Pero parece que necesito agregar algo. ¿O dijo que esto era. Oh, tengo que agregar un nuevo año. Oh, tengo que hacer uno para cada colección. Eso me da un botón de vista previa. Tengo que cambiar cómo manejo los borradores y los artículos publicados. Veamos. Automatiza los cambios en tu borrador. Sí, veamos. Supongo que esto se ha ido. De acuerdo. La versión de borrador. Porque eso es lo interesante de la versión del backend de Drupal, que ya tiene esa lógica incorporada para darte una URL de vista previa. Y parece que aprovecha eso para crear, lo cual es similar a lo que hace Next, que es lo que Drupal aprovecha, te dará este punto final de vista previa de la API que puedes ver como una copia de borrador, esencialmente, como si ya estuviera actualizada. Sí, si alguien todavía está aquí, avíseme si quieren ver algo, de lo contrario, solo estoy explorando todos los cambios en Strapi-v4 que aún no he tenido la oportunidad de ver.

Entonces, gracias nuevamente por venir. Gracias a todos por venir. Gustavo, eres el último, amigo mío. ¿Tienes alguna pregunta o algo que quieras decirnos? Voy a tomar tu silencio como un no. Gracias, Gustavo. Cuídate. Agradecemos que hayas venido de nuevo, no dudes en ponerte en contacto con nosotros, estaremos en el resto del Congreso Know durante los próximos días. Así que si se te ocurre algo, déjanos un mensaje en el hilo o contáctanos directamente, y que tengas un excelente resto de día. De acuerdo. Gracias de nuevo.