diff --git a/slides/images/gitflow.png b/slides/images/gitflow.png new file mode 100644 index 0000000..a8f7947 Binary files /dev/null and b/slides/images/gitflow.png differ diff --git a/slides/images/gitflow.webp b/slides/images/gitflow.webp new file mode 100644 index 0000000..433cfe2 Binary files /dev/null and b/slides/images/gitflow.webp differ diff --git a/slides/sections/01_Introduccion.tex b/slides/sections/01_Introduccion.tex index 2e1b85a..3737bb0 100644 --- a/slides/sections/01_Introduccion.tex +++ b/slides/sections/01_Introduccion.tex @@ -1,5 +1,15 @@ \section{Introducción} +\begin{frame} +\frametitle{\textbf{Somos esta gente}} +{\small O sea, no somos todos esos de la foto. Somos los frikis del fondo.} +\vspace{0.3cm} + +\centering +\includegraphics[width=1.1\linewidth]{images/pointat.png} +\end{frame} + + \begin{frame} \frametitle{\textbf{Open Bokeron}} \begin{itemize} @@ -16,17 +26,6 @@ \end{mybox} \end{frame} -\begin{frame} -\frametitle{\textbf{Somos esta gente}} -{\small O sea, no somos todos esos de la foto. Somos los frikis del fondo.} -\vspace{0.3cm} - -\centering -\includegraphics[width=1.1\linewidth]{images/pointat.png} - - -\end{frame} - \begin{frame} \frametitle{\textbf{Y yo soy este}} \begin{columns}[T] @@ -128,3 +127,25 @@ \end{itemize} \end{mybox} \end{frame} + +\begin{frame} +\frametitle{\textbf{Arquitectura del repo}} +\begin{itemize} + \item API: \texttt{backend/} (FastAPI) + \item Front: \texttt{frontend/} (Svelte + Vite, base path \texttt{/taller/}) + \item Orquestaci\'on: \texttt{docker-compose.yml} (frontend + backend) + \item Jenkins: + \begin{itemize} + \item Pipelines: \texttt{Jenkinsfile.ci} y \texttt{Jenkinsfile.cd} + \end{itemize} +\end{itemize} + +\vspace{0.15in} +\begin{mybox} +\begin{itemize} + \item[\ding{229}] Importante: el frontend usa un \textbf{base path} \texttt{/taller/}. +\end{itemize} +\end{mybox} +\end{frame} + + diff --git a/slides/sections/02_Instalacion.tex b/slides/sections/02_Instalacion.tex index b0149ce..1d1af10 100644 --- a/slides/sections/02_Instalacion.tex +++ b/slides/sections/02_Instalacion.tex @@ -1,25 +1,5 @@ \section{Instalaci\'on inicial} -\begin{frame} -\frametitle{\textbf{Arquitectura del repo}} -\begin{itemize} - \item API: \texttt{backend/} (FastAPI) - \item Front: \texttt{frontend/} (Svelte + Vite, base path \texttt{/taller/}) - \item Orquestaci\'on: \texttt{docker-compose.yml} (frontend + backend) - \item Jenkins: - \begin{itemize} - \item Pipelines: \texttt{Jenkinsfile.ci} y \texttt{Jenkinsfile.cd} - \end{itemize} -\end{itemize} - -\vspace{0.15in} -\begin{mybox} -\begin{itemize} - \item[\ding{229}] Importante: el frontend usa un \textbf{base path} \texttt{/taller/}. -\end{itemize} -\end{mybox} -\end{frame} - \begin{frame} \frametitle{\textbf{Uf seguro que instalar el Jenkins ese es muy difícil...}} \textbf{¿Seguro?} diff --git a/slides/sections/03_Pipeline.tex b/slides/sections/03_Pipeline.tex index a7991be..fbe18c0 100644 --- a/slides/sections/03_Pipeline.tex +++ b/slides/sections/03_Pipeline.tex @@ -1,5 +1,14 @@ \section{Parte pr\'actica} +\begin{frame} +\frametitle{\textbf{Lo siento, os toca trabajar ahora}} +\begin{itemize} + \item Vamos a intentar compilar manualmente el proyecto y a levantarlo + \item Para ello debería ser tan sencillo como leerse el README + \item Una vez lo levantemos, intentemos automatizarlo para no perder el tiempo en despliegues +\end{itemize} +\end{frame} + \begin{frame} \frametitle{\textbf{CI: qu\'e hace Jenkinsfile.ci?}} \begin{itemize} diff --git a/slides/sections/04_DesdeFuera.bak0 b/slides/sections/04_DesdeFuera.bak0 new file mode 100644 index 0000000..b3dfc68 --- /dev/null +++ b/slides/sections/04_DesdeFuera.bak0 @@ -0,0 +1,67 @@ +\section{CI/CD desde fuera (como dev)} + +\begin{frame} +\frametitle{\textbf{Flujo de trabajo - Git}} +\includegraphics[width=\textwidth]{images/gitflow.png} +\end{frame} + +\begin{frame} +\frametitle{\textbf{Flujo de trabajo}} +\begin{itemize} + \item Crear rama: \texttt{feature/...} + \item Hacer cambio peque\~no y con sentido. + \item Abrir Merge Request / Pull Request. + \item Observar checks:\\ + \hspace{0.25em}-- CI corre en cada push\\ + \hspace{0.25em}-- el MR/PR muestra estado verde/rojo + \item Si falla: arreglar y push de nuevo. + \item Merge a main y observar despliegue (CD). +\end{itemize} +\end{frame} + +\begin{frame} +\frametitle{\textbf{Propuesta de cambio para los asistentes}} +\textbf{Cambio sugerido} +\begin{itemize} + \item Cambiar el t\'itulo del hero en \texttt{frontend/src/App.svelte}. Alguien puso "UwU". + \item Nuevo texto sugerido: \textit{Taller CI/CD con Jenkins}. +\end{itemize} +\end{frame} + +\begin{frame} +\frametitle{\textbf{PR en Gitea}} +\begin{columns}[T] + \begin{column}{0.62\linewidth} + \begin{itemize} + \item Har\'eis la PR con un \textbf{usuario gen\'erico} que os damos en nuestro \textbf{Gitea}. + \item Al abrir la PR: + \begin{itemize} + \item Jenkins lanza la \textbf{CI} (y la ver\'eis en la web de Jenkins). + \item Aparece el generalísimo \texttt{jenkins-bot}. + \end{itemize} + \item \texttt{jenkins-bot} comentar\'a en la PR: + \begin{itemize} + \item si todo ha ido bien: \textbf{verde} y a mergear. + \item si la hab\'eis liado: a mirar el log. + \end{itemize} + \end{itemize} + \end{column} + \begin{column}{0.36\linewidth} + \centering + \includegraphics[height=0.68\textheight]{images/jenkinsbot.jpg} + \end{column} +\end{columns} +\end{frame} + +\begin{frame} +\frametitle{\textbf{Qu\'e observar en Jenkins al hacer el MR/PR}} +\begin{itemize} + \item Log del stage que falla (si falla): ruff, pytest, svelte-check, build... + \item En CD: tag de imagen generado (\texttt{APP\_VERSION}) y deploy. + \item En la app: + \begin{itemize} + \item \texttt{GET /health} refleja build/commit/autor. + \item \texttt{GET /builds} refleja builds recientes via Jenkins REST. + \end{itemize} +\end{itemize} +\end{frame} diff --git a/slides/sections/04_DesdeFuera.tex b/slides/sections/04_DesdeFuera.tex index c341e27..09eb994 100644 --- a/slides/sections/04_DesdeFuera.tex +++ b/slides/sections/04_DesdeFuera.tex @@ -1,62 +1,67 @@ \section{CI/CD desde fuera (como dev)} \begin{frame} -\frametitle{\textbf{Flujo de trabajo propuesto}} -\begin{itemize} - \item Crear rama: \texttt{feature/...} - \item Hacer cambio peque\~no y con sentido. - \item Abrir Merge Request / Pull Request. - \item Observar checks:\\ - \hspace{0.25em}-- CI corre en cada push\\ - \hspace{0.25em}-- el MR/PR muestra estado verde/rojo - \item Si falla: arreglar y push de nuevo. - \item Merge a main y observar despliegue (CD). -\end{itemize} + \frametitle{\textbf{Flujo de trabajo - Git}} + \includegraphics[width=\textwidth]{images/gitflow.png} \end{frame} \begin{frame} -\frametitle{\textbf{Propuesta de cambio para los asistentes}} -\textbf{Cambio sugerido} -\begin{itemize} - \item Cambiar el t\'itulo del hero en \texttt{frontend/src/App.svelte}. Alguien puso "UwU". - \item Nuevo texto sugerido: \textit{Taller CI/CD con Jenkins}. -\end{itemize} + \frametitle{\textbf{Flujo de trabajo}} + \begin{itemize} + \item Crear rama: \texttt{feature/...} + \item Hacer cambio peque\~no y con sentido. + \item Abrir Merge Request / Pull Request. + \item Observar checks:\\ + \hspace{0.25em}-- CI corre en cada push\\ + \hspace{0.25em}-- el MR/PR muestra estado verde/rojo + \item Si falla: arreglar y push de nuevo. + \item Merge a main y observar despliegue (CD). + \end{itemize} \end{frame} \begin{frame} -\frametitle{\textbf{PR en Gitea}} -\begin{columns}[T] - \begin{column}{0.62\linewidth} - \begin{itemize} - \item Har\'eis la PR con un \textbf{usuario gen\'erico} que os damos en nuestro \textbf{Gitea}. - \item Al abrir la PR: - \begin{itemize} - \item Jenkins lanza la \textbf{CI} (y la ver\'eis en la web de Jenkins). - \item Aparece el generalísimo \texttt{jenkins-bot}. - \end{itemize} - \item \texttt{jenkins-bot} comentar\'a en la PR: - \begin{itemize} - \item si todo ha ido bien: \textbf{verde} y a mergear. - \item si la hab\'eis liado: a mirar el log. - \end{itemize} - \end{itemize} - \end{column} - \begin{column}{0.36\linewidth} - \centering - \includegraphics[height=0.68\textheight]{images/jenkinsbot.jpg} - \end{column} -\end{columns} + \frametitle{\textbf{Propuesta de cambio para los asistentes}} + \textbf{Cambio sugerido} + \begin{itemize} + \item Cambiar el t\'itulo del hero en \texttt{frontend/src/App.svelte}. Alguien puso "UwU". + \item Nuevo texto sugerido: \textit{Taller CI/CD con Jenkins}. + \end{itemize} \end{frame} \begin{frame} -\frametitle{\textbf{Qu\'e observar en Jenkins al hacer el MR/PR}} -\begin{itemize} - \item Log del stage que falla (si falla): ruff, pytest, svelte-check, build... - \item En CD: tag de imagen generado (\texttt{APP\_VERSION}) y deploy. - \item En la app: - \begin{itemize} - \item \texttt{GET /health} refleja build/commit/autor. - \item \texttt{GET /builds} refleja builds recientes via Jenkins REST. - \end{itemize} -\end{itemize} + \frametitle{\textbf{PR en Gitea}} + \begin{columns}[T] + \begin{column}{0.62\linewidth} + \begin{itemize} + \item Har\'eis la PR con un \textbf{usuario gen\'erico} que os damos en nuestro \textbf{Gitea}. + \item Al abrir la PR: + \begin{itemize} + \item Jenkins lanza la \textbf{CI} (y la ver\'eis en la web de Jenkins). + \item Aparece el generalísimo \texttt{jenkins-bot}. + \end{itemize} + \item \texttt{jenkins-bot} comentar\'a en la PR: + \begin{itemize} + \item si todo ha ido bien: \textbf{verde} y a mergear. + \item si la hab\'eis liado: a mirar el log. + \end{itemize} + \end{itemize} + \end{column} + \begin{column}{0.36\linewidth} + \centering + \includegraphics[height=0.68\textheight]{images/jenkinsbot.jpg} + \end{column} + \end{columns} +\end{frame} + +\begin{frame} + \frametitle{\textbf{Qu\'e observar en Jenkins al hacer el MR/PR}} + \begin{itemize} + \item Log del stage que falla (si falla): ruff, pytest, svelte-check, build... + \item En CD: tag de imagen generado (\texttt{APP\_VERSION}) y deploy. + \item En la app: + \begin{itemize} + \item \texttt{GET /health} refleja build/commit/autor. + \item \texttt{GET /builds} refleja builds recientes via Jenkins REST. + \end{itemize} + \end{itemize} \end{frame} diff --git a/slides/sections/05_Consideraciones.tex b/slides/sections/05_Consideraciones.tex index 94d3132..1c97bbe 100644 --- a/slides/sections/05_Consideraciones.tex +++ b/slides/sections/05_Consideraciones.tex @@ -27,7 +27,7 @@ \frametitle{\textbf{Rollback con im\'agenes etiquetadas}} \begin{itemize} \item En CD generamos tags con \texttt{APP\_VERSION = 1.0.\$BUILD\_NUMBER}. - \item Si el deploy de hoyudorompe algo, puedes volver atr\'as: + \item Si el deploy rompe algo, puedes volver atr\'as: \begin{itemize} \item desplegar \texttt{BACKEND\_TAG=1.0.41 FRONTEND\_TAG=1.0.41} (ejemplo) \item \texttt{docker compose up -d} diff --git a/slides/sections/06_Cierre.tex b/slides/sections/06_Cierre.tex index 8109294..0e1a9f3 100644 --- a/slides/sections/06_Cierre.tex +++ b/slides/sections/06_Cierre.tex @@ -20,7 +20,6 @@ \begin{itemize} \item Registry (Harbor/Docker Hub/GHCR) \item SonarQube + quality gates - \item An\'alisis de vulnerabilidades con Trivy \item Despliegue con Quadlets usando Podman \item Kubernetes (no) \end{itemize}