Come monitorare il deploy di un'istanza cloud con i Server-Sent Events (SSE)

In un ambiente di sviluppo moderno, il monitoraggio in tempo reale del deploy di un'istanza cloud è cruciale per garantire che tutto avvenga senza intoppi e per reagire prontamente a eventuali problemi. Utilizzare Server-Sent Events (SSE) nel frontend è un modo efficiente per ottenere aggiornamenti in tempo reale dal server. Questo articolo esplorerà come implementare questa funzionalità utilizzando una combinazione di backend Node.js e frontend React.

Cos'è Server-Sent Events (SSE)?

SSE è una tecnologia che consente al server di inviare aggiornamenti automatici al browser. A differenza di WebSocket, che offre una comunicazione bidirezionale, SSE è unidirezionale: il server invia dati al client, ma non viceversa. Questo lo rende ideale per applicazioni dove il client ha bisogno di essere aggiornato frequentemente su nuovi eventi, come nel caso del monitoraggio di un deploy.

Implementazione del Backend con Node.js

Prima di tutto, impostiamo un semplice server Node.js che invierà eventi SSE al frontend.


const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

// Simula il processo di deploy
app.get('/deploy', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    // Simula l'invio di eventi a intervalli regolari
    const deploySteps = [
        'Deploy iniziato...',
        'Caricamento file...',
        'Configurazione ambiente...',
        'Esecuzione script...',
        'Verifica integrità...',
        'Deploy completato!'
    ];

    let stepIndex = 0;

    const interval = setInterval(() => {
        if (stepIndex < deploySteps.length) {
            res.write(`data: ${deploySteps[stepIndex]}\n\n`);
            stepIndex++;
        } else {
            clearInterval(interval);
            res.end();
        }
    }, 2000); // Invio un evento ogni 2 secondi

    req.on('close', () => {
        clearInterval(interval);
    });
});

app.listen(PORT, () => {
    console.log(`Server avviato su http://localhost:${PORT}`);
});

Implementazione del Frontend con React

Ora, creiamo un'applicazione React che si connetta al nostro endpoint SSE e mostri i messaggi in tempo reale.


import { useEffect, useState } from 'react';

function DeployMonitor() {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const eventSource = new EventSource('http://localhost:3000/deploy');

        eventSource.onmessage = (event) => {
            setMessages((prevMessages) => [...prevMessages, event.data]);
        };

        eventSource.onerror = () => {
            console.error('Errore nella connessione SSE');
            eventSource.close();
        };

        return () => {
            eventSource.close();
        };
    }, []);

    return (
        <div>
            <h1>Monitoraggio Deploy</h1>
            <ul>
                {messages.map((msg, index) => (
                    <li key={index}>{msg}</li>
                ))}
            </ul>
        </div>
    );
}

export default DeployMonitor;

Vantaggi di SSE

  1. Semplicità: SSE è più semplice da implementare rispetto a WebSocket per casi d'uso unidirezionali.
  2. Compatibilità: SSE è ben supportato dai moderni browser.
  3. Efficienza: Mantiene una connessione aperta per inviare dati, riducendo il carico rispetto a richieste HTTP ripetute.

Conclusione

Monitorare il deploy di un'istanza cloud in tempo reale è essenziale per la gestione efficace delle applicazioni moderne. Utilizzare Server-Sent Events (SSE) consente di ottenere aggiornamenti continui e tempestivi, migliorando la reattività del team di sviluppo e la qualità del servizio. Con l'implementazione descritta, puoi facilmente monitorare i tuoi deploy direttamente dal frontend, assicurando una transizione fluida e senza sorprese.

Torna su