Как разворачивал приложение?

Процесс развёртывания фронтенд-приложения

Развёртывание (deployment) фронтенд-приложения - это многоэтапный процесс, который включает сборку кода, оптимизацию и публикацию на production сервер. Я участвовал в развёртывании приложений на различных платформах, от облачных сервисов до self-hosted решений. В этом ответе я рассмотрю полный цикл развёртывания современного фронтенд-приложения.

Технологический стек в моих проектах

В последних проектах я работал с:

// Стек технологий
- Next.js / React для фронтенда
- Webpack / Vite для сборки
- Docker для контейнеризации
- Dokku / Vercel для хостинга
- GitHub Actions / GitLab CI для CI/CD
- Nginx для reverse proxy

Процесс разработки и развёртывания

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

# Инициализация проекта
npm install
npm run dev

# Или для Next.js
npm create next-app@latest
cd my-app
npm run dev # Запуск на localhost:3000

2. Сборка и оптимизация

# Проверка качества кода
npm run lint
npm run test

# Сборка для production
npm run build

# Анализ бандла (опционально)
npm run analyze

3. Docker контейнеризация

# Dockerfile для Next.js приложения
FROM node:18-alpine AS builder
WORKDIR /app

# Копируем package.json и устанавливаем зависимости
COPY package*.json ./
RUN npm ci

# Копируем исходный код
COPY . .

# Собираем приложение
RUN npm run build

# Финальный образ (меньше размер)
FROM node:18-alpine
WORKDIR /app

# Копируем только необходимые файлы из builder
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./

# Expose порт
EXPOSE 3000

# Start скрипт
CMD ["npm", "start"]

4. Development pipeline

# .github/workflows/deploy.yml для GitHub Actions
name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm run test
      
      - name: Build
        run: npm run build
      
      - name: Build Docker image
        run: docker build -t myapp:${{ github.sha }} .
      
      - name: Push to registry
        run: |
          echo ${{ secrets.DOCKER_PASSWORD }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
          docker push myapp:${{ github.sha }}
      
      - name: Deploy
        run: |
          ssh -i ${{ secrets.SSH_KEY }} user@server 'docker pull myapp:${{ github.sha }} && docker run -d -p 80:3000 myapp:${{ github.sha }}'

Развёртывание на Dokku

Я часто использую Dokku - облегчённую версию Heroku для self-hosted решений:

# Инициализация на сервере
ssh user@server
dokku apps:create myapp

# Настройка на локальной машине
git remote add dokku dokku@server:myapp

# Развёртывание (просто git push)
git push dokku main

# Просмотр логов
dokku logs myapp

# Перезагрузка приложения
dokku ps:restart myapp

Развёртывание на Vercel

Для более простых проектов я использую Vercel (специально оптимизирована для Next.js):

# Установка CLI
npm i -g vercel

# Развёртывание
vercel

# Production развёртывание
vercel --prod

# Или просто git push в подключенный репозиторий
# Vercel автоматически будет собирать и разворачивать

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

# Переменные окружения должны быть в .env.local (не коммитить!)
# Для production используются переменные на сервере

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=production

Оптимизация для production

1. Компрессия

# Nginx конфигурация для сжатия
server {
  gzip on;
  gzip_types text/plain text/css text/javascript application/json application/javascript;
  gzip_min_length 1000;
  gzip_comp_level 6;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

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

# Кэширование статических файлов
location /static/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML файл не кэшируется
location / {
  expires -1;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
}

3. Security headers

# Добавляем security headers
add_header X-Frame-Options "SAMEORIGIN" 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;

Мониторинг и логирование

// Отправка ошибок на сервис мониторинга
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

// Логирование ошибок
window.addEventListener('error', (event) => {
  Sentry.captureException(event.error);
});

// Отслеживание производительности
Sentry.captureMessage('User navigated to /dashboard', 'info');

Database миграции (если нужны)

# Перед развёртыванием запускаем миграции
nnpm run migrate

# Или в docker entrypoint
#!/bin/bash
npm run migrate
npm start

Откат приложения

# На Dokku
dokku releases:list myapp
dokku releases:rollback myapp v2

# На Vercel
# Можно откатить через UI или CLI
vercel rollback

Checks перед production

// Checklist перед развёртыванием
- npm run build успешна (нет ошибок)
- npm run lint без ошибок
- npm run test покрывает >= 80% кода
- Все env переменные заданы на сервере
- Security headers настроены
- HTTPS включен
- Стратегия кэширования правильная
- CDN настроена (если используется)
- Бекап базы данных сделан (если есть)
- Морнинг-стенды запланированы (если критичный запуск)

Мой процесс

# 1. Разработка
git checkout -b feature/new-feature
# ... code ...
git add .
git commit -m "feat: Add new feature"

# 2. Testing
npm run test
npm run lint
npm run build

# 3. Code Review
git push origin feature/new-feature
# Открыть Pull Request
# Получить approval от коллег

# 4. Merge
git checkout main
git pull origin main
git merge feature/new-feature

# 5. Deploy
git push origin main
# CI/CD автоматически запустится
# После успеха - приложение на production

# 6. Monitor
# Проверить логи на ошибки
# Проверить метрики производительности
# Готов откатить если что-то не так