Come Configurare un Ambiente di Sviluppo Locale con Docker

Nel moderno sviluppo software, disporre di un ambiente di sviluppo locale efficiente e replicabile è fondamentale per la produttività. Docker è lo strumento ideale per raggiungere questo obiettivo, permettendo agli sviluppatori di gestire con facilità ambienti multi-container.
In questo articolo ti guideremo nella creazione di un ambiente di sviluppo composto da PostgreSQL 15, Next.js 13 e un server WebSocket, il tutto gestito tramite Docker Compose.

_Perché Usare Docker?

Docker ti consente di eseguire applicazioni in ambienti isolati chiamati container, che includono tutto il necessario per l’esecuzione: dal codice e le librerie alle variabili d’ambiente. Questo garantisce che il tuo ambiente di sviluppo locale sia identico a quello di produzione, eliminando i problemi legati alle differenze di configurazione tra sistemi diversi.

Principali Vantaggi:

• Coerenza: Lo stesso ambiente su tutte le macchine.
• Isolamento: Nessun conflitto di dipendenze tra progetti.
• Scalabilità: Gestione semplice di microservizi e applicazioni complesse.

1. Setting up the development environment with Docker Compose

Useremo Docker Compose per orchestrare un ambiente che include PostgreSQL per il database, Next.js per il front-end e un server WebSocket per la comunicazione in tempo reale.

Creare il file docker-compose.yml

Il file docker-compose.yml è il cuore della nostra configurazione. IDefinisce i servizi per il database, il front-end e il server WebSocket. Di seguito è riportata la configurazione aggiornata con PostgreSQL 15 e Next.js 13.

version: '3.8'

services:
  db:
    image: postgres:15
    container_name: postgres_db
    environment:
      POSTGRES_USER: example_user
      POSTGRES_PASSWORD: example_pass
      POSTGRES_DB: example_db
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"
      
  nextjs:
    image: node:18
    container_name: nextjs_app
    volumes:
      - .:/app
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgres://example_user:example_pass@db:5432/example_db

  websocket:
    build: .
    command: node websocket-server.js
    ports:
      - "8080:8080"

volumes:
  pgdata:

Spiegazione:

• Il servizio db utilizza PostgreSQL 15, l’ultima versione stabile. Le credenziali del database sono configurate tramite variabili d’ambiente.
• Il servizio nextjs si basa su Node.js 18 e monta il codice sorgente locale nella directory /app all’interno del container. Utilizza Next.js 13, che introduce nuove funzionalità come layout annidati e miglioramenti al rendering lato server.
• Il servizio websocket è un semplice server Node.js che utilizza WebSocket per gestire la comunicazione in tempo reale.

2. Creare il Server WebSocket

Un elemento chiave delle applicazioni moderne è la comunicazione in tempo reale, spesso gestita tramite WebSocket. Vediamo come configurare un server WebSocket per comunicare con il front-end.

Configurazione del server WebSocket:

1. Crea il file websocket-server.js nella directory del progetto:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    ws.send('Response from WebSocket server');
  });

  ws.send('Welcome to the WebSocket server!');
});

2. Aggiorna il Dockerfile per il servizio WebSocket:

Se il tuo progetto non ha un Dockerfile, aggiungine uno per il server WebSocket:

FROM node:18

WORKDIR /app

COPY . .

RUN npm install

CMD ["node", "websocket-server.js"]

Questa configurazione avvia un semplice server WebSocket che risponde a ogni messaggio inviato da un client.

3. Configurare Next.js per Utilizzare i WebSocket

Dopo aver configurato il server WebSocket, possiamo collegare il client Next.js per comunicare con esso.

Aggiungi la connessione WebSocket in una pagina di Next.js:
Apri un file in Next.js (e.g., pages/index.js) e aggiungi il seguente codice per connetterti al server WebSocket:

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    
    ws.onopen = () => {
      console.log('Connected to WebSocket server');
      ws.send('Hello, server!');
    };

    ws.onmessage = (event) => {
      console.log('Message from server:', event.data);
    };

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

  return <div>Welcome to the WebSocket system with Next.js!</div>;
}

Questo esempio stabilisce una connessione WebSocket con il server sulla porta 8080 e gestisce la ricezione dei messaggi provenienti dal server.

4. Avviare l’Ambiente di Sviluppo

Una volta configurati tutti i file necessari, puoi avviare l’ambiente di sviluppo con Docker usando il seguente comando:

docker-compose up

Questo comando avvierà tutti i container definiti nel file docker-compose.yml file. Dopo l’avvio:

• L’app Next.js sarà accessibile all’indirizzo http://localhost:3000.
• Il server WebSocket sarà in listening su ws://localhost:8080.
• PostgreSQL sarà in esecuzione sulla porta predefinita 5432.

_Conclusione

Con Docker e Docker Compose, creare un ambiente di sviluppo locale con servizi complessi come un database, un’app Next.js e un server WebSocket diventa un processo semplice e scalabile.
Le versioni aggiornate di PostgreSQL 15 e Next.js 13 offrono funzionalità avanzate che migliorano l’efficienza e la produttività.

Docker garantisce coerenza tra ambiente di sviluppo e produzione, riducendo i problemi di compatibilità e accelerando il flusso di lavoro. Se hai bisogno di supporto nella configurazione o nell’ottimizzazione del tuo ambiente di sviluppo, Fyonda è qui per offrirti soluzioni su misura. Non vediamo l’ora di sentirti!