Деплой в Yandex Object Storage

Перед началом: Модули 1–7. Инструменты: Yandex Object Storage, S3, aws-cli. Время: ~4 ч.

🔥 Инцидент. Фронтенд собирается в dist/, заливается на S3 через aws s3 sync. Но кэш не инвалидируется — пользователи видят старую версию. CloudFront не настроен, HTTPS отсутствует. Нужен CI/CD: build → upload → invalidate cache → проверка.

📖 Теория

В этом модуле задеплоим наше PWA в Yandex Cloud.

Сборка фронтенда

bash
npm run build

В папке dist/ появится статика.

Настройка Yandex Object Storage

1. Создание бакета через консоль

1. Откройте Yandex Cloud Console
2. Перейдите в Object Storage
3. Создайте бакет (например, chat-app-bucket)
4. Сделайте бакет публичным для чтения

2. Настройка веб-сайта

В настройках бакета → Веб-сайт:

• Index document: index.html
• Error document: index.html (важно для SPA!)

Загрузка файлов

Через AWS CLI (S3-совместимый)

Настройте профиль в ~/.aws/credentials:

ini
[yc]
aws_access_key_id = <YANDEX_ACCESS_KEY>
aws_secret_access_key = <YANDEX_SECRET_KEY>

Загрузите файлы:

bash
aws --endpoint-url=https://storage.yandexcloud.net \
  --profile yc \
  s3 sync ./dist/ s3://chat-app-bucket/ \
  --acl public-read

Через yc CLI

bash
yc storage bucket chat-app-bucket --create
yc storage upload --bucket chat-app-bucket --file dist/index.html --key /index.html

Привязка домена

Вариант 1: Yandex Certificate Manager

1. Создайте сертификат в Certificate Manager
2. Добавьте API Gateway с вашим доменом
3. Настройте DNS

Вариант 2: Cloudflare

1. В Cloudflare добавьте домен
2. CNAME → chat-app-bucket.website.yandexcloud.net
3. Включите Full SSL
4. Page Rules → cache everything

CI/CD (GitHub Actions)

.github/workflows/deploy.yml:

yaml
name: Deploy to Yandex Cloud

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: '20'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@v0.5.1
        with:
          args: --acl public-read --follow-symlinks
        env:
          AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ru-central1
          AWS_ENDPOINT: https://storage.yandexcloud.net
          SOURCE_DIR: 'dist'

Проверка

1. Откройте https://chat-app-bucket.website.yandexcloud.net
2. Проверьте PWA аудит в Lighthouse
3. Установите приложение на телефон

Завершение курса

Поздравляем! Вы создали:

• ✅ Serverless микросервисную архитектуру
• ✅ Clean Architecture на Go
• ✅ PWA на React + TypeScript + Vite
• ✅ Push-уведомления через Web Push API
• ✅ Деплой в Yandex Cloud

Хотите углубиться в какой-то модуль или добавить новую функциональность?

💱 Компромиссы (Trade-offs)

🧩 Проверь себя

🔗 Мостик к Модулю 9

Деплой автоматизирован. Масштабируем состояние — переезжаем на Effector.