Next.js: Projeto Final: Deploy & CI/CD

# Uma linha do GitHub Actions dispara o deploy totalmente automatizado
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: amondnet/vercel-action@v20

Configuração JSON com chaves: framework ("nextjs"), buildCommand, outputDirectory, installCommand, regions (iad1/hkg1/gru1), env, crons, headers (headers de segurança + regras de cache) e redirects.

{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "regions": ["iad1", "hkg1", "gru1"],
  "env": {
    "NEXT_PUBLIC_APP_URL": "https://taskflow.vercel.app"
  },
  "crons": [
    {
      "path": "/api/cron/daily-digest",
      "schedule": "0 8 * * *"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    },
    {
      "source": "/uploads/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/app",
      "destination": "/dashboard",
      "permanent": true
    }
  ]
}

Configuração JSON aplicada com sucesso.

Comando concluído.

# 1. Instalar o Vercel CLI
npm install -g vercel

# 2. Fazer Login no Vercel
vercel login

# 3. Vincular o Projeto
vercel link

# 4. Configurar Variáveis de Ambiente
vercel env add DATABASE_URL
vercel env add AUTH_SECRET
vercel env add GOOGLE_CLIENT_ID
vercel env add GOOGLE_CLIENT_SECRET
vercel env add AUTH_URL
vercel env add NEXT_PUBLIC_POSTHOG_KEY
vercel env add SENTRY_DSN

# 5. Deploy de Preview
vercel

# 6. Deploy em Produção
vercel --prod

# 7. Ver os logs de deploy
vercel logs

added 127 packages in 3.2s

38 packages are looking for funding
  run `npm fund` for details
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.
Environment variable set.

Vercel CLI 28.0.0
? Set up and deploy "C:\Users\admin\taskflow"? [Y/n] Y
? Which scope? Acme Corp
? Link to existing project? No
? What's your project's name? taskflow
? In which directory is your code? ./
Auto-detected Project Settings (Next.js):
- Build Command: npx next build
- Output Directory: .next
- Node.js Version: 20.x
✅ Production: https://taskflow.vercel.app [7s]

# 1. Criar Banco de Dados Postgres
vercel env add DATABASE_URL

# 2. Instalar o Vercel Postgres SDK
npm install @vercel/postgres

# 3. Atualizar a Fonte de Dados do Prisma

// prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  // Vercel Postgres — Gerenciamento Automático de Pool de Conexões
  // No Vercel, habilite shadowDatabaseUrl para evitar conflitos de migração
}

Schema do Prisma atualizado. Execute npx prisma generate para sincronizar o client.

// src/lib/db.ts
import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Sending build context to Docker daemon  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

# ============================================
# Estágio 1: Dependências
# ============================================
FROM node:20-alpine AS deps
RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci --only=production --ignore-scripts
RUN npm ci --only=development --ignore-scripts

# ============================================
# Estágio 2: Build
# ============================================
FROM node:20-alpine AS builder
WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production
ENV NEXT_OUTPUT=standalone

RUN npx prisma generate
RUN npm run build

# ============================================
# Estágio 3: Runner de Produção
# ============================================
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder /app/prisma ./prisma
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma

USER nextjs

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

CMD ["node", "server.js"]

Sending build context to Docker daemon  4.096kB
Step 1/8 : FROM node:20-alpine AS deps
 ---> 1dd67de0f936
...
Successfully built a7b3c2d1e0f9
Successfully tagged taskflow:latest

Salve a configuração YAML acima no caminho do arquivo especificado. As configurações entrarão em vigor na próxima reinicialização do servidor.

version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://taskflow:password@db:5432/taskflow
      - AUTH_SECRET=${AUTH_SECRET}
      - AUTH_URL=https://taskflow.example.com
      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
      - NEXTAUTH_URL=https://taskflow.example.com
      - NODE_ENV=production
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3000/api/health"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: postgres:16-alpine
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=taskflow
      - POSTGRES_USER=taskflow
      - POSTGRES_PASSWORD=${DB_PASSWORD}
    ports:
      - "5432:5432"
    restart: unless-stopped
    networks:
      - taskflow-network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U taskflow"]
      interval: 10s
      timeout: 5s
      retries: 5

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./ssl:/etc/nginx/ssl:ro
    depends_on:
      - app
    restart: unless-stopped
    networks:
      - taskflow-network

volumes:
  postgres-data:

networks:
  taskflow-network:
    driver: bridge

Seções de configuração: version, services, volumes, networks.

Seções: version, services, volumes, networks.

# nginx.conf
events {
  worker_connections 1024;
}

http {
  upstream taskflow_app {
    server app:3000;
  }

  server {
    listen 80;
    server_name taskflow.example.com;
    return 301 https://$server_name$request_uri;
  }

  server {
    listen 443 ssl http2;
    server_name taskflow.example.com;

    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # Cabeçalhos de segurança
    add_header X-Frame-Options "DENY" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # Compressão Gzip
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
    gzip_min_length 1000;
    gzip_comp_level 6;

    # Assets estáticos (cache permanente)
    location /_next/static {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      expires 365d;
      add_header Cache-Control "public, immutable";
    }

    # Uploads
    location /uploads {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      expires 30d;
      add_header Cache-Control "public, immutable";
    }

    # Rotas da API (sem cache)
    location /api {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_no_cache 1;
      proxy_cache_bypass 1;
    }

    # Todo o restante
    location / {
      proxy_pass http://taskflow_app;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;

      # Suporte a WebSocket
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }
}

Configuração do Nginx aplicada. Recarregue para ativar.

# ============================================
# Processo Completo de Deploy em Produção do TaskFlow
# ============================================

# --- Plano A: Deploy no Vercel ---

# 1. Verificações Pré-Build
npm run lint && npx tsc --noEmit && npm run test -- --run

# 2. Build e Verificação
npm run build
# Saída: ✓ Compiled successfully in 12.8s

# 3. Deploy de Preview
vercel
# Saída: https://taskflow-git-feature-abc123.vercel.app

# 4. Executar Testes E2E
npx playwright test --url=https://taskflow-git-feature-abc123.vercel.app

# 5. Inspeção Lighthouse
npx lhci autorun

# 6. Deploy em Produção
vercel --prod
# Saída: https://taskflow.vercel.app (Production)

# 7. Configurar um Domínio Personalizado
vercel domains add taskflow.example.com
# Saída: ✓ Domain taskflow.example.com added

# 8. Verificação
curl -I https://taskflow.example.com/api/health
# Saída: HTTP/2 200

# --- Plano B: Docker Self-Hosted ---

# 1. Construir Imagem Docker
docker build -t taskflow:latest .

# 2. Iniciar o serviço
docker compose up -d

# 3. Executar a migração do banco de dados
docker compose exec app npx prisma migrate deploy

# 4. Executar Seeding
docker compose exec app npx prisma db seed

# 5. Verificação
curl http://localhost/api/health
# Saída: {"status":"healthy","timestamp":"2026-07-06T10:00:00Z"}

# 6. Ver Logs
docker compose logs -f app

# 7. Métricas de Monitoramento
# - PostHog: https://app.posthog.com/project/taskflow
# - Sentry: https://sentry.io/organizations/acme/projects/taskflow
# - Painel Vercel: https://vercel.com/acme/taskflow

# --- Validação de Performance ---

# Relatório Lighthouse
# Performance: 94/100 ✅
# Acessibilidade: 97/100 ✅
# Boas Práticas: 93/100 ✅
# SEO: 100/100 ✅

# Core Web Vitals (RUM)
# LCP: 1.2s ✅ (Objetivo < 2.5s)
# FID: 12ms ✅ (Objetivo < 100ms)
# CLS: 0.02 ✅ (Objetivo < 0.1)