Working demo

presentation/slides.md

@@ -2,9 +2,10 @@
 - Introduction à la conteneurisation
 - Docker
     - Principes clés
-    - Point de vue sysadmin
-    - Point de vue développeur
-    - Point de vue DevOps
+        - Conteneurs
+        - Images
+    - Orchestration
+    - Applications 
 
 ---
 
@@ -64,13 +65,12 @@
 
 ----
 
-```bash [1-6|1-2|3|4|5|6]
+```bash [1-5|1-2|3|4|5]
 docker run \
 -it --rm \
--v /tmp:/app \
--p 8000:8000 \
-python:latest \
-python -m http.server --directory /app
+-v /tmp:/usr/local/apache2/htdocs/ \
+-p 8000:80 \
+httpd:latest
 ```
 <object data-id="Container.svg" data="./assets/Container.drawio.svg" type="image/svg+xml"></object>
 <!-- .slide: data-auto-animate -->
@@ -88,13 +88,10 @@ python -m http.server --directory /app
 ---
 
 ## Images
-```Docker [1-11|1-2|3-5|6-9|10-11]
-FROM python:alpine3.19
-WORKDIR /app
+```Docker
+FROM httpd:alpine
 
-COPY files/* ./
-EXPOSE 8000
-CMD ["python3", "-m", "http.server"]
+COPY files/* /usr/local/apache2/htdocs/
 ```
 ![Container Insides](./assets/Image.drawio.svg)
 ```bash
@@ -114,7 +111,6 @@ docker buildx build . -t demo:latest
     - Docker Compose
     - OpenShift
 
-Notes: test test 
 ---
 
 <h2>Docker compose</h2>
@@ -123,10 +119,46 @@ Notes: test test
 
 ----
 
-<h2>Docker compose</h2>
-<object data-id="Compose.svg" data="./assets/Compose.drawio.svg" type="image/svg+xml"></object>
+```yaml [|1-4,11-13,22-23|5-6,14-15,36-37|8-9,18-19,28-30,32-34|7,16-17,24-25,26-27] dockercompose
+services:
 
-```yaml
-service:
+  database:
+    image: redis:alpine3.20
+    volumes:
+     - database-data:/data
+    command: "redis-server --save 60 1"
+    networks:
+     - back
+
+  frontend:
+    image: docker-demo/front
+    build: ./front
+    volumes:
+     - ./test.txt:/usr/local/apache2/htdocs/test.txt
+    ports:
+     - "80:80"
+    networks:
+     - front
+
+  backend:
+    image: docker-demo/backend
+    build: ./back
+    environment:
+     - REDIS_URL=redis://database
+    depends_on:
+     - database
+    networks:
+     - back
+     - front
+
+networks:
+  front:
+  back:
+
+volumes:
+  database-data:
 ```
-<!-- .slide: data-auto-animate -->
+
+---
+
+##