Vue Academy · Lektion

Full-Stack-Vue in der Produktion bereitstellen

Docker Compose für Vue + Fastify, nginx-Reverse-Proxy, SSL mit Let's Encrypt und CI/CD

Lektion 4 von 413 Schritte

Full-Stack-Vue in der Produktion bereitstellen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Produktionsarchitektur

Eine Full-Stack-Vue- plus Fastify-App läuft in der Produktion typischerweise in zwei Containern: einem nginx-Container, der die gebauten statischen Vue-Dateien ausliefert, und einem Fastify-API-Container. nginx fungiert außerdem als Reverse-Proxy für /api und leitet Anfragen an die API weiter.

Die Vue-App bauen

Bauen Sie die SPA mit Vite, um optimierte statische Assets im dist-Verzeichnis zu erzeugen. Dieses Verzeichnis wird von nginx ausgeliefert.

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

Vue-Dockerfile (mehrstufig)

Verwenden Sie einen mehrstufigen Docker-Build: Bauen Sie mit Node und kopieren Sie anschließend die statische Ausgabe in ein kleines nginx-Image. Das finale Image enthält nur die statischen Dateien und 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- und API-Proxy

Die nginx-Konfiguration liefert die SPA aus (mit einem try_files-Fallback auf index.html für clientseitiges Routing) und leitet /api anhand seines Servicenamens an den Fastify-Container weiter.

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

Das API-Image installiert die Produktionsabhängigkeiten und startet den Server. Binden Sie an 0.0.0.0, damit der Server von anderen Containern aus erreichbar ist.

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 verbindet die beiden Services in einem gemeinsamen Netzwerk. Das Proxy-Ziel fastify-api in nginx.conf entspricht dem Servicenamen an dieser Stelle.

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 anhand des Namens

Innerhalb des Compose-Netzwerks erreichen sich Container über den Servicenamen. nginx leitet an http://fastify-api:3000 weiter – ohne IPs und ohne öffentliche Freigabe des API-Ports.

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

SSL mit Certbot

Fügen Sie HTTPS mit Let's Encrypt über Certbot hinzu. Binden Sie die Zertifikate in nginx ein und konfigurieren Sie einen 443-Server-Block, der HTTP auf HTTPS umleitet.

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

Certbot-Erneuerung

Certbot-Zertifikate sind 90 Tage gültig. Führen Sie regelmäßig einen Erneuerungsbefehl aus (per Cron oder in einem Sidecar-Container) und laden Sie nginx neu, damit die erneuerten Zertifikate wirksam werden.

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

GitHub Actions CI/CD

Automatisieren Sie Build und Deployment mit GitHub Actions: Bei einem Push nach main bauen und testen Sie zunächst und erstellen und pushen anschließend Images oder verbinden sich per SSH mit dem Server, um die Images abzurufen und die Services mit Compose neu zu starten.

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'

Secrets und Umgebungsvariablen

Speichern Sie Secrets niemals in Images. Übergeben Sie sie über Umgebungsvariablen (environment / env_file in Compose), die aus den GitHub-Actions-Secrets stammen. Halten Sie JWT_SECRET, Datenbank-URLs usw. aus dem Repository heraus.

Kurzer Test

Testen Sie Ihr Verständnis des Full-Stack-Deployments.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben das Deployment in der Produktion gelernt:

Zwei Services: vue-nginx (statisch) und fastify-api
nginx.conf liefert die SPA aus und leitet /api an den Servicenamen der API weiter
docker-compose verbindet die Services; nur nginx wird auf dem Host veröffentlicht
HTTPS mit Certbot und planmäßiger Erneuerung
GitHub Actions baut, testet und deployt; Secrets bleiben in Umgebungsvariablen

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Full-Stack-Vue in der Produktion bereitstellen“ kostenlos?

Ja — der vollständige Text von „Full-Stack-Vue in der Produktion bereitstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Full-Stack-Vue in der Produktion bereitstellen“?

Docker Compose für Vue + Fastify, nginx-Reverse-Proxy, SSL mit Let's Encrypt und CI/CD Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Full-Stack-Vue in der Produktion bereitstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Fastify-Backend für Vue-SPAs
JWT-Authentifizierung: Login und Aktualisierung
Authentifizierte API-Aufrufe mit Axios-Interceptors
Full-Stack-Vue in der Produktion bereitstellen

← Zurück zu Vue Academy