- 🍎🚀 Guide de Déploiement Automatisé d'une Application de Classification de Fruits 🍌🎯
Bienvenue dans ce guide complet de déploiement automatisé d'une application de classification de fruits 🍏🍊. Ce document vous guidera à travers toutes les étapes, du développement initial à l'exécution locale et au déploiement automatisé sur un serveur distant 🌐.
Le projet consiste à développer une application capable de classer des fruits à l'aide d'un modèle d'apprentissage automatique 🤖. Il est structuré de la manière suivante :
- Backend (
Backend/) : Une API développée avec FastAPI en Python 🐍, intégrant le modèle de classification entraîné. - Frontend (
Frontend/) : Une application web développée avec Vue.js 🖥️, offrant une interface utilisateur interactive. - CI/CD : Un pipeline automatisé utilisant GitHub Actions 🛠️ pour construire et déployer les images Docker à chaque modification du code.
- Déploiement : Un processus automatisé pour déployer les conteneurs sur un serveur distant, en s'assurant que les dépendances (Docker) sont présentes et à jour.
- Docker installé sur votre machine locale 🐳.
- Git pour cloner le dépôt 📁.
- Compte GitHub avec accès au GitHub Container Registry (GHCR) 🔐.
- Serveur distant avec accès SSH pour le déploiement 🖥️.
- Clé SSH pour l'authentification sans mot de passe 🔑.
- Connaissances de base en Docker, Docker Compose et GitHub Actions 📝.
- Collecte des données : Obtenir un jeu de données d'images de fruits étiquetées 🍓🍍.
- Prétraitement : Nettoyer et préparer les données pour l'entraînement 🧹.
- Entraînement du modèle : Utiliser un framework de machine learning (par exemple, TensorFlow, PyTorch) pour entraîner le modèle de classification 🧠.
- Sauvegarde du modèle : Enregistrer le modèle entraîné dans un format approprié pour une utilisation ultérieure 💾.
- Création de l'application FastAPI : Initialiser une application FastAPI en Python 🐍.
- Intégration du modèle : Charger le modèle de classification entraîné dans l'application 🎛️.
- Définition des endpoints : Créer des routes pour permettre aux clients de soumettre des images et de recevoir des prédictions 🔄.
- Tests locaux : Vérifier que l'API fonctionne correctement en local 🧪.
- Initialisation du projet Vue.js : Créer une nouvelle application Vue.js pour le frontend 🖥️.
- Conception de l'interface utilisateur : Développer une interface permettant aux utilisateurs de télécharger des images de fruits et de visualiser les résultats de la classification 🎨.
- Intégration avec l'API : Configurer les appels API pour interagir avec le backend FastAPI 🔗.
- Tests locaux : S'assurer que l'interface fonctionne correctement en local 🛠️.
- Création des Dockerfiles :
- Backend (
Backend/Dockerfile) : Rédiger unDockerfilepour l'application FastAPI, incluant toutes les dépendances nécessaires 📄. - Frontend (
Frontend/Dockerfile) : Rédiger unDockerfilepour l'application Vue.js 📄.
- Backend (
- Construction des images Docker :
- Backend :
cd Backend docker build -t demo-cicd-atut-backend .
- Frontend :
cd Frontend docker build -t demo-cicd-atut-frontend .
- Backend :
- Tests locaux des conteneurs :
- Backend :
docker run -d -p 8080:8080 demo-cicd-atut-backend
- Frontend :
docker run -d -p 80:80 demo-cicd-atut-frontend
- Accédez à l'API via
http://localhost:8080et au frontend viahttp://localhost🌐.
- Backend :
- Création du dépôt GitHub : Héberger le code source sur GitHub 📂.
- Configuration du GitHub Container Registry (GHCR) : Configurer GHCR pour stocker les images Docker 🗄️.
- Mise en place de GitHub Actions :
- Workflow de build : Créer un fichier de workflow (
.github/workflows/deploy.yml) pour automatiser la construction et le push des images Docker à chaque modification du code ⚙️. - Déclencheurs : Configurer le workflow pour s'exécuter lors des push sur la branche principale 🚦.
- Workflow de build : Créer un fichier de workflow (
- Secrets GitHub : Ajouter les secrets nécessaires (
GHCR_PAT,SSH_PRIVATE_KEY,SERVER_HOST,SERVER_USER,SERVER_PORT) dans les paramètres du dépôt 🔐.
- Script de déploiement (
deploy.sh) :- Vérifie si Docker est installé, et l'installe si nécessaire via
install_docker.sh🛠️. - Authentifie le serveur auprès de GHCR en utilisant le token
GHCR_PAT🔑. - Crée le fichier
docker-compose.ymlpour orchestrer les conteneurs 📄. - Lance ou met à jour les services Docker Compose selon qu'ils sont déjà en cours d'exécution ou non 🚀.
- Vérifie si Docker est installé, et l'installe si nécessaire via
- Script
install_docker.sh:- Vérifie si Docker est installé 🐳.
- Si non, il installe Docker en suivant les instructions officielles 🛠️.
- Installe également Docker Compose 📦.
- Token d'authentification (
GHCR_PAT) :- Doit avoir le scope
read:packagespour permettre le pull des images 🔑. - Est passé au serveur via les variables d'environnement lors de la connexion SSH 🌐.
- Doit avoir le scope
- Commande d'authentification :
echo $GHCR_PAT | docker login ghcr.io -u <GITHUB_USERNAME> --password-stdin
- Commandes pour pull les images :
docker pull ghcr.io/<GITHUB_USERNAME>/demo-cicd-atut-frontend:latest docker pull ghcr.io/<GITHUB_USERNAME>/demo-cicd-atut-backend:latest
- Assurez-vous que les images sont accessibles :
- Les images doivent être publiques ou le token doit avoir les permissions nécessaires 🔐.
-
Contenu du fichier :
services: frontend: image: ghcr.io/abrahamkoloboe27/demo-cicd-atut-frontend:latest container_name: frontend ports: - "80:80" networks: - demo-cicd-atut-network volumes: - frontend:/usr/share/nginx/html backend: image: ghcr.io/abrahamkoloboe27/demo-cicd-atut-backend:latest container_name: backend ports: - "8080:8080" networks: - demo-cicd-atut-network volumes: - backend:/app networks: demo-cicd-atut-network: driver: bridge volumes: frontend: backend:
-
Remarque : La version n'est pas spécifiée car elle est optionnelle et peut être omise 🔄.
-
Génération via le script
deploy.sh:- Le script crée le fichier
docker-compose.ymldans le répertoire de déploiement 📁.
- Le script crée le fichier
- Vérification de l'état des services :
- Le script vérifie si les services sont déjà en cours d'exécution avec
docker-compose ps -q🔍.
- Le script vérifie si les services sont déjà en cours d'exécution avec
- Lancement initial :
- Si les services ne tournent pas, le script exécute
docker-compose up -dpour les démarrer 🚀.
- Si les services ne tournent pas, le script exécute
- Mise à jour des services :
- Si les services tournent déjà, le script exécute
docker-compose pullpour récupérer les nouvelles images, puisdocker-compose up -dpour appliquer les changements 🔄.
- Si les services tournent déjà, le script exécute
-
Cloner le dépôt GitHub :
git clone https://github.com/<GITHUB_USERNAME>/<REPOSITORY_NAME>.git cd <REPOSITORY_NAME>
-
Backend :
cd Backend docker build -t demo-cicd-atut-backend .
-
Frontend :
cd ../Frontend docker build -t demo-cicd-atut-frontend .
-
Backend :
docker run -d -p 8080:8080 demo-cicd-atut-backend
- L'API est maintenant accessible sur
http://localhost:8080🌐.
- L'API est maintenant accessible sur
-
Frontend :
docker run -d -p 80:80 demo-cicd-atut-frontend
- Le frontend est accessible sur
http://localhost🌐.
- Le frontend est accessible sur
- Accéder au frontend :
- Ouvrez votre navigateur et rendez-vous sur
http://localhost🖥️.
- Ouvrez votre navigateur et rendez-vous sur
- Interaction avec l'API :
- Le frontend communique avec l'API backend qui tourne sur le port
8080🔄.
- Le frontend communique avec l'API backend qui tourne sur le port
- Tester l'application :
- Téléchargez une image de fruit et visualisez la prédiction 🍌➡️🤖.
Vous avez maintenant une application de classification de fruits entièrement fonctionnelle 🍇🍉, que vous pouvez exécuter localement ou déployer sur un serveur distant 🚀. Ce guide vous a accompagné à travers toutes les étapes, de la construction du modèle à l'automatisation du déploiement avec CI/CD 🤖.
- Génération d'une paire de clés SSH 🔑 :
ssh-keygen -t rsa -b 4096 -C "github-actions" -f github_actions_key - Ajout de la clé publique au serveur :
cat github_actions_key.pub >> ~/.ssh/authorized_keys
- Définition manuelle de la variable
GHCR_PATsur le serveur :export GHCR_PAT=your_personal_access_token - Test de l'authentification au GHCR sur le serveur :
echo $GHCR_PAT | docker login ghcr.io -u <GITHUB_USERNAME> --password-stdin
- Documentation de Docker 🐳
- Documentation de Docker Compose 📦
- Documentation de GitHub Actions 🤖
- Documentation de FastAPI 🐍
- Documentation de Vue.js 🖥️
Note : Assurez-vous de remplacer <GITHUB_USERNAME> par votre nom d'utilisateur GitHub réel dans les commandes et configurations, et <REPOSITORY_NAME> par le nom de votre dépôt 📛.
🎊 Merci d'avoir suivi ce guide ! N'hésitez pas à contribuer au projet ou à poser des questions si vous rencontrez des difficultés. Bonne continuation dans vos projets de développement ! 🚀