# 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

```bash
# 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:
```bash
docker network create traefik-network
```

### Configurazione

1. Copia il file di esempio delle variabili d'ambiente:
   ```bash
   cp .env.example .env
   ```

2. Modifica il file [.env](.env) con il tuo dominio:
   ```env
   DOMAIN=vue-demo.tuodominio.com
   ```

### Avvio Manuale

```bash
# 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](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](.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**:
   ```bash
   mkdir -p /opt/vue-demo
   chown deployer:deployer /opt/vue-demo
   ```

3. **L'utente SSH abbia accesso a Docker**:
   ```bash
   usermod -aG docker deployer
   ```

### Esempio Configurazione Traefik

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

```yaml
# 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](Dockerfile) - Multi-stage build con Node.js e Nginx
- [docker-compose.yml](docker-compose.yml) - Orchestrazione container con labels Traefik
- [nginx.conf](nginx.conf) - Configurazione Nginx per SPA
- [.dockerignore](.dockerignore) - File esclusi dal build Docker

### CI/CD
- [.gitea/workflows/deploy.yml](.gitea/workflows/deploy.yml) - Pipeline CI/CD completa
- [.env.example](.env.example) - Template variabili d'ambiente

### Applicazione
- [src/App.vue](src/App.vue) - Componente principale con pagina di benvenuto
- [src/main.js](src/main.js) - Bootstrap applicazione Vue
- [index.html](index.html) - File HTML principale

## Troubleshooting

### Il sito non è raggiungibile

1. Verifica che Traefik sia in esecuzione:
   ```bash
   docker ps | grep traefik
   ```

2. Controlla i logs del container:
   ```bash
   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:
   ```bash
   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

```bash
# 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
```