Deploy de Apps React/Next.js

Mapa de Decisão

VPS — Fundamentos

copy# Node via NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts && nvm use --lts

# Nginx
sudo apt install nginx -y
sudo ufw allow 'Nginx Full'

A. Vercel

Mais fácil. CI/CD automático a cada push no main.

1. Push código para GitHub
2. Acessar vercel.com → Add New Project
3. Importar repositório → Vercel detecta framework
4. Deploy — URL gerada em ~1 min

B. SPA no VPS — Nginx Nativo

copycd ~/apps/meu-app
git pull origin main
npm ci
npm run build

sudo mkdir -p /var/www/meu-app
sudo cp -r dist/* /var/www/meu-app/
sudo chown -R www-data:www-data /var/www/meu-app

/etc/nginx/sites-available/meu-app

copyserver {
    listen 80;
    server_name meu-app.com;

    root /var/www/meu-app;
    index index.html;

    # SPA routing — todas as rotas → index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

copysudo ln -s /etc/nginx/sites-available/meu-app /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

C. SPA no VPS — Docker Multi-Stage

copyFROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine AS runner
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

nginx.conf para SPA

copyserver {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

copydocker build -t meu-app:latest .
docker run -d --name meu-app -p 3000:80 --restart unless-stopped meu-app:latest

D. SSR/Next.js — PM2 + Nginx

copynpm install -g pm2

cd ~/apps/meu-next-app
git pull origin main
npm ci && npm run build

pm2 start npm --name "meu-app" -- start
pm2 save
pm2 startup   # copiar e rodar o comando gerado

Nginx — proxy reverso

copyserver {
    listen 80;
    server_name meu-app.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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_cache_bypass $http_upgrade;
    }
}

PM2 — Comandos

E. SSR/Next.js — Docker (4 stages)

copyFROM node:20-alpine AS base
WORKDIR /app
COPY package*.json ./

FROM base AS dependencies
RUN npm ci

FROM dependencies AS builder
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
EXPOSE 3000
CMD ["node", "server.js"]

copydocker build -t meu-next-app:latest .
docker run -d --name meu-next-app -p 3000:3000 \
  --restart unless-stopped \
  -e NODE_ENV=production \
  meu-next-app:latest

CI/CD com GitHub Actions

Setup de Secrets

Gerar chave SSH dedicada para CI/CD no servidor:

copyssh-keygen -t ed25519 -C "github-actions" -f ~/.ssh/github_actions -N ""
cat ~/.ssh/github_actions.pub >> ~/.ssh/authorized_keys
cat ~/.ssh/github_actions   # copiar este conteúdo

No repositório GitHub: Settings → Secrets and variables → Actions → New repository secret

Workflow YAML

.github/workflows/deploy.yml

copyname: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd ~/apps/meu-app
            git pull origin main
            npm ci
            npm run build
            pm2 reload meu-app

Variação — Docker

copyscript: |
  cd ~/apps/meu-app
  git pull origin main
  docker build -t meu-app:latest .
  docker stop meu-app || true
  docker rm meu-app || true
  docker run -d --name meu-app -p 3000:3000 \
    --restart unless-stopped meu-app:latest

Variação — SPA estático

copyscript: |
  cd ~/apps/meu-app
  git pull origin main
  npm ci && npm run build
  sudo cp -r dist/* /var/www/meu-app/

Comparação Geral

Variáveis de Ambiente

copy# .env.production no servidor (nunca comitar)
cp .env.example .env.production
nvim .env.production

copy# PM2 ecosystem (ecosystem.config.js)
module.exports = {
  apps: [{
    name: 'meu-app',
    script: 'node_modules/.bin/next',
    args: 'start',
    env_production: {
      NODE_ENV: 'production',
      PORT: 3000
    }
  }]
}

copy# Docker
docker run -d --env-file .env.production meu-app:latest