Как деплоишь приложение?

Как деплоишь приложение?

Деплой (развертывание) приложения — это процесс переноса кода из разработки на сервер, чтобы пользователи могли его использовать. Есть много способов, в зависимости от типа приложения и инфраструктуры.

Основные шаги деплоя

1. Подготовка кода

• Проверка, что код работает локально
• Прохождение всех тестов
• Проверка린тинга
• Сборка приложения

2. Выбор хостинга

• Облачные сервисы (Vercel, Netlify, AWS, DigitalOcean)
• VPS/Dedicated сервер
• Собственный сервер
• Контейнеризация (Docker)

3. Настройка окружения

• Environment variables (API ключи, URLs)
• Базы данных
• SSL сертификаты

4. Развертывание

• Загрузка файлов
• Установка зависимостей
• Запуск приложения

5. Мониторинг

• Проверка, что приложение работает
• Логирование ошибок
• Мониторинг производительности

Вариант 1: Vercel (самый простой для Next.js)

Vercel — это платформа от создателей Next.js, оптимизирована для React приложений.

# 1. Установить Vercel CLI
npm install -g vercel

# 2. Авторизоваться
vercel login

# 3. Деплоить
vercel

# 4. Production деплой
vercel --prod

Как это работает:

• Vercel подключается к твоему GitHub
• При каждом push в main автоматически деплоится
• URL: https://project-name.vercel.app
• Быстрая CDN доставка по всему миру

Конфиг vercel.json:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "env": {
    "API_URL": "@api_url",
    "NEXT_PUBLIC_API_KEY": "@api_key"
  }
}

Вариант 2: Netlify (для статических сайтов)

Netlify — хорошо подходит для статических и простых приложений.

# 1. Установить Netlify CLI
npm install -g netlify-cli

# 2. Авторизоваться
netlify login

# 3. Инициализировать проект
netlify init

# 4. Деплоить
netlify deploy --prod

Конфиг netlify.toml:

[build]
  command = "npm run build"
  publish = ".next"

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

[env]
  API_URL = "https://api.example.com"

Вариант 3: Docker + VPS (полный контроль)

Docker позволяет упаковать приложение в контейнер и развернуть на любом сервере.

Dockerfile:

# Стадия 1: Сборка
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

# Стадия 2: Production
FROM node:18-alpine

WORKDIR /app
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public

EXPOSE 3000

CMD ["npm", "start"]

Развертывание на VPS:

# 1. Залогиниться на сервер
ssh user@your-server.com

# 2. Установить Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

# 3. Клонировать код
git clone https://github.com/your-repo.git
cd your-repo

# 4. Собрать образ
docker build -t my-app:latest .

# 5. Запустить контейнер
docker run -d \
  -p 80:3000 \
  -e API_URL=https://api.example.com \
  --name my-app \
  my-app:latest

Вариант 4: GitHub Actions (автоматизация CI/CD)

GitHub Actions автоматизирует тестирование и деплой при каждом push.

.github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm test
      
      - name: Build
        run: npm run build
      
      - name: Deploy to Vercel
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
        run: vercel --prod --token $VERCEL_TOKEN

Вариант 5: Manual SSH (старомодный способ)

# 1. Собрать локально
npm run build

# 2. Залогиниться на сервер
ssh user@server.com

# 3. Навигировать в папку проекта
cd /var/www/my-app

# 4. Загрузить файлы (из локальной машины)
scp -r ./dist/* user@server.com:/var/www/my-app/

# 5. Перезагрузить сервер приложения
ssh user@server.com 'sudo systemctl restart my-app'

Пример: Complete Next.js Pipeline

1. Локальная разработка

# Работаешь локально
npm run dev  # http://localhost:3000

# Проверяешь все работает
npm test
npm run lint
npm run build

2. Коммит и push в GitHub

git add .
git commit -m "Add new feature"
git push origin main

3. Automatic CI/CD (GitHub Actions)

• Тесты запускаются
• Лinting проверяется
• Сборка выполняется

4. Automatic Deploy (Vercel)

• Если все OK, приложение автоматически деплоится
• Получаешь Preview URL для проверки
• После одобрения — production деплой

Environment Variables

Никогда не коммить секреты!

.env.local (локально, в .gitignore):

NEXT_PUBLIC_API_URL=http://localhost:3001
API_SECRET_KEY=super-secret-key
DATABASE_URL=postgresql://...

Production secrets (на хостинге):

• Vercel Dashboard → Settings → Environment Variables
• Или через CI/CD переменные: Secrets в GitHub

Использование в коде:

// Публичные переменные (видны в браузере)
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// Приватные переменные (только на сервере)
const secretKey = process.env.API_SECRET_KEY;

Health Check и Мониторинг

// pages/api/health.js — endpoint для мониторинга
export default function handler(req, res) {
  res.status(200).json({
    status: 'ok',
    timestamp: new Date(),
    version: process.env.APP_VERSION
  });
}

# Проверить, что сервер живой
curl https://my-app.com/api/health

Откат (Rollback)

Если деплой сломал приложение:

# Vercel
vercel rollback  # Вернуться к предыдущей версии

# Docker
docker run -d -p 80:3000 my-app:previous-tag

# GitHub Pages
git revert <commit-hash>
git push origin main

Оптимизация деплоя

1. Минимизация размера бандла

# Анализировать размер
NEXT_ANALYZE=true npm run build

# Результат в .next/static/chunks

2. Кэширование

// next.config.js
module.exports = {
  onDemandEntries: {
    maxInactiveAge: 60 * 1000,
    pagesBufferLength: 5
  }
};

3. CDN для статических файлов

• Cloudflare (бесплатно)
• AWS CloudFront
• Vercel Edge Network (встроено)

Чеклист перед деплоем

// 1. Проверить все переменные окружения
console.log(process.env.NEXT_PUBLIC_API_URL);

// 2. Убедиться, что нет хардкода
// ❌ const API_URL = 'http://localhost:3001'
// ✅ const API_URL = process.env.NEXT_PUBLIC_API_URL

// 3. Проверить логирование и обработка ошибок
try {
  await fetch(apiUrl);
} catch (error) {
  logger.error('API call failed', error);
}

// 4. Performance проверки
// Используй lighthouse
npx lighthouse https://my-app.com

// 5. Security
// Проверить HTTPS
// Установить security headers

Заключение

Рекомендации:

1. Для начинающих → Vercel или Netlify (просто, бесплатно)
2. Для enterprise → Docker + Kubernetes
3. Для MVP → GitHub Pages или простой VPS
4. Для production → Используй CI/CD (GitHub Actions, GitLab CI)
5. Всегда → Автоматизируй тесты и деплой, используй secrets для конфига

Самый важный момент: Не деплой руками в production. Используй CI/CD и автоматизацию!