Vue Demo - Pagina di Benvenuto

Progetto demo Vue.js con deploy automatico tramite Docker, Traefik e Gitea Actions.

Requisiti

• Node.js 20+
• Docker e Docker Compose
• Traefik come reverse proxy (sul server di produzione)
• Gitea con Actions abilitato (per CI/CD)

Sviluppo Locale

# Installa dipendenze
npm install

# Avvia server di sviluppo
npm run dev

# Build per produzione
npm run build

Deploy con Docker e Traefik

Prerequisiti Server

Il server deve avere:

1. Docker e Docker Compose installati
2. Traefik configurato e in esecuzione
3. Una rete Docker chiamata traefik-network

Se non hai ancora la rete Traefik, creala con:

docker network create traefik-network

Configurazione

1. Copia il file di esempio delle variabili d'ambiente:

   cp .env.example .env
   

2. Modifica il file .env con il tuo dominio:

   DOMAIN=vue-demo.tuodominio.com
   

Avvio Manuale

# Build e avvio con docker-compose
docker-compose up -d

# L'applicazione sarà disponibile su https://vue-demo.tuodominio.com

Labels Traefik

Il docker-compose.yml include automaticamente:

• Router HTTP con redirect automatico a HTTPS
• Router HTTPS con certificati Let's Encrypt
• Configurazione del dominio tramite variabile DOMAIN
• Integrazione con la rete traefik-network

CI/CD con Gitea Actions

Il progetto include una configurazione completa per il deploy automatico con Gitea Actions e Traefik.

Setup Secrets in Gitea

Configura i seguenti secrets nel tuo repository Gitea (Settings → Secrets):

Secret	Descrizione	Esempio
SERVER_HOST	IP o hostname del server	192.168.1.100 o server.example.com
SERVER_USER	Username SSH	deployer
SSH_PRIVATE_KEY	Chiave privata SSH (completa)	-----BEGIN OPENSSH PRIVATE KEY-----...
DEPLOY_PATH	Path di deploy sul server	/opt/vue-demo
DOMAIN	Dominio dell'applicazione	vue-demo.example.com

Workflow Automatico

Il workflow in .gitea/workflows/deploy.yml esegue automaticamente:

1. Build:

   • Checkout del codice
   • Installazione dipendenze Node.js
   • Build dell'applicazione Vue

2. Deploy (solo su push a main/master):

   • Build dell'immagine Docker
   • Upload dell'immagine al server via SSH
   • Creazione automatica del file .env con il dominio
   • Verifica/creazione della rete traefik-network
   • Deploy del container con docker-compose
   • Cleanup delle vecchie immagini

Configurazione Server

Sul server di produzione, assicurati che:

1. Traefik sia configurato con:

   • Entrypoint web (porta 80)
   • Entrypoint websecure (porta 443)
   • Cert resolver letsencrypt configurato

2. La directory di deploy esista:

   mkdir -p /opt/vue-demo
   chown deployer:deployer /opt/vue-demo
   

3. L'utente SSH abbia accesso a Docker:

   usermod -aG docker deployer
   

Esempio Configurazione Traefik

Se non hai ancora Traefik configurato, ecco un esempio base:

# traefik/docker-compose.yml
version: '3.8'

services:
  traefik:
    image: traefik:v2.10
    container_name: traefik
    restart: unless-stopped
    command:
      - "--api.dashboard=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.websecure.address=:443"
      - "--certificatesresolvers.letsencrypt.acme.email=tua-email@example.com"
      - "--certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json"
      - "--certificatesresolvers.letsencrypt.acme.httpchallenge.entrypoint=web"
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./letsencrypt:/letsencrypt
    networks:
      - traefik-network

networks:
  traefik-network:
    external: true

Struttura File

Docker

• Dockerfile - Multi-stage build con Node.js e Nginx
• docker-compose.yml - Orchestrazione container con labels Traefik
• nginx.conf - Configurazione Nginx per SPA
• .dockerignore - File esclusi dal build Docker

CI/CD

• .gitea/workflows/deploy.yml - Pipeline CI/CD completa
• .env.example - Template variabili d'ambiente

Applicazione

• src/App.vue - Componente principale con pagina di benvenuto
• src/main.js - Bootstrap applicazione Vue
• index.html - File HTML principale

Troubleshooting

Il sito non è raggiungibile

1. Verifica che Traefik sia in esecuzione:

   docker ps | grep traefik
   

2. Controlla i logs del container:

   docker logs vue-demo-app
   

3. Verifica che il dominio punti al server corretto

Certificato SSL non viene generato

1. Verifica la configurazione Let's Encrypt in Traefik
2. Assicurati che il dominio sia raggiungibile pubblicamente sulla porta 80
3. Controlla i logs di Traefik:

   docker logs traefik
   

Deploy fallisce

1. Verifica i secrets in Gitea
2. Controlla che l'utente SSH abbia i permessi corretti
3. Verifica che la rete traefik-network esista sul server

Comandi Utili

# Visualizza logs dell'applicazione
docker logs vue-demo-app -f

# Riavvia l'applicazione
docker-compose restart

# Ferma l'applicazione
docker-compose down

# Aggiorna l'applicazione manualmente
git pull
docker-compose down
docker-compose build
docker-compose up -d