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 han hecho, dejen un mensaje. Si no, no importa. Tomaré el silencio como que nadie ha escuchado esto antes. Han escuchado, pero no han usado. 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í. Han escuchado, pero no han usado. No me sorprende. De acuerdo. Muy bien. Crearon una muestra. Genial. Muy bien. 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í. Vamos a sembrar 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 frontend, 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 frontend que se ve más o menos como esta captura de pantalla. Y llegaremos a eso al final.

Entonces, lo que me gustaría hacer es ir adelante y vamos a intentar ampliar esto un poco. Ve al terminal desde donde vas a trabajar. Y cuando interactuemos 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 va a hacer es generar una clave SSH temporal para que la CLI la use basada en un token temporal de tu cuenta. Y así... Oh, ya me adelanté. Lo siento, chicos. Una vez que hayas instalado la CLI, ve y haz clic en este enlace aquí. Esto te llevará a la página para registrar una cuenta para el masterclass. 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 hayas usado y autorizar a la CLI a usar tu cuenta. Y ahora veremos que he iniciado sesión. Aquí está mi correo electrónico si quieres ponerte en contacto conmigo. Muy bien. 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 haber un directorio llamado node congress. Entonces aquí está, como describí antes en la aplicación de demostración original de food advisor, un subdirectorio API y cliente. Todas las instrucciones si quieres seguir junto 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.

Simplemente 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 los entornos, almacenamiento y una rama principal predeterminada. Y luego te preguntará, ¿quieres hacer que ese proyecto sea remoto para el repositorio con el que estamos trabajando? Adelante y di que sí y luego lo confirmaremos y luego PlatformSH 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 te pones en contacto conmigo 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 puedas seguir 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 seremos llevados 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 masterclass, 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 se corresponderán aproximadamente con 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 esté 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 que en su mayoría nos preocuparemos de cómo está configurado es el archivo database.js. Que en este caso dice que todos nuestros data vendrán de una base de datos SQLite en el directorio .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. Así que 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 entrar en 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 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, 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. Así que 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. 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 antes no estaba, básicamente está en Strapi 4 donde están tratando de hacer una separación de responsabilidades para que tu administrador, tu archivo database o tu archivo de administrador no se atasquen. Entonces, 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 hizo Strapi 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. Eso es para lo que sirve tu archivo crontax. Y si miras esto, 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 en lo que puedas almacenar tu contenido. Entonces, el archivo database.js consiste en 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, servicios de database. Platform.msg proporciona servicios de database, 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 cuando lo enviemos, y agreguemos, a medida que avanzamos en el, en el masterclass, creo que Ivan hizo una pregunta, verás dónde crearemos una relación, 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í, si tienes requisitos especiales adicionales, cualquier actualización especial que necesites hacer, necesitas crearlo tú mismo, el archivo plugins.js es básicamente donde probablemente quieras hacer eso. Ahora, como cualquier archivo JS nuevo, el 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, creando un puerto 1337 para que nuestros hosts escuchen. Y eso es básicamente solo un servidor simple que tiene el host y un puerto generalmente. 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 source, que es donde ocurre gran parte de toda la magia, ya sabes, toda tu magia desde el UI, etc., para el panel de administración, las extensiones que necesita tu panel de administración, por lo que si arrancas una aplicación Strapi normal, ¿verdad? Si arrancas, ya sabes, gran parte del contenido que ves aquí en realidad no estaría allí 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 son tu punto de entrada. Es realmente, realmente más fácil. Entonces, Strapi acaba de iniciar el servidor Strapi, por lo 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 [email protected], luego la contraseña que se muestra allí. Y después de eso, me gustaría que vayas, Chad, a este enlace en particular, los artículos, la API slash 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 la subcarpeta API de origen aquí, y nuestro comando seed ha inicializado todos estos datos iniciales para acompañar 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 1337. Así que aquí está el panel de administración, pero en cambio voy a ir directamente a la colección de artículos, y veremos cuatro de esos datos iniciales allí. Lo siento, continúa Shadrach. ¿Quieres ir? ¿Quieres que siga? Oh, sí, sí, claro. Entonces, esto básicamente, esto como por supuesto estás viendo aquí es lo que obtuvimos al ver los datos particulares si navegas a cinpu.cda.db. Entonces, el archivo data.db 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 workshop 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 front-end. Esa es básicamente toda la idea detrás de esta charla. Entonces vamos a agregar el front-end en esta charla y conectarlo a Strapi y ver estos datos particulares 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 workshop 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 back-end, en este dominio de marcador de posición. Entonces, lo interesante de este marcador de posición es que cuando, en un momento, creemos una rama, obtendremos un entorno de desarrollo que se asociará con esa rama, y se generará y sustituirá una URL 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 esencialmente asociando esta ruta con un ID.

Sí, ¿debería? 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 tu 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 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 llamado 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 importante. Entre implementaciones, no es necesario definir las 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. Hay etapas en un contenedor de aplicación. Están las etapas de construcción y las etapas de implementación. Todos estamos 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 seguridad 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 punto. 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 code 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 database. Entonces podemos definir un montaje aquí que nos permita seguir escribiendo en esa database en tiempo de ejecución. Si no está definido explícitamente en tu montaje, no tendrá acceso de escritura. Y eso es un tipo de seguridad 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 una buena descripción general de nuestra configuración. Vamos a detener el servidor local y vamos a confirmar los cambios en el proyecto. En este caso, deberías tener un remoto definido como plataforma. Así que voy a confirmar los cambios. Supongo que no hice ningún cambio mientras pasaba por esto. Muy bien, y 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 sucederá 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 ponernos al día en 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 tiempo de ejecución que estoy usando, y luego un fragmento del hash que se utiliza para identificar esta compilación específica. Y en este caso, la compilació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. Así que veremos dónde ramificamos que realmente podemos reutilizar este hash y ahorrar algo de tiempo en las compilaciones.

En este momento estamos haciendo la misma instalación localmente y estamos haciendo la compilación. Veo que desde que comenzamos hemos ganado algunos nuevos participantes. Así que hola, bienvenidos. Soy Chad Carlson de PlatformersH, con Chedra Kakintayo. Si van y revisan el chat en Zoom o preferiblemente dentro del foro, encontrarán un enlace al repositorio con el que estamos trabajando, que es platformersh-workshops.com/Node Congress, y luego algunos pasos iniciales, y podrán llegar a esta misma página, la página de instrucciones desde la que estamos trabajando aquí. Algunas de estas implementaciones tomarán un poco de tiempo, así que estoy seguro de que podrán ponerse al día si llegan un poco tarde.

De acuerdo. No estoy seguro de dónde sucedió eso. De acuerdo. Um, Si estás empezando a tener 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 lo que tenemos aquí es 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 database 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 del 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 sección de administración, veremos la misma hoja de inicio de sesión que teníamos antes. Antes de hacer eso, queremos migrar algunos de esos data 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 generamos localmente. En este caso, voy a... Vamos a hacer esto primero. Voy a subir mi API local, y voy a subir todo lo que está dentro de .tmp, que es esa database SQLite, al upstream. Continúa. Y luego voy a hacer lo mismo con 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.

Llegué al final. Llegué al final. ¿Qué pusiste en el entorno? No necesitamos tanto. No creo que necesites vincularlos todavía. Todavía estoy atascado en eso, por eso lo puse ahí. 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, donde 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. Así que revisa la console nuevamente, revisa los registros. Revisa las cargas nuevamente. Esto podría ser solo un error de copia. ¿Lo hiciste, como cuando estábamos trabajando en esto, encontraste esta información en particular, flecha mm? 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 su lado, 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 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 chico 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 esa database SQLite 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 plataforma CLI, 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 solo 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 se moverá a este nuevo espacio. Entonces, si vuelvo al nivel del proyecto en la console de gestión, veremos que se está a punto de crear ese entorno de actualización. 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. Y en este momento se está cargando desde esta base de datos SQLite database o al menos localmente. Lo que queremos hacer es cambiar esto para aceptar o guardar nuestros data en una base de datos Oracle MySQL. Entonces, 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 se ha instalado 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 docs, veremos que tengo un nuevo archivo services.yaml que puedo colocar allí en este directorio oculto this.platform. 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 empujemos esto, 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 desde el 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 docs, 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 pegarlo 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 compilaciones sean utilizables en todos los entornos y hagan cosas como las que describí antes de guardar ese ID de compilación en eventos de rama y fusión, una de las otras restricciones, además de no tener acceso de escritura en tiempo de ejecución, es que estos contenedores no pueden comunicarse entre sí durante la compilación. Y lo que hacemos es decir 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, vamos a cargar esa relación y obtener las credenciales del entorno de las variables de entorno allí. Y luego usar eso para conectarnos a la base de datos 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. Así que 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 hace su conversión con el contenedor de servicio en vivo, 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 para 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 SQLite, 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 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 el repositorio desde el propio proyecto. Lo que viste fue que simplemente usé la CLI de Platform, simplemente usando 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. Entonces, aquí vemos que tenemos esa declaración if de la que hablaba durante el paso de construcción, donde vamos a seguir utilizando la base de datos SQLite hasta que esto llegue al tiempo de ejecución 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 la aplicación y la base de datos SQL. Y creo que inicialmente a 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 dato 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 utilizar 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.

Mucha data, mucha data. Muy bien, ahora data está ahí. Esto va a estar bien. Vamos a ir a nuestro inicio de sesión de administrador, y el volcado ya va a contener las mismas credenciales que teníamos antes. Por eso lo estaba mencionando como usarlas, porque entonces no tienes que restablecerlas. Así que voy a poner Admin Example, admin1234, se ve bien. Voy a iniciar sesión. Y 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 para eso nuevamente. Vamos a usar la CLI nuevamente, y vamos a fusionar el entorno de actualizaciones en 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 este 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 al 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 ver 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. Entonces, en su lugar, vamos a actualizar esto a lo que tenemos implementado. Será esto. Vamos a eliminar esta barra diagonal al final porque eso es muy importante. Veremos lo mismo en nuestro entorno de producción. Así que 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. ¿A dónde vamos? A escritorio, Node Congress, docs, y vamos a.... Todavía en la rama de actualizaciones. Voy a ejecutar esa misma migración, pero esta vez a los entornos principales. Creo que me va a dar, no, está bien, estamos bien. Así que cuando tengas la oportunidad, haz lo mismo. Puedes poner 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 con anticipación 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 la misma infraestructura y code en un entorno de desarrollo. Y viene con todos los data que se encuentran en el entorno de producción, pero los data no fluyen hacia arriba. Tiene sentido, quiero decir, hacemos una fusión code y la infraestructura se mueve hacia arriba en la cadena 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, amigo? Entonces, si tengo actualizaciones, sabes cómo funcionan las fusiones de ramas diferentes. Cuando hay una fusión, se haría, cuando hay un conflicto se haría la fusión. ¿Así que podría haber una 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, normalmente 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 que puedes acceder a través de la CLI, que se llama sincronización. Esto te permite volver a sincronizar selectivamente 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.

Muy bien, así que continué e instalé las dependencias en mi aplicación del frontend. Actualicé este archivo de desarrollo, archivo de entorno en el frontend. Y te voy a 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 vamos a darle un segundo para construir las páginas a partir de lo que tengo en Strapi. Aquí está la aplicación de la que estaba hablando. Está obteniendo datos de la API articles, API restaurants 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 echar un vistazo. Vamos a ir a Kinsei en San Francisco y ver horarios, información, reseñas totales, una colección de imágenes que forman parte de nuestro backend de Strapi y 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 según los estilos en la plantilla. Así que todo se ve bien aquí. Voy a apagar el servidor y voy a platformizar esto.

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 aplicaciones. Teníamos este par para el subdominio API desde donde nuestro front-end local simplemente obtenía datos apuntando a la aplicación de Strapi y ahora usaremos el dominio de 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 va a hacer, 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á importante 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 tomar un segundo para mostrar esto. Aquí está nuestro entorno de actualizaciones. Cualquier URL que se genere aquí contendrá este entorno de plataforma, no es exactamente 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 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 va a ser exactamente lo que puse aquí. Será el backend del entorno actual menos esta barra diagonal al final. Y luego va a poner aquí un secreto de vista previa.

No voy a hacer mucho en secretos 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 contenedores disponibles, pero están disponibles en el gancho de implementación. Así que ahí 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 integrada port porque todos los contenedores 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. Todavía no lo encontré. Y luego haremos otro push allí. Entonces, 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 obtiene datos del backend que obtiene y almacena datos de nuestra base de datos. Entonces, 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 contenedores de servicio o aplicación. Así que voy a seguir adelante y dejar que esto siga por un segundo y me voy a silenciar porque creo que mi esposa está haciendo batidos en el fondo y probablemente sea muy ruidoso. Y tan pronto como esto se complete vamos a ver qué se implementó. Sí, me preguntaba qué era ese ruido. De todos modos, nṣṭṭṭṭṭṭṭṭṭṭṭṭṭṭʃṅṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭṭ ṭ᾽ Ḥᵒᴍᵐᾶᵏᵏᵃᵃ ᵉᵐᵒᵏᵃᵏ ḥᵒᴅ ḥᵒᴍᴱ ʸᵒᴄᴱ ᴱᴄᴱᴜ ᴴᴴ ᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴᴴ

Todo el mundo que sigue aquí tiene problemas para llegar a este último paso de la implementación del entorno multiaplicación. Está bien si solo quieres ver ahora y luego descargar esto más tarde y probarlo tú mismo. 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 de esta cosa se ve bien aquí. Una vez más, solo necesitaremos hacer esta primera construcción para llevarlo a producción. Y luego estaremos listos para hacerlo en este extremo. Para comenzar a desarrollar a partir de ahora.

Sí, Next.js es un front-end bastante interesante. Lo he estado usando mucho más. Cuando comencé a hacer estas cosas desacopladas en Platform, estaba trabajando mucho con Gatsby y recién hace poco cambié a Next.js para preparar esta aplicación de demostración, pero también como front-end 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 está tratando de averiguar qué 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 front-end en Vercel y se implementa el back-end 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 seas alguien que esté cambiando el esquema de la API del back-end y estés tratando de asegurarte de que el front-end siga siendo compatible con lo que has cambiado, puedes hacerlo con copias completas tanto del front-end como del back-end en ese entorno, o viceversa. Si estás trabajando en el front-end, 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 front-end de Next.js y luego deberíamos tener... Genial. Tenemos nuestro entorno de producción, una arquitectura desacoplada entre una aplicación de Next.js y Strapi. Así que 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, ya que 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 de front-end de algún tipo que no pase específicamente por Strapi, pero use algo externo como Shopify, pero queremos seguir teniendo 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, todas las publicaciones 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 revisar el repositorio para obtener las instrucciones y configurar el patrón ustedes mismos. Otra cosa que quería agregar es que si van a nuestro... Van a nuestra organización de plantillas de Platform SH en GitHub y buscan strappy, encontrarán en realidad una serie de plantillas diferentes que utilizan la base de strappy para el back-end de strappy tres por sí solo. Pero estas dos aquí son dos tipos diferentes de front-end que están obteniendo datos del back-end de strappy, tal como les estoy mostrando en esta demostración. De lo contrario, obviamente pueden eliminar su búsqueda e ir a JavaScript y ver una buena cantidad de diferentes opciones que tenemos allí. Así que espero que esto haya sido interesante y útil. Hemos reservado tiempo, no es necesario quedarse las tres horas completas, pero Shadow Rack y yo ya estamos planeando estar 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 esta masterclass. Si necesitan ayuda, por favor avísenos y estaremos disponibles para responder sus preguntas. Una pantalla. Sí. 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. Pueden venir aquí y revisarlo. Seguramente encontrarán una forma de responder a su pregunta en el enlace de comunidad.

Así que siéntete libre de hacer eso. 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 acostumbrarse a 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 construcció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 donde 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 front-end en node 14 y tengo un strappy backend 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 strappy 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 front-end en Node 12, tengo ese hash de confirmación asociado, ese ID de construcción, por lo que puedo omitir la reconstrucción del front-end. 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 front-end y simplemente aprovisionar la infraestructura 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 front-end simple de Gatsby, y luego otras dos variaciones, o tres en total del patrón multi-app, en este caso, Gatsby integrando con 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, estaré encantado de hacerlo. 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 propio tiempo. Traté de ser bastante detallado con las instrucciones. Vamos a ver qué pasó allí con el tema 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 es invá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... Ok. Así que mi volcado fue bueno excepto por la creación de la fecha actualizada. 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 usando 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 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 que luego 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 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 demostración de Food Advisor, le di el nombre, que en este caso en la plataforma 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, no code. Creo que he visto a mucha gente usando DynamoDB, creo. He visto a mucha gente usando DynamoDB, pero esa es la única vez que lo he visto. Por supuesto, me refiero a la configuración sin code. Oh sí, he visto fauna, también he visto tuna... Sí. Sí. Oye, todo esto, sí, no lo consideraríamos solo como alojamiento, quiero decir, parte de lo que estamos tratando de proporcionar es toda la orquestación que se necesita para reconstruir 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 ejecutarlo junto con todas mis tareas de CI existentes, todas las pruebas que he configurado para los entornos individuales, puedo esperar a que se implemente para luego realizar cualquier prueba de regresión visual u otras pruebas que deba realizar 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 alojamiento 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 configurar... Digamos que para mi entorno de producción, puedo configurar variables de entorno específicas para esta aplicación. Así que digamos que necesitaba algunas credenciales para ir a Shopify para trabajar en producción. Es posible que no quiera que esas se hereden por nada, pero muy bien podría crear un entorno de preparación del que luego hago hijos y darle sus propias credenciales de prueba de Shopify que también se heredarán en cada entorno de desarrollo, como parte de nuestra API. Entonces, ese tipo de cosas, la herencia, la abstracción de todas las tareas de DevOps simplemente supera a Git con la infraestructura como code que se gestiona. Entonces 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 security se aplican automáticamente. Así que tendemos a considerarlo más que solo alojamiento. Entonces, si voy a mi entorno de producción, puedo programar o realizar 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, ¿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 standards de cómo tu equipo de desarrolladores trabaja en un solo proyecto de manera fácil y segura en términos de security. Pero esta API se puede escalar a tantas aplicaciones como desees. Por lo tanto, puedes tomar este patrón desacoplado de un front-end y un back-end que tiene un back-end de CMS similar. Y puedes crear un producto SAS que luego inicializa tantos proyectos bajo demanda para clientes como desees. A partir del mismo proyecto, crear inicializar desde este repositorio 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 construirlos 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 solo ejecuta mis pruebas. Si alguno de ellos falla, necesita inspección. Pero si pasan, luego los fusiono en producción y mantengo tus dependencias actualizadas de esa manera. Entonces es una plataforma de DevOps, supongo que así es como 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í en él. 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 lo que estás trabajando, o se ejecuta, al menos, en la plataforma. Gracias a todos. Gracias a todos. ¿Sabes, ShedRack, 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 una 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 lea esto y tal vez eso sea todo. Necesitaba un poco de tiempo para entender la diferencia. Estoy libre. Creo que el código del taller para lo que ves lo hice. ¿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 tenía esa lógica incorporada para darte una URL de vista previa. Y así aprovecha eso para crear, lo cual parece. Así lo 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ísenme 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.