11. Hébergement ‐ Déploiement - Zwarmex/Projet-integration-2024-2025 GitHub Wiki

Expliqer l'hébergement de votre application. (Comment est-ce hébergé, quelles configuration, comment le mettre en place, ...) Expliqer le déploiement de votre application.

1. Hébergement de l'application

L'application est hébergée sur une plateforme cloud qui permet de gérer les environnements backend et frontend séparément, tout en connectant les différents services requis (base de données, WebSocket, MQTT, etc.).

Plateforme d'hébergement utilisée : Render

Render est une plateforme cloud qui offre un hébergement pour des services web, API, bases de données, et autres applications. Elle gère automatiquement les déploiements en continu via un dépôt Git, simplifiant les mises à jour.

2. Comment l'application est hébergée

  • Backend :

    • Le backend (Node.js / Express) est configuré comme un Web Service sur Render.
    • Le serveur utilise des environnements dynamiques pour gérer le port (via process.env.PORT) afin de s'adapter à Render.
    • Une connexion MQTT est configurée pour interagir avec des dispositifs IoT.
  • Frontend :

    • Le frontend (React) est hébergé comme une application statique via la commande de build (npm run build) qui génère les fichiers prêts pour le déploiement.
    • Les fichiers sont servis via le CDN intégré de Render.
  • Base de données :

    • L'application utilise MongoDB Atlas pour stocker les données. MongoDB Atlas est une solution cloud pour MongoDB qui offre des clusters faciles à configurer.

3. Configuration de l’hébergement

Backend :

  • Dépôt : Connecté à la branche main de ce dépôt GitHub.
  • Root Directory : back
  • Build Command : npm install
  • Start Command : npm start
  • Auto Deploy : Oui
  • Variables d'environnements :
        PORT : Dynamique (géré par Render).
        MQTT_HOST, MQTT_PORT, MQTT_USERNAME, MQTT_PASSWORD : Utilisées pour la connexion au broker MQTT.
        WEB_SOCKET : Origine autorisée pour les connexions Socket.
        ATLAS_URI : URL de connexion à la base de données MongoDB Atlas.

Frontend :

  • Dépôt : Connecté à la branche main de ce dépôt GitHub.
  • Root Directory : front
  • Build Command : npm install; npm build
  • Publish Directory : build
  • Auto Deploy : Oui

Base de données :

  • MongoDB Atlas
  • Un cluster cloud est configuré avec un utilisateur disposant d’un accès limité.
  • L’URI de connexion (mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) est ajoutée comme variable d’environnement.

4. Déploiement de l'application

Pipeline de déploiement continu (CI/CD) :

  • GitHub : L'application est versionnée et le dépôt est connecté à Render.
  • À chaque modification sur la branche principale (ou une branche spécifique définie), Render :
    • Tire les dernières modifications du dépôt.
    • Exécute la commande npm install pour installer les dépendances.
    • Exécute les commandes de build (npm run build pour le frontend).
    • Redémarre automatiquement le service.

Spécificités du backend :

  • Le backend est un serveur RESTful qui expose des endpoints pour communiquer avec les composants IoT via MQTT et avec le frontend via Socket.IO.

Spécificités du frontend :

  • Les appels API du frontend pointent vers les endpoints exposés par le backend (par exemple : /api/niveau).

5. Résumé

Technologies utilisées pour l’hébergement :

  • Render : Backend et frontend.
  • MongoDB Atlas : Base de données cloud.
  • Broker MQTT : Communication avec les dispositifs IoT.

Déploiement automatisé :

  • Intégration GitHub pour des déploiements CI/CD.
  • Build et redémarrage automatiques gérés par Render.
⚠️ **GitHub.com Fallback** ⚠️