Vue Academy · Lektion

Driftsätt en fullstack-Vue-app i produktion

Docker Compose för Vue + Fastify, nginx som reverse proxy, SSL med Let's Encrypt och CI/CD.

Lektion 4 av 413 steg

Driftsätt en fullstack-Vue-app i produktion är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Produktionsarkitekturen

En fullstackapp med Vue och Fastify körs i produktion vanligtvis som två containrar: en nginx-container som serverar de byggda statiska Vue-filerna och en Fastify API-container. nginx fungerar också som reverse proxy för /api till API:t.

Bygga Vue-appen

Bygg SPA:n med Vite för att skapa optimerade statiska tillgångar i dist. Det är dessa filer som nginx ska servera.

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

Vue Dockerfile (flerstegsbygge)

Använd ett Docker-bygge i flera steg: bygg med Node och kopiera sedan det statiska resultatet till en liten nginx-avbildning. Den slutliga avbildningen innehåller endast statiska filer och 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 + API-proxy

nginx-konfigurationen serverar SPA:n (med en try_files-fallback till index.html för routing på klientsidan) och proxar /api till Fastify-containern via dess tjänstenamn.

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-avbildningen installerar produktionsberoenden och kör servern. Bind till 0.0.0.0 så att den kan nås från andra containrar.

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 kopplar samman de två tjänsterna i ett gemensamt nätverk. Proxy-målet fastify-api i nginx.conf motsvarar tjänstenamnet här.

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'

Tjänsteidentifiering via namn

I compose-nätverket når containrar varandra via tjänstenamn. nginx proxar till http://fastify-api:3000 – inga IP-adresser behövs och API-porten exponeras inte offentligt.

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

SSL med Certbot

Lägg till HTTPS med Let's Encrypt via Certbot. Montera certifikaten i nginx och konfigurera ett serverblock för 443 som omdirigerar HTTP till 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;
}

Förnya Certbot-certifikat

Certbot-certifikat gäller i 90 dagar. Kör ett förnyelsekommando enligt ett schema (med cron eller en sidecar-container) och ladda om nginx så att de förnyade certifikaten börjar gälla.

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

GitHub Actions CI/CD

Automatisera bygge och driftsättning med GitHub Actions: vid push till main bygger och testar ni och bygger sedan och pushar avbildningar eller ansluter via SSH till servern för att hämta och starta om 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'

Hemligheter och miljövariabler

Bädda aldrig in hemligheter i avbildningar. Skicka dem via miljövariabler (compose environment / env_file) från GitHub Actions-hemligheter. Håll JWT_SECRET, databas-URL:er och liknande utanför repot.

Snabb kontroll

Testa era kunskaper om fullstackdriftsättning.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er om driftsättning i produktion:

Två tjänster: vue-nginx (statiskt innehåll) och fastify-api
nginx.conf serverar SPA:n och proxar /api till API-tjänstens namn
docker-compose kopplar samman dem; endast nginx publiceras på värddatorn
HTTPS via Certbot med schemalagd förnyelse
GitHub Actions bygger, testar och distribuerar; hemligheter stannar i miljövariabler

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Driftsätt en fullstack-Vue-app i produktion” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Driftsätt en fullstack-Vue-app i produktion”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Driftsätt en fullstack-Vue-app i produktion”?

Docker Compose för Vue + Fastify, nginx som reverse proxy, SSL med Let's Encrypt och CI/CD. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Driftsätt en fullstack-Vue-app i produktion”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Fastify-backend för Vue-SPA:er
JWT-autentisering: Inloggning och förnyelse
Autentiserade API-anrop med Axios-interceptorer
Driftsätt en fullstack-Vue-app i produktion

← Tillbaka till Vue Academy