Deployment
& CI/CD

Hosting — přehled možností

Kde nasadit web závisí na typu projektu. Statické weby (HTML/CSS/JS bez serveru) jsou nejjednodušší a nejlevnější — mnoho platforem je hostuje zdarma.

Vercel — deploy za 2 minuty

Vercel je nejjednodušší způsob, jak nasadit moderní web. Vytvoříte účet, připojíte GitHub repozitář a každý push automaticky spustí nový deployment.

První deployment — krok za krokem

vercel.json — konfigurace projektu

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",

  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],

  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ],

  "redirects": [
    { "source": "/old-url", "destination": "/new-url", "permanent": true }
  ]
}Kopírovat

Netlify — JAMstack specialista

Netlify je výbornou alternativou k Vercelu, zvláště pro statické weby a JAMstack. Má jedinečnou funkci — form handling bez backendu.

netlify.toml — konfigurace

[build]
  command   = "npm run build"
  publish   = "dist"

[[redirects]]
  from = "/*"
  to   = "/index.html"
  status = 200   # SPA routing

[[headers]]
  for = "/static/*"
    [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[context.deploy-preview]
  command = "npm run build -- --mode staging"Kopírovat

Netlify Forms — formulář bez backendu

<!-- Přidejte data-netlify="true" — Netlify zpracuje formulář -->
<form name="kontakt" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="kontakt">
  <input type="text"  name="jmeno"  placeholder="Jméno" required>
  <input type="email" name="email"  placeholder="Email" required>
  <textarea          name="zprava" placeholder="Zpráva"></textarea>
  <button type="submit">Odeslat</button>
</form>
<!-- Výsledky vidíte v Netlify Dashboard → Forms -->Kopírovat

CI/CD & GitHub Actions

CI/CD (Continuous Integration / Continuous Deployment) automatizuje testování a nasazení kódu. Každý push spustí pipeline — testy, build, deployment.

GitHub Actions — základní workflow

# .github/workflows/deploy.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build
        env:
          VITE_API_URL: ${{ secrets.VITE_API_URL }}

  deploy:
    needs: test           # spustí se jen po úspěšných testech!
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'   # jen pro main branch
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'Kopírovat

Environment Variables

Proměnné prostředí (env vars) oddělují konfiguraci od kódu. API klíče, URL databáze, tajné tokeny — nikdy ne přímo v kódu, vždy v env vars.

// Vite — prefix VITE_ pro frontend env vars
// (ostatní jsou dostupné jen na serveru!)
const apiUrl = import.meta.env.VITE_API_URL;
const isProd  = import.meta.env.PROD;    // boolean
const isDev   = import.meta.env.DEV;     // boolean
const mode    = import.meta.env.MODE;    // "development" | "production"

// Node.js / server-side
const dbUrl = process.env.DATABASE_URL;
const port  = process.env.PORT ?? 3000;

// TypeScript — rozšíření typů pro env vars
// vite-env.d.ts nebo env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_API_KEY: string;
}
interface ImportMeta {
  readonly env: ImportMetaEnv;
}Kopírovat

Nastavení env vars na platformách

Docker — úvod

Docker zabalí aplikaci i všechny závislosti do přenositelného "kontejneru". "Na mém stroji to funguje" problém zmizí — kontejner běží stejně všude.

# Dockerfile — popis jak sestavit kontejner
FROM node:20-alpine AS builder

WORKDIR /app

# Nejdřív zkopírovat package.json (cache layer)
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

# Produkční stage — jen nginx + build output
FROM nginx:alpine AS production

COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]Kopírovat

# docker-compose.yml — vývojové prostředí s databází
version: '3.8'
services:
  web:
    build: .
    ports: ["3000:3000"]
    environment:
      - DATABASE_URL=postgresql://postgres:heslo@db:5432/mydb
    depends_on: [db]
    volumes:
      - .:/app          # live reload pro vývoj
      - /app/node_modules

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: heslo
      POSTGRES_DB: mydb
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:Kopírovat

Praktické cvičení — GitHub Actions workflow

Napište GitHub Actions workflow soubor pro projekt s Vite. Pipeline musí: nainstalovat závislosti, spustit ESLint, spustit build, a při push na main deployovat na Vercel.

# Napište obsah souboru .github/workflows/deploy.yml
# Vzor pro Vite + Vercel deployment

name: CI/CD

on:
  # TODO: trigger na push na main a PR na main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      # TODO: checkout, setup node 20, npm ci, lint, build

  deploy:
    # TODO: needs test, podmínka jen pro main, deploy na Vercel

Taháček — Deployment reference

Vercel — nejrychlejší start

GitHub Actions zkratka

on:
  push:
    branches: [main]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci
      - run: npm run lint
      - run: npm run buildKopírovat

Zlatá pravidla

• ✅ .env.local v .gitignore — vždy
• ✅ .env.example do Gitu — dokumentuje potřebné proměnné
• ✅ Tajné klíče v GitHub Secrets, ne v kódu
• ✅ Preview deploy pro každý PR
• ✅ Deploy jen po úspěšných testech (needs: test)
• ✅ Multi-stage Dockerfile pro malé produkční image
• ❌ API klíče přímo v kódu nebo v README
• ❌ Deploy přímo na produkci bez testů