first commit

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install)"
+    ]
+  }
+}

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.gitignore
+*.md
+.DS_Store
+npm-debug.log
+.env

.env.example

@@ -0,0 +1,2 @@
+# Dominio per l'applicazione
+DOMAIN=vue-demo.example.com

.gitea/workflows/deploy.yml

@@ -0,0 +1,107 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  pull_request:
+    branches:
+      - main
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist/
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build Docker image
+        run: |
+          docker build -t vue-demo:latest .
+          docker tag vue-demo:latest vue-demo:${{ github.sha }}
+
+      - name: Save Docker image
+        run: docker save vue-demo:latest | gzip > vue-demo-image.tar.gz
+
+      # Deploy su server con Traefik via SSH
+      - name: Deploy to server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          source: "docker-compose.yml,vue-demo-image.tar.gz"
+          target: "${{ secrets.DEPLOY_PATH }}"
+
+      - name: Create .env file on server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            cd ${{ secrets.DEPLOY_PATH }}
+            echo "DOMAIN=${{ secrets.DOMAIN }}" > .env
+
+      - name: Deploy with Docker and Traefik
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          script: |
+            cd ${{ secrets.DEPLOY_PATH }}
+
+            # Carica l'immagine Docker
+            docker load < vue-demo-image.tar.gz
+
+            # Crea rete Traefik se non esiste
+            docker network inspect traefik-network >/dev/null 2>&1 || docker network create traefik-network
+
+            # Ferma e rimuovi container precedente
+            docker-compose down
+
+            # Avvia nuovo container
+            docker-compose up -d
+
+            # Cleanup vecchie immagini
+            docker image prune -f

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.DS_Store
+*.local
+.env

Dockerfile

@@ -0,0 +1,30 @@
+# Build stage
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+# Copia i file di dipendenze
+COPY package*.json ./
+
+# Installa le dipendenze
+RUN npm ci
+
+# Copia il resto dei file
+COPY . .
+
+# Build dell'applicazione
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copia i file buildati
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copia la configurazione nginx personalizzata
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Espone la porta 80
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,222 @@
+# 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
+```

docker-compose.yml

@@ -0,0 +1,35 @@
+version: '3.8'
+
+services:
+  vue-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: vue-demo-app
+    restart: unless-stopped
+    networks:
+      - traefik-network
+    labels:
+      - "traefik.enable=true"
+
+      # HTTP Router
+      - "traefik.http.routers.vue-demo.rule=Host(`${DOMAIN}`)"
+      - "traefik.http.routers.vue-demo.entrypoints=web"
+      - "traefik.http.routers.vue-demo.middlewares=redirect-to-https"
+
+      # HTTPS Router
+      - "traefik.http.routers.vue-demo-secure.rule=Host(`${DOMAIN}`)"
+      - "traefik.http.routers.vue-demo-secure.entrypoints=websecure"
+      - "traefik.http.routers.vue-demo-secure.tls=true"
+      - "traefik.http.routers.vue-demo-secure.tls.certresolver=letsencrypt"
+
+      # Service
+      - "traefik.http.services.vue-demo.loadbalancer.server.port=80"
+
+      # Middleware per redirect HTTP -> HTTPS
+      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
+      - "traefik.http.middlewares.redirect-to-https.redirectscheme.permanent=true"
+
+networks:
+  traefik-network:
+    external: true

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="it">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Benvenuto - Vue Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,30 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 10240;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript application/json;
+    gzip_disable "MSIE [1-6]\.";
+
+    # Gestione delle rotte per SPA
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache per asset statici
+    location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "vue-demo",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}

src/App.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="welcome-container">
+    <div class="welcome-card">
+      <h1>👋 Benvenuto!</h1>
+      <p>Questa è una demo di Vue.js</p>
+      <div class="info">
+        <p>Stai utilizzando Vue 3 con Vite</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.welcome-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.welcome-card {
+  background: white;
+  padding: 3rem;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  max-width: 500px;
+}
+
+h1 {
+  font-size: 3rem;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+p {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 1rem;
+}
+
+.info {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 2px solid #f0f0f0;
+}
+
+.info p {
+  font-size: 1rem;
+  color: #999;
+}
+</style>

src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

traefik-example/README.md

@@ -0,0 +1,68 @@
+# Esempio Configurazione Traefik
+
+Questa directory contiene un esempio di configurazione Traefik per il server di produzione.
+
+## Setup Iniziale
+
+1. Crea la directory sul server:
+```bash
+mkdir -p /opt/traefik/letsencrypt
+cd /opt/traefik
+```
+
+2. Copia il file docker-compose.yml in questa directory
+
+3. Modifica l'email per Let's Encrypt:
+```bash
+nano docker-compose.yml
+# Modifica: tua-email@example.com
+```
+
+4. Crea la rete Docker:
+```bash
+docker network create traefik-network
+```
+
+5. Avvia Traefik:
+```bash
+docker-compose up -d
+```
+
+6. Verifica che sia attivo:
+```bash
+docker ps
+docker logs traefik
+```
+
+## Note di Sicurezza
+
+- **Dashboard**: La configurazione include il dashboard Traefik con autenticazione basic
+- Per generare una nuova password per il dashboard:
+  ```bash
+  # Installa htpasswd se necessario: apt-get install apache2-utils
+  htpasswd -nb admin tuapassword
+  ```
+- In produzione, considera di rimuovere completamente il dashboard o limitarlo a IP specifici
+
+## Configurazione Domini
+
+Dopo aver avviato Traefik, i tuoi container con le labels corrette saranno automaticamente esposti con:
+- Certificati SSL Let's Encrypt
+- Redirect automatico HTTP → HTTPS
+- Routing basato sul dominio
+
+## Troubleshooting
+
+### Certificati non vengono generati
+- Verifica che la porta 80 sia accessibile pubblicamente
+- Controlla i logs: `docker logs traefik`
+- Verifica che il dominio punti all'IP del server
+- Assicurati che il file `acme.json` abbia i permessi corretti:
+  ```bash
+  chmod 600 letsencrypt/acme.json
+  ```
+
+### Container non raggiungibili
+- Verifica che il container sia sulla rete `traefik-network`
+- Controlla i logs di Traefik per errori
+- Verifica le labels del container con: `docker inspect nome-container`

traefik-example/docker-compose.yml

@@ -0,0 +1,66 @@
+# Esempio di configurazione Traefik
+# Da usare come riferimento per configurare Traefik sul server di produzione
+
+version: '3.8'
+
+services:
+  traefik:
+    image: traefik:v2.10
+    container_name: traefik
+    restart: unless-stopped
+    security_opt:
+      - no-new-privileges:true
+    command:
+      # Dashboard
+      - "--api.dashboard=true"
+
+      # Provider Docker
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--providers.docker.network=traefik-network"
+
+      # Entrypoints
+      - "--entrypoints.web.address=:80"
+      - "--entrypoints.websecure.address=:443"
+
+      # Redirect HTTP to HTTPS
+      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
+      - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
+
+      # Let's Encrypt
+      - "--certificatesresolvers.letsencrypt.acme.email=tua-email@example.com"
+      - "--certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json"
+      - "--certificatesresolvers.letsencrypt.acme.httpchallenge=true"
+      - "--certificatesresolvers.letsencrypt.acme.httpchallenge.entrypoint=web"
+
+      # Logs
+      - "--log.level=INFO"
+      - "--accesslog=true"
+
+    ports:
+      - "80:80"
+      - "443:443"
+
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./letsencrypt:/letsencrypt
+
+    networks:
+      - traefik-network
+
+    labels:
+      # Dashboard (opzionale, rimuovi in produzione se non necessario)
+      - "traefik.enable=true"
+      - "traefik.http.routers.dashboard.rule=Host(`traefik.tuodominio.com`)"
+      - "traefik.http.routers.dashboard.entrypoints=websecure"
+      - "traefik.http.routers.dashboard.tls=true"
+      - "traefik.http.routers.dashboard.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.dashboard.service=api@internal"
+      # Autenticazione basic per dashboard
+      # Username: admin, Password: changeme (genera il tuo con: htpasswd -nb admin password)
+      - "traefik.http.routers.dashboard.middlewares=dashboard-auth"
+      - "traefik.http.middlewares.dashboard-auth.basicauth.users=admin:$$apr1$$8EVjn/nj$$GiLUZqcbueTFeD23SuB6x0"
+
+networks:
+  traefik-network:
+    external: true

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})