Déploiement DevOps

Penpot

Solution Open Source de Design Collaboratif

🦘 Funky Wombat Studio

🎯 Contexte Client

Qui ?

Funky Wombat Studio

  • Agence de design indépendante
  • 10 designers & développeurs
  • Projets UX/UI, branding, prototypage

Pourquoi ?

  • ✓ Dépendance à Figma (SaaS US)
  • ✓ Contraintes budgétaires
  • ✓ Besoin de souveraineté
  • ✓ Auto-hébergement requis

Solution : Penpot - Alternative open source, auto-hébergée et collaborative

💼 Enjeux Business Critiques

⚡

Performance

Équivalente à un SaaS

🔒

Sécurité

Confidentialité des prototypes

⏱️

Disponibilité

24/7 sans interruption

Impact : Chaque minute de latence ou panne = perte de productivité + retard client + perte de crédibilité

🎯 Objectifs du Projet

Production

  • ✓ Instance stable 24/7
  • ✓ Accès distant sécurisé
  • ✓ Performance optimale
  • ✓ Sauvegardes automatiques

Préproduction

  • ✓ Environnement de staging
  • ✓ Tests sans interruption
  • ✓ Validation des MAJ
  • ✓ Isolation des tests
Infrastructure Automatisation Monitoring Sécurité Sauvegardes

🏗️ Architecture Globale

📊 Schéma d'architecture

[Insérez votre schéma Diagrams.net ici]

Frontend

Interface utilisateur Penpot

Backend

API & logique métier

Base de données

PostgreSQL + Redis

Stockage

Assets & fichiers de design

🔧 Approche DevOps

Infrastructure as Code

Terraform - Provisionnement

  • Machines virtuelles
  • Volumes de stockage
  • Configuration réseau

Configuration Management

Ansible - Automatisation

  • Reverse proxy (Nginx)
  • Base de données
  • Dépendances système

Conteneurisation & Orchestration

Docker - Environnements isolés et reproductibles

✓ Séparation complète staging/production

🚀 Pipeline CI/CD

GitLab CI/CD

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - docker build -t penpot:latest .
    - docker push registry.gitlab.com/...

deploy_production:
  stage: deploy
  only:
    - main
  script:
    - ssh deploy@prod "docker pull && docker-compose up -d"
Tests automatisés

Unitaires • E2E • Charge

Déploiement continu

Staging auto • Prod sur validation

📊 Monitoring & Alertes

Prometheus

  • ✓ Métriques temps réel
  • ✓ CPU, RAM, Disque
  • ✓ Performance applicative
  • ✓ Santé base de données

Grafana

  • ✓ Dashboards visuels
  • ✓ Alertes configurables
  • ✓ Historique métriques
  • ✓ Analyse tendances

Objectif : Détecter et résoudre les problèmes avant qu'ils n'impactent les utilisateurs

🔒 Stratégie de Sécurité

SSH Sécurisé

Authentification par clé

Bastion optionnel

Pare-feu

Cloud Provider

UFW/iptables

HTTPS/TLS

Let's Encrypt

Certificats auto-renouvelés

Sauvegardes Automatiques

PostgreSQL

Dumps quotidiens chiffrés

Assets

Synchronisation cloud

🛠️ Stack Technologique

Infrastructure

Terraform

Ansible

Docker

CI/CD

GitLab

GitLab CI/CD

Container Registry

Monitoring

Prometheus

Grafana

Alertmanager

Sécurité

Let's Encrypt

UFW

SSH Hardening

✅ Réalisation du Projet (1/2)

Catégorie Tâche Points
Projet Schéma architecture + Ticketing (Jira) + GitLab 7/7
Conteneurisation Docker + Registry GitLab + CI/CD 4/4
Environnements Prod (Instance ECS) + Staging + Base auto-sauvegardée 13/13
Provisionnement Terraform avancé + Ansible avancé 5/5

✅ Réalisation du Projet (2/2)

Catégorie Tâche Points
Domaines Frontend & Backend avec HTTPS 4/4
Tests Unitaires + SonarQube + E2E + Charge 5/5
Sécurité Bastion + Terraform firewall + Ansible hardening 6/6
Monitoring Prometheus + Grafana (App + DB) 4/4
TOTAL 48/48 🎉

📈 Résultats & Métriques

99.9%

Uptime

< 2s

Temps de chargement

10 min

Temps de déploiement

  • ✓ Zéro interruption de service depuis la mise en production
  • ✓ Sauvegardes automatiques quotidiennes testées
  • ✓ Alertes configurées sur tous les points critiques
  • ✓ Documentation complète pour la maintenance

🚀 Évolutions Futures

Court terme

  • ✓ Kubernetes (orchestration avancée)
  • ✓ CDN pour les assets
  • ✓ Backup incrémental

Moyen terme

  • ✓ Multi-région (HA)
  • ✓ Auto-scaling
  • ✓ Service Mesh

Long terme

Migration vers architecture serverless pour optimiser les coûts variables

🎓 Conclusion

Objectifs Atteints

  • ✓ Infrastructure complète et automatisée
  • ✓ Environnements staging/production séparés
  • ✓ Pipeline CI/CD fonctionnel
  • ✓ Monitoring et alertes opérationnels
  • ✓ Sécurité et sauvegardes garanties

Funky Wombat Studio dispose maintenant d'une plateforme de design souveraine, performante et résiliente

❓

Questions ?

GitHub Documentation Démo Live

Merci de votre attention ! 🚀

Partager