Quartz 4

Architecture & DevOps

3 min read

Architecture & DevOps – Letter Box

Architecture logique

flowchart LR
Client --> Frontend
Frontend --> Backend
Backend --> PostgreSQL
Scraper --> MongoDB
Scraper --> Backend

Ce schéma illustre l’architecture réelle du projet : le client interagit avec le frontend (React), qui communique avec le backend (FastAPI). Le backend gère la persistance dans PostgreSQL. Le scraper (Scrapy) collecte des films, les stocke dans MongoDB, puis les transmet au backend pour intégration.

Sommaire

Objectif du projet

Ce projet consiste à concevoir, développer et déployer une application web de gestion de films, intégrant une architecture full-stack, un scraper, une base de données relationnelle, et une chaîne DevOps complète (CI/CD, conteneurisation, orchestration Kubernetes).

Les objectifs pédagogiques sont :

  • Mettre en œuvre les pratiques DevOps modernes
  • Automatiser le cycle de vie applicatif
  • Garantir la qualité, la sécurité et la reproductibilité

Vue Fonctionnelle

L’application permet de gérer des films, avec opérations CRUD :

  • Ajout, édition et suppression d’un film
  • Visualisation d’une liste publique
  • Interaction entre frontend et backend via API REST

Composants principaux :

CoucheTechnologieDescription
FrontendReact / HTML / CSSInterface utilisateur
BackendFastAPI (Python)API de gestion des données
  • Build des images Docker
  • Exécution des tests backend
  • Push des images sur le registry
  • Déploiement automatique sur le cluster Kubernetes
  • Gestion des secrets via GitHub Secrets

Déploiement Kubernetes

  • Un Deployment pour chaque service (frontend / backend / DB / scraper)
  • Service NodePort pour l’accès à l’interface
  • Utilisation de variables d’environnement pour la connexion DB

Exemple de manifest simplifié :

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  template:
    spec:
      containers:
      - name: backend
        image: badrtajini/letterboxd-backend:latest
        env:
        - name: DATABASE_URL
          value: postgres://...

CI/CD – Pipeline DevOps

Intégration et Livraison Continue (CI/CD) pour Letter Box :

  • Utilisation de GitHub Actions pour automatiser les tests, le build, et le déploiement
  • Lint, tests unitaires, build Docker, push registry, déploiement Kubernetes

Exemple de workflow GitHub Actions

name: CI/CD
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.11'
      - name: Install backend dependencies
        run: |
          cd projet/backend
          pip install -r requirements.txt
      - name: Run backend tests
        run: |
          cd projet/backend
          pytest
      - name: Build Docker images
        run: docker-compose build
      - name: Push Docker images
        run: docker-compose push
      - name: Deploy to Kubernetes
        run: |
          kubectl apply -f projet/devops/kubernetes-deployment.yaml

Ports utilisés

ComposantPort
Frontend3000
Backend8001
PostgreSQL5432
MongoDB27017
Quartz (doc)8080

Flux applicatif

  • Un utilisateur consulte le frontend (port 3000), qui interroge l’API backend (port 8001).
  • Le backend lit/écrit dans PostgreSQL (port 5432).
  • Le scraper importe des films depuis AlloCiné, stocke dans MongoDB, puis exporte vers le backend.

Cette architecture garantit la modularité, la scalabilité et la maintenabilité du projet.

Architecture logique

flowchart LR
Client --> Frontend
Frontend --> Backend
Backend --> PostgreSQL
Scraper --> MongoDB
Scraper --> Backend

Ce schéma illustre l’architecture réelle du projet : le client interagit avec le frontend (React), qui communique avec le backend (FastAPI). Le backend gère la persistance dans PostgreSQL. Le scraper (Scrapy) collecte des films, les stocke dans MongoDB, puis les transmet au backend pour intégration.

Graph View

Backlinks