Dominar la canalización de Bitbucket para la integración y el despliegue continuos

1. Introducción: Hola a todos. Este curso se trata de dominar las tuberías Bitbucket para la integración continua y el despliegue continuo. Estaba mirando alrededor en cuota de habilidad y me di cuenta de que no había cursos específicamente para ductos Bitbucket. Usted oleoductos de bolsillo es a yo básicamente uso todos los días como parte de mi flujo de trabajo de desarrollo. Y ahora que la he estado usando por un tiempo y básicamente enganchada, me ahorra mucho tiempo de cosas que solía hacer manualmente. Y así espero poder compartir con ustedes mi experiencia y todo lo que he aprendido en el camino. Por lo que u2 puede beneficiarse ahorrando mucho tiempo en automatizar cosas como sus pruebas, su implementación y sus procesos de compilación. Entonces echemos un vistazo a lo que vamos a repasar en este curso. Antes de trabajar directamente con ductos, configuraremos nuestro entorno y NodeJS y comenzaremos usando un simple repositorio de placas calderas, luego crearemos un archivo YAML de canalizaciones Bitbucket muy básico. Para iniciar nuestra primera compilación, agregará complejidad a nuestra facturada mediante algunos pasos personalizados para construir la fuente del sitio y luego usar sep para implementar lo que se conoce como artefactos a nuestro servidor de elección obtendrá aún más complejo, agregando funcionalidad SSH y claves de acceso para que podamos hacer algún trabajo automatizado en el lado del servidor, se ramificará el repositorio Git en un desarrollo, puesta en escena en Master System y aprender a usar dinámicamente variables en cada rama se también integran notificaciones Slack personalizadas e incluso intentan algunos mecanismos de autocuración para cuando las cosas salen mal con el despliegue. A partir de ahí, el cielo es el límite para lo que quieres hacer con tus propias construcciones, despliegues y pruebas. Espero que el curso te parezca interesante, y espero que te unas a nosotros en menos de uno, donde veremos lo rápido y fácil que es empezar con ductos. También quiero mencionar que este curso está dirigido más a desarrolladores intermedios y superiores. Entonces desarrolladores que ya tienen algo de experiencia con repositorios de Git y scripting bash. Empezaremos sencillo y nos pondremos más complejos, pero solo quiero que sepas eso. Entonces creo que vamos a divertirnos mucho en este curso y espero verte ahí. 2. Configuración de ambiente: Antes de empezar a codificar, debemos asegurarnos de que todos estamos usando las mismas herramientas. Ya que vamos a estar usando un poco de nodo, vamos a asegurarnos de que nuestras versiones de nodo sean las mismas. Entonces si reviso la versión de MyNode, estoy usando la última de la versión diez, que es 10.19. Y npm también está aquí, 6.13.4. Si no tienes esta versión, puedes instalar nvm. Y luego ejecutarías nvm install v 10.19. Mi caso, claro que ya he instalado, pero eso instalará tanto nodo como NPM para ti. Eso está algo fuera del alcance de este curso. Pero si vas a la página de NVM GitHub, puedes bajar a instalar y actualizar. Tienen un script bash que te conseguirá la última versión. Si estás usando Windows, tendrás que instalar el nodo desde la fuente, la versión 10.19. Entonces para este curso, ya he preparado un simple repositorio git que podemos usar como ejemplo para construir nuestro primer ducto. Entonces podemos clonar eso ahora. Y pondré este enlace en las notas de la lección. Vamos a cd en esa carpeta y la abriremos en código de Visual Studio. Entonces esto parece que aquí hay un montón de cosas. Pero realmente todo lo que es es una copia de boilerplate HTML5, que es una bonita plantilla de huesos desnudos donde se puede empezar a crear prototipos y construir un wireframe para un sitio web sin tener que preocuparse por escoger un framework como Reaccionar o ver o lo que sea. Básicamente si lo sabes, CSS normalizado, tiene eso ahí dentro y algunas otras golosinas que básicamente unifica los estilos si visitas la página en cualquier navegador. Entonces cuando descargamos esto, vemos que solo obtenemos un archivo zip. Y cuando los desempaquetamos, obtenemos las mismas carpetas que tengo en mi proyecto. Entonces si volvemos al proyecto, vemos el mismo tipo de estructura. lo único que he agregado aquí, si entramos en índice, he añadido bootstrap para algunos estilos. Y luego de aquí, esto es, esto es de la calderilla, agrega tu sitio o aplicación de algodón aquí, todo el camino hasta la etiqueta de Google analytics, que tampoco se llena. Pero esto es solo algún contenido simple. Y podemos abrir eso en el navegador. Y vemos que tenemos un sitio básico con el que trabajar. Sin JavaScript, sin marco front-end. Y es algo receptivo. Seguro que ustedes pueden encontrar algo que no responde perfectamente aquí, pero es lo suficientemente bueno para empezar. Y se adaptará a su propósito para lo que vamos a hacer. Entonces en esta lección, lo primero que hicimos se aseguró de que todos estamos usando la misma versión de Node, reutilizando la versión del nodo 10.19. Después descargamos un simple repositorio git de ejemplo, que usaremos a lo largo del curso. Como vimos, se trata de una copia simple del repetidor HTML5. Y agregué un poco de marcado al índice HTML y también a hojas de estilo para una de bootstrap y otra de la mía propia. Entonces en la siguiente lección, comenzaremos y finalmente construiremos nuestro ducto. 3. Crear tu primera tubería: Entonces lo primero que tendremos que hacer es crear un repositorio Bitbucket, aunque clonamos el repositorio inicial desde GitHub, tendremos que crear un repositorio aquí y luego transferir la URL de origen del repositorio al repositorio creado aquí en Bitbucket. Entonces si no tienes una cuenta de Bitbucket, puedes crear una ahora, son gratis. Y luego una vez que tengas tu página de visión general del panel, puedes ir a Crear repositorio. Y voy a tomar el mismo nombre que el de GitHub. Y creamos. Por lo que tenemos nuestra URL. Tenga en cuenta que será diferente en función de su nombre de usuario. Y queremos copiar todo, pero sin incluir la parte git clon del comando. Simplemente queremos la URL. Entonces podemos revisar la URL actual del repositorio que acabamos de clonar con git remote dash V. Y vemos esa URL de GitHub. Lo vamos a actualizar con nuestra URL Bitbucket que se acaba de crear. Es decir, puedes comprobar que funciona emitiendo el mismo comando git remote. Entonces ahora que nuestro control remoto está configurado, finalmente podemos crear nuestro archivo de canalización. Y ese archivo tiene que llamarse canalizaciones de cubo. Yml. Por lo que yo sé, un archivo de tubería siempre comienza con las tuberías de comando. Después se definen las ramas. Como veremos en más lecciones del curso, es útil tener diferentes ductos en función de la rama en la que estás. Por ejemplo, puede que tenga un entorno de prueba o puesta en escena y luego tenga su entorno en vivo o de producción. Y el ducto tendrá que correr de manera diferente con base en esas ramas. Entonces si algunos de ustedes cavaron en el repositorio, tal vez hayan notado que ya nombré a la rama inicial que clonamos lección uno. Y se puede verificar eso ejecutando git branch a S V. Y se puede ver si en menos de uno. Por lo que en nuestro expediente de ducto, queremos señalar que con menos de uno. Ahora podemos sumar lo que se conoce como un paso. Y podemos agregar un nombre para nuestro paso. Y un guión. Ahora en ductos, bash siempre está disponible para ti. Entonces, por ahora, solo haremos un eco simple. Hola mundo. Guarda ese archivo, agregará todo. Git commit con un mensaje. Sólo para probar ducto. Y vamos a empujar eso. Genial. En los laterales repositorio. Si vas a la pestaña de la tubería y te desplazas hacia abajo, porque era la primera vez que empujamos un bit bucket pipeline archivo YAML, tenemos este tipo de vista. En nuestro caso, lo hemos configurado correctamente. Y así Bitbucket nos está diciendo que la configuración se ve bien. Y podemos despedirlo aquí. Si te has perdido un comando o una sangría, podría verse algo así. Dice que es inválido. Y tendrás un punto amarillo donde podrás pasar el rato. Entonces aquí dice mala sangría, pero a veces puede decir comando desconocido o algo no es reconocido. Realmente 99% de las veces es por la sangría. Y en realidad, hay una herramienta realmente bonita que puedes validar. Si realmente estás perplejo. Puedes copiar y pegar continuamente tu archivo de ductos en aquí hasta que diga que no es válido. Entonces si arreglamos esto solo para mostrar como ejemplo, válido. Y de nuevo, estos son inválidos. Por lo que puedes jalar por aquí con tu ducto hasta que sea válido. Y siempre puedes copiar eso y pegarlo aquí. De acuerdo, entonces habilitemos ductos. Y de inmediato, nuestra primera construcción está disparando. Genial. Por lo que fue exitoso. Lo realmente bonito con los ductos es que obtienes un registro de cada paso que ocurrió. Estos están incorporados la configuración y desgarro. No obstante, vemos que este es nuestro comando personalizado. Tenemos tanto el mando real en la tubería como el resultado de ese comando. Entonces veremos cómo esto es útil más adelante en la depuración cuando haya errores en la canalización o algo sale mal en el servidor. Entonces en esta lección, creamos nuestro primer archivo de tubería con solo un simple eco. Eso inicializamos a través de la pestaña de ductos. Vimos los eventos de tala. Y también vimos cómo puedes validar tus ductos Bitbucket con este validador de ductos Bitbucket, que publicaré en las notas de la lección. Ahora que nuestra tubería está enganchada a bitbucket, podemos empezar a construir ejemplos más complejos y vamos a pasar a eso en la siguiente lección. 4. Uso de SCP para transportar artefactos desde la construcción: Por lo que ahora veremos cómo implementar lo que se llaman artefactos en nuestra canalización Bitbucket. Y los artefactos son realmente nada más que archivos y carpetas especialmente definidos que Bitbucket sabe guardar una copia y que puedes manipular más adelante. Entonces realmente hay dos pasos principales en este proceso sep. El primero es producir realmente los artefactos y decirle a Bitbucket que esos son los artefactos. Y el segundo es realmente copiar esos artefactos a su servidor de destino. En este caso, estaré usando una gotita Digital Ocean, que es solo una caja remota de Linux. Por lo que los artefactos son especialmente útiles en procesos de construcción que solo producen contenido estático. Por ejemplo, Create React app o una compilación de script tipo. Y también son útiles para cuando la compilación es particularmente pesada computacionalmente o lenta. Tengo que usarlo mucho, por ejemplo, porque la gotita que mencioné es del tamaño más pequeño. Y me parece que intentar ejecutar comandos de compilación directamente en el servidor puede resultar en tiempos de espera y que el servidor simplemente no tenga suficiente memoria para hacer la compilación. Por lo que antes de escribir algún comando en la canalización, queremos crear una nueva rama llamada Lección dos. Si quieres seguir adelante, puedes crear la sucursal ahora. O si quieres simplemente saltar al código de trabajo final, simplemente puedes cambiar a esa rama desde la versión clon de GitHub que tiene la fuente completa. Entonces lo haremos ahora. Lección de checkout de Git. Genial. Por lo que podemos ver sucursales sólo para volver a comprobar o en menos de dos. ¿ De acuerdo? Y de nuevo, estamos trabajando con esta base de código HTML estático. Por lo que se puede servir sólo sirviendo índice HTML por sí mismo. Y para simular una especie de proceso de construcción falsa, vamos a definir una carpeta llamada dist. Y como con cualquier framework donde tendrías un disco o carpeta de compilación, por ejemplo, con una compilación de script tipo o aplicación Create React, quieres ignorar ese archivo. En get. No queremos estar comprometiendo los archivos producidos en nuestro repositorio. Por lo que también crearemos un nuevo archivo gitignore y simplemente agregaremos dist para que podamos volver a nuestro ducto. Y ahora que estamos en la lección para ramificar, necesitamos definir que el nombre de la rama y definir nuestro paso de artefactos. Entonces lo voy a llamar nombre como proceso de construcción algo falso. Tan solo para simular de nuevo que estamos, estamos moviendo algunos archivos a nuestra carpeta dist, que son la compilación real. Archivos, porque sólo estamos simulando este proyecto de ley. Todo lo que tenemos que hacer es copiar toda la base de código en esta carpeta dist. Entonces, al principio, podrías pensar en usar Cp como un simple comando bash para hacer eso. Pero no queremos realmente copiar la propia carpeta dist en dist. Y entonces, te meterás en un bucle básicamente recursivo y no funcionará. Por lo que hay una buena alternativa para usar nuestro fregadero donde puedes evitar ese bucle recursivo. Y así lo que podemos hacer es nuestro guión de sincronización AB, conseguir la barra de progreso. Y esta es la fuente, por lo que la raíz del proyecto. Y queremos copiarlo en dist. Pero queremos excluir esto. Para que ese comando lo haga. Y entonces necesitamos por supuesto definir artefactos E, que serán dist y todos los archivos y subcarpetas. Tan doble estrella. Por lo tanto, típicamente en este paso de guión en un, usando un, un framework como Node o script de tipo, se ejecutaría la instalación de nodo y la compilación de nodos, prueba de nodo. Esos comandos se sentarían ahí. Y entonces seguirías definiendo tus artefactos. Y también puedes definir múltiples artefactos Si tienes más que un solo directorio. Por ejemplo, si tuviera algún otro archivo TXT de salida, por ejemplo, los enumeraría continuamente después de este identificador de artefactos. Y luego por supuesto hay un segundo paso que en realidad está implementando esa carpeta de disco al servidor. Entonces y eso lo nombraremos. Ups. Y el guión aquí es un poco especial. En última escena tiene un SCP construido en el que se puede utilizar que es este. Y luego también necesitas definir las variables para este comando scp. Whoops. Por lo que necesitas un servidor de usuario. El camino remoto, que pondré en la fuente web estándar de Linux bajo una carpeta llamada Skills share SEP test. Y la ruta local es relativa a esta base de código o al propio repositorio, que es dist. Y también queremos todos los archivos y carpetas. Por lo que estos dos pasos nos deben hacer ir con la SEP. Lo único que falta ahora es que realmente tenemos que configurarnos como CP, por lo que va a funcionar. Entonces ahí hay dos cosas. Primero necesitamos definir el usuario y el servidor objetivo para donde queremos desplegar. Y también necesitamos configurar las claves SSH. Por lo que Bitbucket tiene acceso a nuestro servidor. Por lo que dirigiéndonos a nuestra página de repositorios, queremos entrar en la configuración del repositorio. Y primero añadiremos esas variables de Repositorio, el usuario y el servidor. Y también debo mencionar que esto siempre que tengas un signo de dólar con un nombre de variable, eso es decirle a Bitbucket que busque en estos pares de valores clave de las variables del repositorio. Entonces por ahora solo necesitamos al usuario y servidor, pero teóricamente puedes agregar tantos como necesites. Y por supuesto, estos son muy útiles para, para, para cosas como esta, donde la seguridad y la privacidad es importante y no quieres codificar estos valores directamente en tu canalización. Entonces para mi configuración, soy root. Se puede haber asegurado en el servidor. También pegaré aquí, y también lo haré asegurado. De acuerdo, tenemos nuestras variables de servidor y usuario, y ahora necesitamos configurar la clave SSH. La forma más fácil de hacer eso es solo tener bucket generar las claves para ti. Entonces haremos clic en eso. Y bitbucket crea un par de claves públicas privadas. E incluso te dicen exactamente qué hacer. Copia esta clave pública a las claves autorizadas SSH en el host remoto. Entonces lo haremos ahora. Por lo que tengo un alias para iniciar sesión directamente a mi gotita. No quiero revelar mi epi y acceder ahí, pero al menos ves aquí puedes ver root que fue nuestro usuario. Y vamos a ir a ese camino. Y abriremos el archivo de claves autorizadas. Entonces ya tengo algunas claves públicas aquí, algunas son para, así que ya tengo algunas claves públicas aquí, algunas de las cuales en realidad son para otros proyectos de tubería Bitbucket. Por lo que ya tengo algunas claves públicas aquí, algunas de las cuales ya se están utilizando para diferentes ductos de construcción en diferentes repositorios. Pero vamos a pegar el nuestro aquí ahora mismo. Basta con pulsar Enter. Mira, está bien. Salir con control X y guardar. Mismo Archivo. Está bien, genial. Por lo que también es una buena idea buscar y validar la huella dactilar de los anfitriones conocidos. Por lo que agregaré la mía es la misma IP o URL que utilizarías en las variables, las variables del repositorio para el servidor. Y podemos buscar la huella digital. Y antes de agregar el host, podemos simplemente saltar rápidamente en el servidor y validar que esto es correcto. Entonces para hacer eso, nuevo, voy a SSH en mi, mi caja Linux. Y para ello, podemos escribir un simple bash for-loop para obtener el hash md5 para todos nuestros archivos de clave pública. Eso se ve así. Y pondré este comando en las notas del curso. Para que podamos mirar. Tengo este F9 EC y el 9171 F9 EC. Sí. Ese es nuestro hash MD5 ECDSA. Por lo que podemos seguir adelante y agregar este anfitrión. Una última cosa que tenemos que hacer, dondequiera que estés sirviendo de esos archivos es asegurarnos de que exista este directorio. Por lo que vamos a cd en Var www y crear ese directorio. Por lo que podemos comprobar eso como su perfecto. De acuerdo, y eso debería ser suficiente trabajo por ahora que tenemos que hacer en el servidor remoto. Entonces ahora que estamos de vuelta aquí en nuestro repositorio local, deberíamos poder empujar el código ya que ahora está en rama menos de dos. Y debe ejecutar los pasos. Entonces vamos a probarlo. Agrega nuestros cambios. Y luego nos comprometemos con un mensaje. Primera prueba de SCP y empujar eso. Tenemos que decirle al remoto que el origen también debe tener menos de dos ramas. Entonces si saltamos a nuestros ductos, podemos ver que fue exitoso. Y de nuevo, la buena ventaja aquí es que obtenemos el mismo registro de consola. Ya que hemos pasado esta bandera de progreso con rsync, vemos el mismo registro que haríamos si ejecutamos ese comando localmente en el repositorio. Y también despliega con éxito la carpeta aquí. Entonces para volver a comprobar, volvamos a subirnos a nuestro servidor. Y de nuevo, los ponemos en lejos WW habilidad share prueba SEP. Y sólo enumeremos lo que tenemos aquí. Genial. Por lo que este proceso de construcción bajo menos de dos ramas está funcionando con éxito. Estamos en la nube, no localmente. Estamos en la nube copiando todos estos archivos a una carpeta de disco, que se define como un artefacto, y copiando el contenido de esa carpeta a esta ruta remota. Y aún queda un paso final que tenemos que hacer en el servidor. Y eso es que en realidad tenemos que servir estos archivos y comprobar que están siendo atendidos adecuadamente. Una vez que hagamos eso, tendremos una construcción de integración continua completa, aunque sencilla. Por lo que en la siguiente lección, veremos cómo podemos SSH en el servidor en nuestro Build Pipeline y ejecutar los comandos que necesitamos para asegurarnos de que index.html se esté sirviendo. 5. Uso de SSH para ejecutar los comandos en el servidor: Entonces en la última lección, aprendimos cómo desplegar artefactos en nuestro servidor de producción. Ahora necesitamos ejecutar algunos comandos adicionales para servir realmente los artefactos que desplegamos para poder verlos en una URL pública. Entonces de nuevo, lo primero que tenemos que hacer es ramificarnos en una nueva lección, rama, lección tres. Y en realidad podemos copiar los pasos exactos de la Lección dos, los dos primeros pasos. Y estaremos sumando nuestro tercer paso. Por lo que queremos servir este contenido estático. E idealmente, tendría un servidor funcionando constantemente, por ejemplo, un servidor Express. Y luego configurarías un proxy usando una herramienta como Apache o el motor X para exponer eso. Llegaremos a ese tipo de cosas en futuras lecciones. Pero por ahora solo queremos mostrar cómo emitir comandos SSH para poder hacer esto. Y dos herramientas que hacen que esto sea bastante fácil son MPM serve handler y n paquetes Grob. Y juntos se podrá servir este contenido estático y también exponerlo a internet para que podamos ver nuestro sitio en una URL pública. Por lo que ya armé un simple archivo index.js, que pondré en las notas de la lección. Ya que es una especie de fuera del alcance de este proyecto. Entonces crearemos aquí, y solo copiaré y pegaré eso aquí. Básicamente, lo que está pasando es que iniciamos un servidor usando el middleware del manejador de servimos. Y para los interesados, manejador de servimos es el núcleo del servicio, que es la forma sencilla recomendada en la que puedes servir. Por ejemplo, una compilación de la aplicación Create React. Tan sólo una CLI simple donde dices nombre de carpeta servir en esa carpeta se sirve, pero esto es lo que está sucediendo en segundo plano. Eso es un middleware para el paquete HTTP Node estándar. Y luego paso dos, conecto n grok a ese puerto y me quedé 5 mil como Servir. El comando CLI sirve utiliza 5 mil como valor predeterminado. Por lo que acabo de mantener que no hay razón especial. Y fin grok expondrá al puerto local 5 mil a internet. Por lo que con nuestro index.js configurado y está listo para ejecutarse, ahora podemos definir el tercer y último paso para este proceso de compilación. Entonces otra vez, omega paso derecho. Y le daré un nombre bastante explícito. Servir estáticamente al manejador del servidor y exponerlo a internet vía ira. Ok. Y volverá a estar teniendo un guión aquí. Y en la última lección, ya que ya definimos usuario y servidor, podemos por supuesto utilizarlos en este paso también para nuestro SSH, solo usuario SSH en servidor. Y entonces podemos pensar en el comando que necesitamos emitir. Entonces primero necesitamos llegar a la raíz de donde está nuestro contenido estático. Habilidad compartir prueba de SCP. Y lo haremos Y, y lo que significa en serie. Por lo que eso significa bash asegura que este comando se completa y luego pasa al siguiente. tanto que un solo estaría en paralelo. Pero CD es importante para nosotros estar en el directorio primero antes de emitir este siguiente comando, que es npm install. Y vamos a instalar las dos herramientas que necesitamos para ejecutar, nuestro index.js, que es servir, handler y grok. Y de nuevo, eso es algo que queremos hacer en serie. Queremos esperar a que se complete. Y luego podemos ejecutar el nodo index.js. Podemos ahorrar eso. Y si miramos index.js, podemos ver pongo algunos logs de consola aquí. Por lo que podremos ver eso en la interfaz de usuario de bitbucket. Y al final del día, obtendremos una URL n grok y deberíamos poder visitar esa URL. Así que algo es algún tipo de hash. Y luego n tengo I0. Por lo que veremos en la interfaz de usuario de bolsillo y podremos visitar eso y ver nuestro sitio. Ojalá, vamos a empujar esto. Ahora. Digamos que ahora somos capaces de emitir comandos vía SSH. Y vamos a empujar. Genial. Y así vemos que aquí se expone el túnel de caída. Por lo que sólo podemos hacer clic en eso. Y genial, y tenemos nuestro sitio. Por lo que mientras funciona este tercer paso final en nuestro proceso de despliegue continuo, hay un ligero hipo en ese nodo. Index.js nunca le da al cubo de escupir una señal el final. Y así el proceso de construcción nunca se da cuenta de que se completa. Y eso es por supuesto malo si estás teniendo un límite de minutos en el entorno de compilación Bitbucket. Entonces vamos a introducir una nueva herramienta que puede ejecutar estos procesos en segundo plano y eso es para siempre. Por lo que simplemente agregaremos eso a nuestra lista de paquetes para instalar localmente. Y en lugar de usar Node, emitimos para siempre inicio index.js. Pero al editar este comando, notamos que hay una especie de problema diferente. Y eso es tan pronto como tu aplicación crece y tienes que hacer comandos más complejos y tal vez incluso considerar diferentes entornos. No podemos estar escribiendo un comando en línea y a nuestro Build Pipeline para siempre. Y así una buena manera de refactorizar esto es recolectar este script en un script bash. Entonces tomaré esto y podremos crear un script bash llamado deploy. Pega eso en. Y podemos poner estos en múltiples líneas para su legibilidad. Ahorrando eso. Ahora en lugar de esa gran cadena de comandos, simplemente podemos ejecutar nuestro script bash. Pero hay que recordar que este script bash se moverá a la carpeta dist, que se convierte en la carpeta estática raíz. Por lo que primero necesitamos volver a cd en esta habilidad comparte CP carpeta de prueba. Y luego podemos llamar en Bash desplegar SH. Por lo que vamos a agregar que factorizar comandos SSH en el script de despliegue. Vamos a empujar. Genial. Entonces sí vemos algo de salida desde siempre. Pero es importante notar que sí perdemos eso y grok info. Y también estaría bien que no siempre tuviéramos que venir a nuestra UI de Bitbucket para ver los registros de nuestra factura. Y así deberíamos buscar una buena forma de mensajería y haremos exactamente eso en la siguiente lección. Donde nos engancharemos a una holgura comprada, donde podamos enviar mensajes desde nuestro proceso de construcción. 6. Crear un bot de mensajes de Slack para añadir una función de mensajería de mensajes: En la lección anterior, construimos nuestra primera construcción completa de integración continua. Y hacia el final de la lección, recordamos algunos comandos de Bash en un script, que fue capaz de completar una salida limpia para Bitbucket. Pero vimos que perdimos cierta información de tala. Pero a la larga, mirar siempre la información de registro para información crítica como la URL publicada es un poco engorroso. Y así queremos construir un sistema de mensajería para acceder a esa información de manera más fácil y más fácil de usar. Entonces vamos a hacer eso creando una holgura comprada. Entonces ya abrí la URL, eso es api dot slash.com slash mensajería slash web hooks. Y el primer paso es crear tu app de Slack. Por lo que voy a dar click en eso. Y ya he ingresado. Ya tengo una cuenta de holgura. Y voy a llamar a esta habilidad compartir. Desplegar bop. Y crearé esa app. Y queremos entrar en ganchos web entrantes, pueden activarlos. Y el primer ejemplo aquí ya está en formato Bash. Entonces vamos a añadir un nuevo gancho web para que podamos obtener esa URL. Y voy a crear rápidamente un nuevo canal llamado Prueba de Skill Share. Creo que necesito hacerlo. Lo agregaremos al canal de pruebas de habilidades compartidas, haga clic en permitir. Y genial, obtenemos una URL de gancho web real. Entonces como dije, esto ya está en formato Bash. Entonces podemos seguir adelante y como primer ejemplo, ir a la derecha en nuestro script de despliegue. Y primero pondremos esto como r Podemos cambiar el texto a punto CI inicial, punto, punto. Asegúrese de agregar eso. Y, y para continuar con los comandos. Y también pondremos el final ci completo. Y no necesitamos este último día y vamos a guardar eso. Y ya he ido adelante y he creado una lección para rama. Por lo que tenemos que añadir eso. Y la construcción en sí sigue siendo exactamente la misma. Nos acabamos de enganchar a este gancho web como un, como efecto secundario. Y así tenemos que significar lección para, para esta rama. Y deberíamos poder sumar eso. Y ahora que hemos empujado, eso debería disparar fuera de la construcción. Y deberíamos ver nuestros mensajes en holgura. Entonces vemos el CI inicial y vemos que completo. Por lo que hemos empatado en nuestro script de despliegue. Pero nuestro objetivo original era también conseguir el enlace de grok final del script index.js. Y de nuevo, estoy tratando de mantener este curso se ha enfocado en ductos lo más posible. Entonces simplemente pegaré el código aquí y describiré rápidamente lo que hice. Esencialmente, he escrito una versión de nodo JS de este comando curl. Necesitamos establecer los encabezados JSON de la aplicación y pasar los datos JSON como un valor clave con texto y una cadena. Y por supuesto publicado en la URL dada. Y así he requerido el paquete de búsqueda del nodo y he creado una función de envoltura alrededor de él, donde todo lo que tienes que hacer es pasar el mensaje de cadena. Por lo que tenemos post nuestra aplicación cabecera JSON. Y para el cuerpo nos stringirimos con el Valor Clave, Texto y mensaje. Y para ilustrar que he configurado la función al lado del console.log. En realidad, probablemente podamos eliminar estas líneas console.log o escribir en un archivo de registro local en el servidor. Pero por ahora sólo lo dejaré. Por lo que debemos ver como resultado todavía estos dos mensajes. Y luego además. El funcionamiento en el anfitrión local 5 mil y n túnel grok. Y finalmente conseguiremos nuestra URL en holgura porque he agregado node fetch, tendremos que agregar eso a nuestro script de despliegue como paquete. Y eso debería hacerlo. Y podemos ver que estamos recibiendo esos lo que antes eran registros de consola ahora un slack mensajes. Y a pesar de que pasamos esto, así como una cadena normal para holgar, la holgura es lo suficientemente inteligente como para reconocer que estas son URLs y las formatea para nosotros. Incluso puedes hacer otras cosas como pasar emojis y hacer algún formato simple como negrita y cursiva. Pero les dejo eso que busquen en los muelles. Pero revisemos nuestro enlace para ver si está funcionando. Y perfecto. El sitio está arriba. Para aquellos de ustedes que han estado codificando hasta ahora. Es posible que hayas notado que hay un pequeño problema con nuestro script de despliegue y nuestro index.js. El problema es que este script iniciará un proceso de nodo escuchando en 5 mil. Y cuando emitamos forever start index.js forever intentará iniciar una nueva instancia de nodo en este script. Y eso en realidad se estrellará porque ya hay un proceso a los 5 mil. Y así en este caso, siempre tiene un buen comando en lugar de empezar a usar restart. Y lo bonito aquí es que comprobará para ver si ya se está ejecutando un proceso en esta carpeta con index.js. De no ser así, lo inicia, pero si se está ejecutando, lo reiniciará. Por lo que corriendo para siempre reiniciar. Arreglaremos ese tema para una limpieza final aquí arriba. También debemos mover esta URL a una variable de entorno. No demasiado riesgo para la seguridad, pero si alguien se apoderara de este enlace, puede enviar spam a tu canal de holgura, lo cual sería un poco molesto. Por lo que en el caso de Node, podemos quitar esto. Y esto se convertiría en algo así como procesados dot n dot Slack web URL. Y también deberíamos hacer el equivalente en el script de despliegue. Por lo que estos dos, voy a renombrar Slack, web hook URL. Y por supuesto esta sintaxis. Nos trae de vuelta a las variables del repositorio. Por lo que podemos agregar esa URL de gancho web de Slack y pegar eso en y también hacerla segura. Y hay un último paso que tenemos que hacer. Por lo que la variable del repositorio no es directamente utilizable aquí en este script, sino que está disponible en el bitbucket canalizaciones dot archivo Gamow. Por lo que podemos pasarlo en realidad como argumento. Y cuando se pasa al guión. Como el estándar bash es. El primer parámetro es signo de dólar uno. Y así utilizar el mismo nombre en este script así como en el proceso de nodo. Podemos exportar una variable del mismo nombre para que sea equivalente a ese perímetro. Y debido a que Forever tiene sus propias variables de entorno, también necesitamos pasar este mismo comando frente a la llamada para siempre. Y esta sintaxis tampoco funcionará con el reinicio. Tiene que ser con inicio. Y así haremos un par lo hará primero Forever, detener index.js y reiniciaremos con el parámetro correcto. Ahora hay una última cosa que debemos hacer. Y eso es como estamos pasando la variable del repositorio en esta cadena SSH, para que esto se evalúe correctamente a la variable real, necesitamos usar comillas dobles. Y eso debería hacerlo. Y podemos ver que la edificada terminada. Y hemos refactorizado eso con éxito. Y funciona exactamente igual. Vamos a revisar este mensaje más reciente. Genial, ese es nuestro sitio estático. Y para estar seguros de que no hay otro proceso separado en ejecución, lo cual no esperaríamos. Esto debería llevar a algún tipo de error. Exactamente. Entonces n grok ya no está corriendo. En esta URL. Nosotros con éxito, he creado un nuevo acceso a nuestro sitio en esta URL más reciente. Entonces todo parece estar funcionando. Por lo que en esta lección, refactorizamos nuestra URL de gancho web flack codificada de forma dura a una variable de repositorio. Y vimos que para que esto sea accesible mientras se ejecuta en el servidor, tenemos que pasar eso usando comillas dobles en la cadena SSH. Y también tenemos que, por supuesto establecer esta variable, este par de valores clave en la interfaz de usuario de las variables del repositorio en el sitio bitbucket. Incluso después de pasar en esta variable, que es signo de dólar uno, también tuvimos que pasarlo para siempre. Y con este tipo de sintaxis, los parámetros sólo se pueden establecer con inicio para siempre. Entonces hacemos un par de parada para siempre y para siempre empezar. Por lo que podemos ver que este tipo de maquetación es un poco compleja. Y cuando estamos trabajando con un marco más complejo como script de tipo, podemos aprovechar varios n archivos, como un entorno de desarrollo, entorno escena y un entorno de producción. Para evitar este tipo de pares de comandos, todo fluirá muy limpio desde un archivo JSON de entorno. 7. Bootstrapping con Crear Reacción con la aplicación: En la última lección, pulimos enviar mensajes en ciertos puntos de la tubería a través de holgura. Pero vimos lo engorroso que es tratar con una sola variable de repositorio. Y qué difícil es cuando estamos haciendo nuestras propias herramientas. Y aún no nos hemos alejado de ese código original HTML cinco tipo Boilerplate. Por lo que las técnicas de ducto que hemos utilizado hasta el momento están bien y los conceptos funcionarán con cualquier proyecto. Pero debemos examinar qué podemos hacer con un ejemplo más complejo. Usando React y escriba script. Podemos aprovechar las herramientas que tienen esos lenguajes y las herramientas construidas a su alrededor para que nuestros ductos sean aún más limpios. Y también estaremos diseñando finalmente un ducto con una verdadera construcción en esta lección. En este caso, el comando npm run build desde la aplicación Create React. En primer lugar para esta lección, estaré creando tres ramas para simular un flujo de trabajo completo de CD CI, que son desarrollo, puesta en escena y master. Entonces vamos a crear primero una Rama completamente vacía. Ya que no estaremos siguiendo ni tomando ningún código de nuestro sitio HTML5. Por lo que crearemos una sucursal huérfana. Y queremos empezar con una pizarra limpia aquí. Entonces vamos a eliminar todos estos archivos. Y genial, eso nos hemos quedado, pero eso se ignora de todos modos. Para que yo pueda deshacerme de eso también. De acuerdo, y estamos listos para bootstrap con la aplicación Create React. Entonces eso es n px. Crear aplicación React. Dislocación y genial. Por lo que la creación del reactor bootstrap terminó. Y podemos empujar todo esto como nuestro compromiso inicial para este nuevo proyecto, por así decirlo. Y también queremos asegurarnos de que nuestras sucursales de puesta en escena y master tuvieran la misma base de código para empezar también. De acuerdo, así que desarrolle, Maestro, y puesta en escena todos tienen la misma base de código. Y ten en cuenta que esta configuración es un poco especial ya que quiero mantener todo el código del curso para ti en el mismo repositorio en un proyecto normal, master se crea por defecto con git init. Y así solo tendrías que crear, desarrollar rama y puesta en escena. 8. Definir archivos de entorno y utilizarlo en un componente: Así que vamos a entrar en algún código aquí. En la última lección, nos preocupaba hacer malabares y pasar variables de repositorio alrededor. Entonces para hacerlo de una manera más limpia, podemos definir algunos archivos de entorno para cada una de estas ramas que tenemos. Entonces primero crearé una carpeta final en la carpeta fuente. Y voy a poner en para archivos de entorno, estándar EN dot JSON y, y desarrollar dot JSON puesta en escena de Jason y Esther. Y como ejemplo de inicio sencillo, pondremos una clave de nombre de sitio en cada JSON. Entonces para el desarrollo, decir algo así como pensar en esto como un título. Sólo por un ejemplo para empezar. escena sería como y también lo llamaría el sitio de pruebas. En el maestro estaría el sitio de producción. Y por ahora tomaremos el JSON de desarrollo como nuestro JSON final. Por lo que tenemos estos diversos entornos, pero va BB, el punto n punto normal JSON que utilizaríamos a lo largo de nuestros componentes en el resto de nuestra app. Y así, por ejemplo, si le pasamos al archivo TSX de la app, puedo importar ese archivo JSON, solo llámalo n. Y el beneficio con Visual Studio Code y Type Script es que tipo script sabrá lo que tienes en tu AnyObject. Por lo que puedes hacer algo así como ya sabe nombre del sitio es una propiedad ahí. Por lo que para usar nuestro entorno de desarrollador localmente, podemos agregarlo al comando pre start en package.json. Y esta es una convención de nomenclatura npm, lo que significa que antes de disparar el comando start, ejecute lo que esté en el comando restart. Y para eso, simplemente queremos, esto es bash. Queremos copiar pn dot JSON al archivo principal. Y ahora si encendemos npm start, pre inicio se disparará. Se va a copiar esto desarrollado en N, que tenemos, ya lo hemos hecho manualmente. Pero deberíamos ver en el título, el sitio local de desarrollo. Entonces vamos a darle una oportunidad a eso. Genial. Entonces mi título es sitio local de desarrollo. 9. Utilizar los entornos en un archivo de tubería de Bitbucket: De acuerdo, pero no estamos aquí para escribir scripts package.json. Estamos aquí para aprender sobre las tuberías de bitbucket. Por lo tanto, incorporemos estos entornos a nuestro ducto. Ya que estamos en una pizarra totalmente nueva, necesitamos crear un nuevo archivo de canalizaciones de cubo. Y todo empezó como hicimos el otro en el ejemplo original. Y aquí normalmente tendrías tu puesta en escena y maestro. Y entonces tendrías tus órdenes dentro. Pero debido a que estamos usando esta configuración especial basada en lecciones, tenemos estos nombres de sucursales. Entonces al igual que agregamos al comando pre start, que es para nosotros para el desarrollo local. Queremos hacer exactamente lo mismo, pero con la puesta en escena en ambientes maestros respectivamente. Por lo que diremos copia entorno de puesta en escena también. Jason. Y mismo guión, solo archivo diferente. Y puesta en escena que Jason a fuente y JSON. Y lo mismo aquí para Master y sólo voy a copiar pegar y tomar ese archivo maestro. Entonces como las variables están fluyendo de este archivo final, es importante que este sea el primer paso o uno de los primeros pasos. Si estás haciendo otras cosas. Antes de hacer cualquier construido, queremos que nuestras variables se establezcan correctamente antes de construir o probar o cosas por el estilo. Entonces ahora definamos realmente los pasos construir un artefacto. Esencialmente los mismos conceptos que con nuestro sencillo sitio estático. Pero es un poco más complejo porque también queremos enviar nuestros módulos Node así como la carpeta Build que reacciona Create, React app crea. Por lo que en realidad voy a pegar justo en los pasos que definimos antes en refactorarlos para este proyecto de app Create React. Entonces en lugar de un proceso de construcción falso, vamos a decir un proceso de construcción real. Y ese script es simplemente npm run build. Y tenemos unos cuantos son artefactos aquí. Tendremos nuestra carpeta de compilación, que es por defecto que tiene la aplicación Create React. Y la carpeta de módulos MPM. Y también que aún no hemos creado, un servidor JS índice. 10. Refactoring del servidor de ngrok para el proyecto de React TypeScript: Y este servidor de índice JS, en realidad voy a pedir prestado también del ejemplo de sitio estático HTML5. Sólo porque creo que n grok hace que sea muy fácil conseguir tu sitio en una URL pública muy rápidamente y es genial para crear prototipos. Entonces voy a crear un index.js aquí como nuestro archivo de servidor. Y también voy a copiar eso, copiar y pegar el ejemplo en. Por lo que ya podemos aprovechar nuestros entornos que hemos creado aquí. En lugar de definir un puerto fijo. Eso es algo que también podríamos agregar a nuestro entorno JSON. Por lo que voy a reemplazar eso en todas partes con puerto de punto nth. Y claro que tenemos que importar eso. Y, por supuesto, debemos agregar la nésima clave. Podemos empezar en 5,001 para desarrollar y luego simplemente subir. Otra vez. Simplemente mantendremos ese maestro es de $5.3 puesta en escena 502. Y podemos incluso, también se puede agregar como pista. Y estos registros de consola. Esta otra modificación antes de que estuviéramos usando el manejador de servicio directamente en el directorio de trabajo. Pero cómo vamos a definir nuestro ducto, vamos a poner este archivo de servidor al lado del directorio de compilación que se crea. Y así hay un tercer parámetro aquí, que es un objeto de opciones. Y esa opción es la opción pública, que es construir. Y hay una cosa más que podemos agregar también, nuevo, aprovechando estos archivos JSON de entorno. Y eso es esto. Tenemos la ventaja ahora. Si quisiéramos crear múltiples URL de holgura para cada una de nuestras sucursales, por ejemplo, si quisieras comprar para puesta en escena y querías un bot para master, que podrías poner en canales separados. Podrías hacer eso con esta configuración de entorno. Y así en lugar de pasar el valor real, pasamos la clave de la variable de entorno dos, el punto de proceso n. Y lo llamamos la clave para significar que este es el nombre de la clave. Entonces por ejemplo, tendrías para el desarrollo, o tal vez tú, quizás ni siquiera tengas uno en desarrollar. Puede dejar eso vacío. Copia eso también. En master. Puedes llamarlo, Llamémoslo Habilidad Compartir, libro de trabajo maestro. Y luego por puesta en escena, puesta en escena, barco web Slack. De esta forma, podrías tener múltiples URL o mantener el mismo nombre clave y simplemente mantener el que ya hemos creado. Voy a salvar todos esos. 11. Refactoring de la tubería para el proyecto de React TypeScript: Por fin volvamos a la tubería. Entonces hemos definido nuestros artefactos. Hemos refactorizado index.js para trabajar con las variables de entorno que tenemos. Y ahora tenemos que desplegar cada uno de estos artefactos con SEP. Y es importante que tengamos una carpeta diferente aquí. Entonces ahora llamaré a esto, tendré un script tipo. Lo llamaré Skill Share tipo script puesta en escena. Y la compilación que queremos poner en realidad en la carpeta de compilación. Construir carpeta. En módulos NPM. Encontremos error allí no Módulos también está vivo en el mismo nombre de carpeta. Y el index.js. Simplemente iremos en la raíz de esta carpeta en el servidor. Y eso debería hacerlo. Podemos copiar estos cuatro pasos y usarlos para un maestro también. El único cambio aquí es que tendremos una carpeta diferente llamada éster. Por lo que primero quiero subirme a mi servidor y asegurarme de que esas carpetas existan. Entonces voy a hacer la carpeta de puesta en escena y también la carpeta maestra. Y también dentro de cada uno, necesito hacer el directorio de compilación y también el directorio de módulos de nodo. Eso debería hacerlo. Puedo retroceder del servidor. Y el paso final aquí es agregar una imagen de nodo. Entonces antes nos salimos con la suya sólo con el uso de scripting bash, porque sólo teníamos que hacer alguna manipulación de carpetas con esos archivos estáticos. Pero aquí en realidad estamos ejecutando la reconstrucción de NPM en la nube. Entonces Bitbucket necesita saber, bueno, ¿qué versión de nodo quieres usar? De lo contrario utilizará su valor predeterminado. Entonces como dije al inicio del curso, estamos usando el nodo 10.19. Esa es la directiva de imagen dentro de los ductos archivo YAML. Y también podemos agregar en el proceso de compilación bajo nombre una directiva de caché y especificando nodo. Y esto significa que si ya hemos descargado esta imagen para Node, y bitbucket ve eso, entonces usará esa imagen. No se volverá a descargar cada vez. Por lo que esto acelera tu proceso de compilación y te ahorra minutos de construcción. Por lo que también voy a añadir eso al maestro. Y un paso que casi me olvido en el proceso de compilación es instalar realmente los módulos NPM con npm install. Entonces agrega eso tanto a la puesta en escena como a la construcción de rama maestra. Por lo que también me di cuenta de que estaba escribiendo miedo final. Este debería ser puerto como puerto de punto nth, no n punto n. Así que déjame arreglarlo rápidamente. Y también cambié el entorno web hook Clave a la puesta en escena para el desarrollo que sólo para que podamos ejecutar esto localmente para ilustrar lo que va a hacer en el servidor. Tampoco podemos olvidar instalar las dependencias que necesitamos aquí para ejecutar nuestro servidor. Entonces lo haremos ahora. Guardar. Por lo que necesitamos servir manejador. Http está incorporado, por lo que no necesitamos eso. Y nodo fetch. Y estos se guardarán en el paquete.json. Por lo que BitBucket verá el mismo paquete.json e instalarlos igual. Y así como una prueba, podemos ejecutar el servidor ahora mismo. Genial, así que obtenemos los registros de la consola. Y deberíamos ver los mismos mensajes en nuestro flack. Sí. Este B32 y grok. Eso debería ser lo mismo que sí, exactamente, exactamente. Debido a que nuestro servidor requiere este archivo de entorno, también necesitamos transferir eso. Por lo que básicamente podemos copiar esto. Tan sólo otro sep. Simplemente podemos definirlo como un artefacto. Si queremos mantener la misma estructura. Y podemos hacerlo así. Y lo mismo. De nuevo, para el maestro. Este soporte es diferente. Entonces por supuesto, cuando empujemos a menos de cinco desarrollarse, no pasará nada con nuestra construcción porque sólo hemos definido un ducto para la rama de puesta en escena y maestro. Entonces fusionemos eso ahora y veamos qué pasa. Pasaremos a la escena en escena y nos fusionaremos, desarrollaremos y empujaremos eso. Por lo que nuestro proceso de construcción ha funcionado hasta ahora. El paso de instalación y construcción dura unos tres minutos. Esto se pondrá un poco más rápido sin embargo. Como puede ver, ese Bitbucket está ensamblando un nuevo efectivo para nodo como especificamos. Pero aquí el comando scp para módulos Node lleva unos minutos ejecutándose y eso es demasiado largo. Entonces en la siguiente lección, aprenderemos cómo podemos acelerar la copia todos estos archivos en el proceso sep usando un tarball. 12. Utilizar Tarballs para transferir la carpeta de Tarballs de node más rápido: Entonces lo que podemos hacer para mejorar la velocidad de la SEP es realmente crear una bola de alquitrán antes de transferirla. Entonces voy a detener este ducto. Y vamos a volver a nuestro archivo de ductos. Voy a asegurarme de que estemos en la sucursal correcta. Y lo haremos aquí es después del comando build, crear un tarball del mismo nombre a partir de módulos Node. Y los artefactos. Ahora no necesitamos módulos Node, sino más bien la bola de alquitrán que se crea. Y también vamos a renombrar esto. En lugar de una carpeta. Sólo tenemos que golpear ese directorio con este archivo. Y haremos lo mismo por la rama maestra. Entonces para estar completos, tenemos que agregar un paso adicional para desempacar esa bola de alquitrán en el lado del servidor. Y estamos de nuevo, vas a usar un comando SSH para poder ejecutar comandos en el servidor. Eso le copiaremos al maestro. Tan solo hay que cambiar el nombre de la carpeta. Por lo que esto debería acelerar enormemente el proceso de compilación y también podrá ver cuánto ahorra ese proceso de almacenamiento en caché también. Por lo que podemos ver con este nuevo proceso de construcción con el tarball, primer lugar, termina lo más importante. Pero los módulos de nodo tarball se despliega mucho, mucho más rápido. Por lo que fue una cantidad de tiempo indeterminada. No lo sé. Esperé unos cuatro o cinco minutos y luego lo detuve, pero ahora son sólo diez segundos. Y además, vemos que los cubos de bits proceso interno de almacenamiento en caché reducen ese tiempo de instalación inicial. Y nodo ImageDownLoadLoader, que fue de unos tres minutos a solo un minuto. Entonces eso también es tres veces más rápido. Ahora básicamente quédate esa cantidad de tiempo. Podría ser un poco más largo si agrega algunos paquetes al nodo. Y entonces también sería el tiempo muy largo si cambiaras o actualizaras tu imagen de nodo de lo que tendría que refundir la nueva imagen. Pero por lo demás esto se ve bien. Qué es salto en el servidor para asegurarse de que todo se vea bien. Genial, así que tenemos todo aquí. Podríamos agregar un paso adicional para quitar la bola de alquitrán que se transfiere. Pero les dejaré eso a ustedes chicos para que sumen. 13. Ajustar para los modos de "verlo en el servidor: Al igual que en el ejemplo del sitio estático, hemos creado un despliegue continuo exitoso, pero en realidad todavía no estamos sirviendo nada. Entonces para asegurarnos de que hemos desplegado todos los archivos que necesitamos, una buena primera comprobación es simplemente ejecutar el nodo index j s aquí en el servidor. Y esperamos llevar esos a los logs de la consola y verlos también en holgura con las variables de puesta en escena. Ya que estamos en la carpeta de puesta en escena, ahí es donde nuestra canalización de puesta en escena despliega dos. Y obtenemos esos registros de consola así como los registros de holgura idénticos. E incluso podemos comprobar aquí para asegurar que las variables se corrijan. Y sí, dice Hola MyTitle sitio de pruebas de puesta en escena. Por lo que se ve genial. Entonces por supuesto, no podemos venir aquí manualmente y emitir el nodo index.js cada vez. Y vimos desde el sitio estático, pesar de que era un buen ejemplo de cómo usar un comando SSH. También fue ideal para iniciar siempre el servidor de esa manera. Y la forma de hacerlo sería con forever watch index JS. Pero el problema está aquí. Forever estaría viendo demasiados archivos. Porque aquí tenemos los módulos de nodo. Realmente todo lo que queremos ver es fuente y construir. Entonces hay un paso extra que tenemos que hacer. Y eso es crear un archivo para siempre ignorar, que es igual que el archivo gitignore. Y así aquí queremos ignorar los módulos de nodo. Y por supuesto tenemos que sumar esto a nuestro ducto. Y en realidad en el guión de compilación, solo necesitamos definirlo como un artefacto. Y luego podemos usar la SEP. Genial. Tenía lo mismo con el maestro. Nuevamente, asegurándose de que esa es la carpeta correcta. Y agregándolo como artefacto. De acuerdo, así que desplegar nuestro archivo para siempre ignorar funcionó correctamente. Y ahora podemos ponernos en marcha para siempre sin que tenga ningún problema ya que hemos ignorado la gran carpeta de módulos Node. Por lo que el comando es para siempre dash W, Start index.js. Y por supuesto que eso se inicia en segundo plano, pero aun así recibimos mensajes. Este es nuestro sitio en vivo puesta en escena. Y solo para simular un cambio, simplemente podemos tocar un nuevo archivo. Vamos a llamarlo un nuevo archivo, TXT. Y en cuanto haga eso, para siempre, se da cuenta de que cambian y el sitio se reinicia. Entonces eso es genial. Siempre que SCP archivos aquí al servidor, para siempre se reiniciará y reflejaría esos cambios en el sitio. 14. ¡La gran ventaja de probar de las tuberías en el proyectico, en la fusión con maestro!: Entonces ahora por fin es el momento de que todo nuestro arduo trabajo en este proceso de construcción dé sus frutos. Y ese es el escenario en el que se desea fusionar para dominar. Por lo que se puede pensar en todo el trabajo y los cambios que hemos hecho aquí en la puesta en escena. Media docena de solares se compromete como pruebas. Y nos hemos estado asegurando de que todo funcione y ahora están bastante satisfechos con cómo está funcionando el sitio. Porque hemos estado siguiendo tanto en las ramas de puesta en escena como master con los mismos pasos exactos. A excepción de nuestras carpetas y entornos personalizados. Esperamos que el proceso de construcción también funcione exactamente igual. Entonces todo lo que necesitamos hacer para migrar los cambios aprobados y completos de escena es fusionar la puesta en escena para dominar y empujarlo a nuestro control remoto. Y luego BitBucket hará el resto por nosotros. Entonces vamos a darle una oportunidad. Entonces aquí ahora en el servidor, no en la carpeta de ensayo, sino en la carpeta maestra. Y parece que nuestro script de compilación funcionó exactamente como debería tener. E incluso podemos llevar a cabo RN. Y deberíamos estar viendo al maestro exactamente las variables maestras. Y como pruebas iniciales al igual que hicimos con la puesta en escena, podemos ejecutar el nodo index.js. Genial. La mensajería de banderas está funcionando. Consola registra puerto correcto y se agarra. Y ahora puedo pasar el mismo comando exacto que hicimos en la puesta en escena. Genial. Y para conseguir ese adelanto en vivo, tenemos el sitio maestro y la puesta en escena más reciente está aquí. Este es el sitio de puesta en escena. Genial. Por lo que tenemos dos aplicaciones web lado a lado. Están expuestos con n grok. El staging se está ejecutando en el puerto 5,002 en nuestro servidor y la rama maestra se está ejecutando en 5,003. 15. EXTRA: configuración de Proxy NGINX y Reacción variable de entorno de URL PUBLIC: Por lo que en la última lección, construimos un despliegue continuo e integración continua para dos ramas una junto a la otra, una rama de puesta en escena y una rama maestra. Y para esa tarea, todavía estábamos usando y grok como una herramienta sencilla para proxy rápidamente el sitio y obtenerlo en una URL pública en Internet. Pero como mencioné algunos cursos atrás, mostraría cómo hago eso usando una herramienta como motor X. Y así ya tengo mi archivo de configuración de ingenieros abierto aquí para Chris a través de DOT IN, que es mi blog. Entonces la raíz es mi blog aquí. Pero si golpeas estos subdominios, obtienes lo que en realidad está en segundo plano, una aplicación de nodo totalmente diferente. Y también tengo mi portafolio, que es otra aplicación. Para que podamos hacer lo mismo con las dos aplicaciones que acabamos de crear. Y los voy a poner básicamente como el mismo nombre de ruta que hemos estado usando. Por lo que tenemos esta puesta en escena y pasamos proxy 25,002. Y también tenemos al maestro. Y eso es en el puerto 5,003. Acabamos de formatear ese pequeño tipográfico aquí. Y podemos reiniciar y genética. Hay un pequeño paso que me olvidé de configurar cuando se trata de la aplicación Create React. Y podemos ver cuando ejecutamos la construcción de NPM, te dan una especie de advertencia. El proyecto fue construido asumiendo que está alojado en la raíz. Esto se puede controlar con el campo de la página de inicio en su paquete.json. Y por supuesto con nuestra nueva configuración de ingenieros, estamos en la carpeta de puesta en escena Type Script Type Script y la carpeta maestra de share de habilidades Type Script, no en la raíz. Y tampoco queremos establecer una página de inicio estática en el paquete.json porque estamos usando esto para ramificar el sistema localmente en el repositorio de la app Create React GitHub. Pude encontrar una manera en la que se puede establecer esta variable de entorno URL pública, que es perfecta para nuestro caso de uso. Por lo que podemos agregar eso justo antes del comando run build. Estableceremos la variable de entorno. Y entonces nuestra configuración debería funcionar bien con nuestro motor X proxy. Entonces solo estamos usando la sintaxis bash estándar, exportar URL pública. Y eso es HTTPS está arraigado EN la puesta en escena de script de tipo share de habilidad. Eso es para la rama de puesta en escena o la rama maestra. Maestro. Pero por supuesto entonces eso significa que debemos quitar este código n grok. Por lo que en realidad podemos simplemente quitar la función por completo. Y sabemos que la URL estará disponible en froude, AT IN slash, Skill Share, type, script, puesta en escena, y master. Por lo que solo empujaremos este código a través la cadena típica comenzando en dev Ben a puesta en escena luego a dominar, todavía recibirá nuestro mensaje de holgura aquí mismo. Y debería estar bien. Entonces vamos a empujar esto y ver cómo va. Entonces si indagamos en el último proceso de construcción, vamos al paso de construcción. Podemos ver en el comando run build que la aplicación Create React entiende lo que estamos haciendo aquí. Y dicen que se supone que está alojado aquí en la URL que hemos proporcionado. Y en cuanto a la configuración del servidor, funciona perfectamente. Y podemos ver que la variable de entorno para el título del sitio también se llena dinámicamente y esperamos lo mismo para el sitio de puesta en escena. Sí, perfecto. Entonces así es como sirves para crear apps React en ramas separadas a través del motor X, proxies. 16. EXTRA: utiliza el Docker como alternativa a un servidor remoto Linux Linux Linux: Escribí en la descripción del curso que si no tienes ningún tipo de servidor Linux remoto o basado en la nube, podrías usar una instancia local de Docker Linux como sustituto. Por lo que en esta lección se describe y muestra cómo se puede configurar eso. Por lo que después de instalar Docker en tu sistema, puedes usar este archivo Docker para crear una instancia de Ubuntu con todos los requisitos que necesitarás. Entonces lo haré, lo publicaré en las notas de la lección. Incluye cosas como curl, get, e instala la versión de nodo que necesitamos para este curso. Por lo que una vez que obtienes este archivo, puedes construirlo. Y notarás que ya estoy directamente en esta carpeta o este archivo Docker lo es. Por lo que podemos construirlo con este comando. Y ahora podemos ejecutar esa imagen con Doctor run interactivo. Y lo vamos a vincular a un puerto. Por lo que acabo de elegir arbitrariamente 777 porque es más fácil recordar y no creo que deba entrar en conflicto con ningún otro puerto. Y necesitamos vincular eso a 22 en el lado más oscuro, que es el puerto predeterminado para SSH. Y nos referimos a nuestra identificación de imagen copiada. Y estamos en. Entonces ahora que estamos en nuestra instancia de Ubuntu, debemos asegurarnos de que los servicios SSH suban. Por lo que emitiremos ese comando. Se ve bien. Y también debemos establecer una contraseña para este usuario. Y eso es lo que comanda el pasado WD. Entonces si estás planeando usar esto para todo el curso, y estarás accediendo a él desde público, por ejemplo, desde Bitbucket, desde una fuente externa, debes establecer aquí una contraseña muy fuerte, ya que solo la estoy usando por ejemplo en este momento, voy a establecer una contraseña bastante simple. Y luego hay que confirmarlo. Y las contraseñas actualizadas con éxito. Por lo que es importante mantener en funcionamiento esta instancia terminal. Esta es nuestra imagen de Ubuntu la cual se está ejecutando y Docker. Entonces abriremos una terminal separada. Y podemos comprobar si podemos iniciar sesión localmente a través de SSH. Entonces ese será el usuario root. Simplemente que nuestro propio localhost, uno a siete, 0.0.0, 0.1. Y el puerto arbitrario que especificamos, que es 7777. Y proporcione la contraseña que establezca con el comando password. Y parece que estamos dentro. Ahora para tener un acceso a fuente externa, esta imagen como las canalizaciones bitbucket tendrán que abrir puerto 777 para aceptar conexiones SSH del mundo. Entonces para hacer esto, primero necesitamos conocer esta máquina local. En mi caso, mi laptop, lo que es dirección IP está en mi propia red Wi-Fi. Y así podemos salir de SSH aquí. Y para conseguir eso, puedes emitir IF Config y grep para ion al 19 dos y eso debería poder encontrar tu dirección. Si nada viene aquí arriba, puede que tengas que emitir el IF Config completo y mirar a través de todo el listado allí. Pero vemos que la dirección local de esta laptop en mi red es ésta. Entonces podemos copiar eso ahora. Y vamos a crear una regla de reenvío de puertos en nuestro router. Por lo que normalmente puedes acceder a la GUI de tu router Wi-Fi con solo poner en cualquier navegador, 19 2.168.1. Y es posible que deba consultar las especificaciones técnicas de su router para obtener las credenciales para iniciar sesión. Pero una vez que estás dentro, casi todos los routers tienen este diseño general. Y lo que quieres encontrar es ya sea en avanzado o directamente reenvío. Depende del fabricante. Normalmente tienes que ir a una pestaña avanzada y luego encontrar el reenvío. Y se pueden configurar estas reglas. Entonces vamos a crear una regla de reenvío IP v4. Y así ignorar el adder de reglas conocido. Y sólo bajaremos por aquí. Entonces sabemos cuáles son nuestras direcciones IP locales, acabamos de copiarlo. Y queremos que ese inicio y fin local para que sea el puerto que especificamos. El IP externo. En mi caso, para este router, puedes dejarlo como este 0, este todo ceros. Algunos routers, necesitas dejarlo vacío. Nuevamente, tienes que leer en la documentación de tu router cuál es la regla. Pero sólo para recordarlo para nuestro propio eje, pondremos el puerto externo a todos los sietres también. Y también puedes proporcionar una descripción. Simplemente le diré SSH a Docker y queremos habilitarlo. Y haga clic en Aplicar. Genial, vemos nuestra entrada aquí. Entonces eso se ve bien ir ahora para poder acceder a esto desde un sitio externo o desde el público, necesitas tu dirección IP pública, no esta local, sino la que tu proveedor de servicios de internet ve o que tú eres. Router muestra Internet. La forma más fácil de hacerlo es simplemente subirse a Google y buscar cuáles son mis direcciones IP. Entonces para, sólo por un simple ejemplo, digamos que su dirección IP pública es 1.5.2, 1.5.2, 1.5.2, 1.5.2. El modo en que puedes probar si tu reenvío de puertos ha funcionado es casi el mismo comando que emitimos para la prueba local. Entonces es raíz SSH. Y si estamos asumiendo que esa es tu dirección IP pública, aún el puerto 7777. Eso debería funcionar. Entonces lo que realmente está sucediendo en segundo plano es que estás golpeando tu router en esta dirección. El router busca la regla. Dice, ah, está solicitando al 7777 y luego reenviando a tu máquina local. En mi caso, esta máquina y Docker está entonces reenviando el puerto 22 77772 tal como lo configuramos en nuestra imagen. Y podrás llegar a tu SSH, o podrás acceder a la imagen a través de SSH. Entonces si este comando está funcionando y puedes acceder a tu imagen desde un lugar público o externo en internet. Estás todo listo y puedes usar la imagen Docker para este curso. Es importante siempre que estés ejecutando algo o esperando bitbucket, por ejemplo, para iniciar sesión, que esto siempre se esté ejecutando. Y cuando termines con esta imagen, simplemente puedes terminar su ejecución con el comando exit y cerrar sesión desde el mismo terminal donde iniciaste, lo hará automáticamente y su ejecución. Y podemos volver a comprobar eso emitiendo docker ps. Y vemos que no hay imágenes corriendo. Ten en cuenta que si vas a usar este método Docker, también tendrás que actualizar el valor del servidor en tus variables de repositorio. Por lo que el usuario puede permanecer como root como lo dijimos en el curso. Pero el servidor tendrá que ser esa IP pública que buscabas, por ejemplo, en Google. Y entonces tus reglas de reenvío de puertos deberían hacer todo el resto del trabajo por ti. Y deberías poder acceder a tu instancia local de Linux en Docker, igual que lo harías con cualquier otro tipo de caja Linux remota. También tendrás que rehacer los pasos SSH, que hicimos en la lección cuatro con la clave pública y privada. Para que su instancia local de Ubuntu confíe en el acceso SSH desde Bitbucket. Por lo que en esta lección de bonificación, aprendimos cómo podemos configurar rápidamente una instancia de Ubuntu en ejecución local usando Docker. Abrimos un puerto de nuestra elección. En este caso, en este ejemplo, fue 7777 a internet creando una regla de reenvío de puertos en nuestro router. Reenvío del puerto externo 777 al puerto local 777 en nuestra máquina local.