OpenBokeron/CICD_Slides
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3

Browse Source
This commit is contained in:
Jose
2026-03-10 10:04:52 +01:00
parent 7273220878
commit 7b864955c7
9 changed files with 163 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
slides/images/gitflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
slides/images/gitflow.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

43
slides/sections/01_Introduccion.tex
View File

@@ -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}

20
slides/sections/02_Instalacion.tex
View File

@@ -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?}

9
slides/sections/03_Pipeline.tex
View File

@@ -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}

67
slides/sections/04_DesdeFuera.bak0 Normal file
View File

@@ -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}

103
slides/sections/04_DesdeFuera.tex
View File

@@ -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}

2
slides/sections/05_Consideraciones.tex
View File

@@ -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}

1
slides/sections/06_Cierre.tex
View File

@@ -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}