Vue Academy · Lektion

Deployment af full-stack Vue til produktion

Docker Compose til Vue + Fastify, nginx reverse proxy, SSL med Let's Encrypt og CI/CD

Lektion 4 af 413 trin

Deployment af full-stack Vue til produktion er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Produktionstopologien

En full-stack Vue- og Fastify-app i produktion kører typisk som to containere: en nginx-container, der leverer de byggede statiske Vue-filer, og en Fastify API-container. nginx fungerer også som reverse-proxy for /api til API'et.

Bygning af Vue-appen

Byg SPA'en med Vite for at fremstille optimerede statiske aktiver i dist. Det er dem, nginx skal levere.

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

Vue Dockerfile (flertrin)

Brug en Docker-bygning i flere trin: Byg med Node, og kopiér derefter det statiske output til et lille nginx-image. Det endelige image indeholder kun statiske filer og 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: SPA og API-proxy

nginx-konfigurationen leverer SPA'en med en try_files-reservehåndtering til index.html for routing på klientsiden og videresender /api til Fastify-containeren via dens tjenestenavn.

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;
  }
}

Fastify Dockerfile

API-imaget installerer produktionsafhængigheder og kører serveren. Bind til 0.0.0.0, så den kan nås fra andre containere.

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 forbinder de to tjenester på et fælles netværk. Proxy-målet fastify-api i nginx.conf svarer til tjenestenavnet her.

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'

Tjenesteopdagelse efter navn

På compose-netværket kan containere nå hinanden via tjenestenavn. nginx videresender til http://fastify-api:3000 — ingen IP-adresser og ingen offentlig eksponering af API-porten.

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

SSL med Certbot

Tilføj HTTPS med Let's Encrypt via Certbot. Montér certifikaterne i nginx, og konfigurér en serverblok på port 443, der omdirigerer HTTP til 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;
}

Fornyelse af Certbot-certifikater

Certbot-certifikater gælder i 90 dage. Kør en fornyelseskommando efter en tidsplan, f.eks. via cron eller en sidecar-container, og genindlæs nginx, så de fornyede certifikater træder i kraft.

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

GitHub Actions CI/CD

Automatisér bygning og udrulning med GitHub Actions: Ved push til main bygger og tester du, hvorefter du bygger og sender images eller opretter forbindelse via SSH til serveren for at hente og genstarte med 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'

Hemmeligheder og miljø

Indbyg aldrig hemmeligheder i images. Send dem via miljøvariabler, f.eks. compose environment eller env_file, som hentes fra GitHub Actions-hemmeligheder. Hold JWT_SECRET, database-URL'er osv. ude af repositoriet.

Hurtig kontrol

Test din forståelse af udrulning af en full-stack-app.

Besvar den i den interaktive lektion

Opsummering

Du har lært om produktionsudrulning:

To tjenester: vue-nginx til statisk indhold og fastify-api
nginx.conf leverer SPA'en og videresender /api til API-tjenestens navn
docker-compose forbinder dem; kun nginx offentliggøres på værten
HTTPS via Certbot med planlagt fornyelse
GitHub Actions bygger, tester og udruller; hemmelighederne bliver i miljøvariabler

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Deployment af full-stack Vue til produktion” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Deployment af full-stack Vue til produktion”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Deployment af full-stack Vue til produktion”?

Docker Compose til Vue + Fastify, nginx reverse proxy, SSL med Let's Encrypt og CI/CD Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Deployment af full-stack Vue til produktion”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Fastify-backend til Vue-SPA'er
JWT-autentificering: Login og refresh
Autentificerede API-kald med Axios-interceptors
Deployment af full-stack Vue til produktion

← Tilbage til Vue Academy