Модификации фронтенда

Обзор модов Чанка 2

Каждая модификация добавляет расширение к базовому фронтенду CRC. Эти расширения демонстрируют навыки, специфичные для целевой роли.

Developer Mod: Frame Job

Задача

Заменить чистый HTML на фреймворк (React, Vue, Svelte, Next.js, Nuxt). Реализовать SSR (Server-Side Rendering) или SSG (Static Site Generation).

Зачем

Разработчик облачных приложений должен уметь работать с современными фреймворками. "Frame Job" показывает, что вы понимаете экосистему frontend-разработки и можете развернуть SPA/SSG в облаке.

Реализация: Next.js + SSG

// pages/index.js - Static Generation
export default function Resume({ visitorCount }) {
  return (
    <main>
      <header>
        <h1>Иван Петров</h1>
        <p>Cloud Engineer</p>
      </header>

      <section>
        <h2>Опыт работы</h2>
        {/* Resume content */}
      </section>

      <footer>
        <p>Посетителей: <span id="counter">{visitorCount}</span></p>
      </footer>
    </main>
  );
}

// Static generation at build time
export async function getStaticProps() {
  return {
    props: { visitorCount: 0 }, // Client-side JS will update this
    revalidate: 60, // ISR: regenerate every 60 seconds
  };
}

Деплой

SSG-сайт на Next.js деплоится так же, как обычный статический сайт: next build && next export создаёт папку out/ с HTML-файлами для S3/Blob/GCS.

DevOps Mod: Automation Nation

Задача

Настроить автоматический деплой фронтенда через несколько окружений: dev, staging, production. Каждый пуш в ветку создаёт preview deployment.

Зачем

DevOps-инженер должен уметь настраивать многоступенчатые пайплайны деплоя. "Automation Nation" демонстрирует понимание environments, approvals и rollback-стратегий.

Реализация: GitHub Actions + Environments

# .github/workflows/frontend-deploy.yml
name: Frontend Deploy

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

jobs:
  deploy-dev:
    if: github.ref == 'refs/heads/develop'
    runs-on: ubuntu-latest
    environment: dev
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to dev S3
        run: |
          aws s3 sync ./cloud-resume/ s3://crc-dev/ --delete
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.DEV_CF_DIST_ID }} \
            --paths "/*"

  deploy-staging:
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    environment: staging
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to staging S3
        run: |
          aws s3 sync ./cloud-resume/ s3://crc-staging/ --delete

  deploy-production:
    needs: deploy-staging
    runs-on: ubuntu-latest
    environment:
      name: production
      url: https://resume.ivanpetrov.com
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to production S3
        run: |
          aws s3 sync ./cloud-resume/ s3://crc-production/ --delete
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.PROD_CF_DIST_ID }} \
            --paths "/*"

Security Mod: Spoof Troop

Задача

Защитить фронтенд от типичных веб-атак: XSS, clickjacking, MIME sniffing. Настроить Content Security Policy.

Зачем

Специалист по безопасности должен понимать клиентские атаки и уметь защищаться от них. "Spoof Troop" показывает знание OWASP Top 10 на практике.

Реализация: Security Headers

Настройка через CloudFront Response Headers Policy:

# Создание Security Headers Policy в CloudFront
aws cloudfront create-response-headers-policy \
  --response-headers-policy-config '{
    "Name": "CRC-Security-Headers",
    "Comment": "Security headers for CRC",
    "SecurityHeadersConfig": {
      "ContentSecurityPolicy": {
        "ContentSecurityPolicy": "default-src '\''self'\''; script-src '\''self'\''; style-src '\''self'\'' '\''unsafe-inline'\''; connect-src '\''self'\'' https://api.ivanpetrov.com",
        "Override": true
      },
      "StrictTransportSecurity": {
        "AccessControlMaxAgeSec": 31536000,
        "IncludeSubdomains": true,
        "Preload": true,
        "Override": true
      },
      "ContentTypeOptions": {
        "Override": true
      },
      "FrameOptions": {
        "FrameOption": "DENY",
        "Override": true
      },
      "XSSProtection": {
        "ModeBlock": true,
        "Protection": true,
        "Override": true
      },
      "ReferrerPolicy": {
        "ReferrerPolicy": "strict-origin-when-cross-origin",
        "Override": true
      }
    }
  }'

Результирующие заголовки

Content-Security-Policy: default-src 'self'; script-src 'self'; ...
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin

Architect Mod: S3 vs Alternatives

Задача

Сравнить минимум 3 способа хостинга статического сайта на вашем облачном провайдере. Обосновать выбор с точки зрения стоимости, производительности и управляемости.

Зачем

Архитектор должен уметь выбирать между альтернативами и обосновывать решения. "S3 vs Alternatives" тренирует навык, который напрямую спрашивают на собеседовании.

Пример сравнения для AWS

Data Engineer Mod: Visitor Logs

Задача

Собирать анонимизированные данные о посетителях: страна (по IP через GeoIP), браузер, время визита, реферер. Хранить в data lake для анализа.

Зачем

Дата-инженер собирает и обрабатывает данные. "Visitor Logs" демонстрирует навык проектирования data pipeline от сбора до хранения.

Реализация: JavaScript-трекер

// tracker.js - Anonymized visitor tracking
async function trackVisit() {
  const data = {
    timestamp: new Date().toISOString(),
    page: window.location.pathname,
    referrer: document.referrer || 'direct',
    userAgent: navigator.userAgent,
    language: navigator.language,
    screenWidth: screen.width,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    // НЕ собираем: IP-адрес (анонимизация), cookies, personal data
  };

  try {
    await fetch('https://api.ivanpetrov.com/track', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  } catch (e) {
    // Tracking failure should not affect user experience
    console.debug('Tracking skipped');
  }
}

// Track on page load
trackVisit();

AI Engineer Mod: LLM Resume Summarizer

Задача

Добавить кнопку "Summarize my resume" или чат-интерфейс, использующий LLM (через Bedrock, OpenAI API или Vertex AI) для генерации саммари резюме.

Зачем

AI-инженер интегрирует LLM в приложения. "LLM Resume Summarizer" показывает навык работы с AI API, промпт-инжиниринга и streaming-ответов.

Реализация: Chat Interface

// ai-chat.js - Simple LLM integration
const chatButton = document.getElementById('ai-chat-btn');
const chatOutput = document.getElementById('ai-response');

chatButton.addEventListener('click', async () => {
  chatOutput.textContent = 'Генерация...';

  try {
    const response = await fetch('https://api.ivanpetrov.com/summarize', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        prompt: 'Summarize this resume in 3 sentences, focusing on key skills and experience'
      })
    });

    const data = await response.json();
    chatOutput.textContent = data.summary;
  } catch (error) {
    chatOutput.textContent = 'Ошибка генерации. Попробуйте позже.';
  }
});

Выбор модов: рекомендации