Vue Academy · Lezione

Deployment in produzione di Vue full-stack

Docker Compose per Vue + Fastify, reverse proxy nginx, SSL con Let's Encrypt, CI/CD.

Lezione 4 di 413 passaggi

Deployment in produzione di Vue full-stack è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

La topologia di produzione

In produzione, un'app full-stack Vue + Fastify viene generalmente eseguita in due container: un container nginx che serve i file statici compilati di Vue e un container API Fastify. nginx fa anche da reverse proxy per /api verso l'API.

Compilare l'app Vue

Compili la SPA con Vite per produrre risorse statiche ottimizzate nella directory dist. Sarà questa directory a essere servita da nginx.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Dockerfile Vue (multi-stage)

Utilizzi una compilazione Docker multi-stage: compili con Node e poi copi l'output statico in una piccola immagine nginx. L'immagine finale contiene solo i file statici e nginx.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: proxy SPA + API

La configurazione nginx serve la SPA (con un fallback try_files verso index.html per il routing lato client) e inoltra /api al container Fastify usando il nome del servizio.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Dockerfile Fastify

L'immagine dell'API installa le dipendenze di produzione ed esegue il server. Effettui il bind su 0.0.0.0 affinché sia raggiungibile dagli altri container.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose collega i due servizi tramite una rete condivisa. La destinazione del proxy fastify-api in nginx.conf corrisponde al nome del servizio qui definito.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Service discovery tramite nome

All'interno della rete compose, i container si raggiungono tramite il nome del servizio. nginx inoltra le richieste a http://fastify-api:3000: non servono indirizzi IP e la porta dell'API non viene esposta pubblicamente.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

SSL con Certbot

Aggiunga HTTPS usando Let's Encrypt tramite Certbot. Monti i certificati in nginx e configuri un server block sulla porta 443, reindirizzando HTTP a HTTPS.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Rinnovo dei certificati con Certbot

I certificati Certbot durano 90 giorni. Esegua un comando di rinnovo secondo una pianificazione (cron o un container sidecar) e ricarichi nginx affinché i certificati rinnovati diventino effettivi.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

CI/CD con GitHub Actions

Automatizzi compilazione e deployment con GitHub Actions: al push su main, esegua build e test, poi compili e pubblichi le immagini oppure si colleghi via SSH al server per eseguire il pull e il riavvio con compose.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Secret e ambiente

Non inserisca mai i secret nelle immagini. Li passi tramite variabili d'ambiente (compose environment / env_file) ottenute dai secret di GitHub Actions. Mantenga JWT_SECRET, gli URL del database e così via fuori dal repository.

Verifica rapida

Verifichi la sua comprensione del deployment full-stack.

Rispondi nella lezione interattiva

Riepilogo

Ha imparato a eseguire il deployment in produzione:

Due servizi: vue-nginx (statico) e fastify-api
nginx.conf serve la SPA e inoltra /api al nome del servizio API
docker-compose li collega; solo nginx viene pubblicato sull'host
HTTPS tramite Certbot con rinnovo pianificato
GitHub Actions compila, esegue i test e fa il deployment; i secret rimangono nelle variabili d'ambiente

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 42
Lezioni: 156

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Deployment in produzione di Vue full-stack» è gratuita?

Sì — il testo completo di «Deployment in produzione di Vue full-stack» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Deployment in produzione di Vue full-stack»?

Docker Compose per Vue + Fastify, reverse proxy nginx, SSL con Let's Encrypt, CI/CD. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Deployment in produzione di Vue full-stack»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Backend Fastify per SPA Vue
Autenticazione JWT: login e refresh
Chiamate API autenticate con gli interceptor Axios
Deployment in produzione di Vue full-stack

← Torna a Vue Academy