Быстрое развёртывание шаблонов и статики в mail.ru,...
DESCRIPTION
TRANSCRIPT
![Page 1: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/1.jpg)
Быстрое развертывание шаблонов и статики в Mail.Ru
Кондратов НиколайТехнический руководитель
почтовой службы
HighLoad++ 2010
![Page 2: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/2.jpg)
HighLoad++ 2010 2
О чем мы?
• система шаблонов• организация работы верстальщиков• процесс разработки и тестирования• тестовая среда• VCS • развертывание
![Page 3: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/3.jpg)
HighLoad++ 2010 3
Хорошая система работы со статикой:
• удобство и скорость в работе• версионность и бэкап• параллельная работа верстальщиков• независимая разработка фич• параллельное тестирование• независимое внедрение фич• быстрое развертывание на серверах• быстрый откат
![Page 4: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/4.jpg)
HighLoad++ 2010 4
Система шаблонов
• HTML-текст с командами управления• переменные, функции, инклуды, условия, etc.• на фронтендах – компилированные• одни шаблоны для Perl, С, Python
<html>##SetVars(UserName=Вася)##<!-- IF ActiveUser --><h1>Привет, ##UserName##!</h1><!-- /IF --></html>
![Page 5: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/5.jpg)
HighLoad++ 2010 5
Как это было: CVS
Схема репозитория
mail.ru/ mail/ templates/ images/ js/ css/ my/ photo/ video/
Что лежит:
• шаблоны• картинки• swf• бинарные файлы• etc.
Почта
МирФото
![Page 6: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/6.jpg)
HighLoad++ 2010 6
HEAD
CURRENT
Feature-1
Как это было: работа верстальщика
• сцепление версий
Проблемы
• одна ветка в CVS• теги для версионности
vasya
petya
vasya
![Page 7: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/7.jpg)
HighLoad++ 2010 7
изменение
cvs commit
ssh deploy
раскладка
результат
Как это было: работа верстальщика
• долгое внесение изменений• «мусорные» коммиты
Проблемы
• любая раскладка – через репозиторий• боевая и тестовая раскладка – по одной
схеме
![Page 8: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/8.jpg)
HighLoad++ 2010 8
Как это было: раскладка
CVS deploy upload
Фронтенды (Почта, Мир,
etc.)
БД
Мониторинг
верстальщик
ssh
![Page 9: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/9.jpg)
HighLoad++ 2010 9
Как это было: минусы
• долгий процесс разработки• шаблоны всех проектов на всех фронтендах• долгое распространение шаблонов
![Page 10: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/10.jpg)
HighLoad++ 2010 10
Как это было: минусы CVS
• размер репозитория – 2,8 Гб, 55 тыс. файлов• медленный• тяжелые ветки• плохой мердж
![Page 11: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/11.jpg)
HighLoad++ 2010 11
Что сделали
• перевод репозитория CVS git• разделение репозиториев• использование веток• реорганизация тестового окружения• изменение схемы работы верстальщиков• дополнительная логика при раскладке шаблонов
Ускорение разработки. Как?
![Page 12: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/12.jpg)
HighLoad++ 2010 12
Переход на git – разделение репозиториев
• разделили репозитории (статика и шаблоны)• git с шаблонами – 600 Мб (около 16 тыс. файлов)• git со статикой – 3.2 Гб (около 38 тыс. файлов)
Статика Шаблоны
• картинки• бинарные данные
• шаблоны• CSS• JS
![Page 13: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/13.jpg)
HighLoad++ 2010 13
Переход на git – разделение на ветки
• разделили на ветки:• master• prerelease• ветки разработки
masterprerelease
test-branch
![Page 14: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/14.jpg)
HighLoad++ 2010 14
Переход на git - хуки
• hooks:• проверка синтаксиса шаблонов• обработка шаблонов• автоматическая раскладка• etc.
![Page 15: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/15.jpg)
HighLoad++ 2010 15
Процесс разработки
1. создаем ветку на основе master2. вносим изменения 3. коммитим, тестируем4. переносим изменения из ветки в prerelease5. тестируем prerelease6. переносим изменения из prerelease в master7. раскладываем
![Page 16: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/16.jpg)
HighLoad++ 2010 16
Общая схема (потоки данных)
d
git
deploy upload2
Фронтенды (Почта, Мир, etc.)
БД
Мониторинг
верстальщик
dev.mail.ru
prerelease 1..N
upload1
![Page 17: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/17.jpg)
HighLoad++ 2010 17
Общая схема (действия)
d
git
deploy upload2
Фронтенды (Почта, Мир, etc.)
БД
Мониторинг
верстальщик
dev.mail.ru
prerelease 1..N
upload1
hook
http
http
sambassh
scpscp
![Page 18: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/18.jpg)
HighLoad++ 2010 18
Тестовые серверы
• DOCUMENT_ROOT сервера – директория с шаблонами• dev.mail.ru – master• branch-1.dev.mail.ru – ветка branch-1• виртуальные машины с общим диском• размер каждой директории – около 200 Мб• количество веток – около 500• для полного хранения – 100 Гб
![Page 19: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/19.jpg)
HighLoad++ 2010 19
FUSE (Filesystem on Userspace)
• храним только отличающиеся файлы• отключаем компиляцию шаблонов• недостающие файлы в ветке берем из master• итоговый размер 5 Гб
branch-1.mail.ru/*
mail.ru/*
deploy/branch-1/*
FUSE
![Page 20: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/20.jpg)
HighLoad++ 2010 20
mail.ru/ master 1.htm 2.htmdeploy/ branch-1/ branch-1 2.htm (измененный файл) mail.ru.deploy/ mail.ru.branch-1/ (DOCUMENT_ROOT для branch-1.dev.mail.ru)
FUSE (Filesystem on Userspace)
![Page 21: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/21.jpg)
HighLoad++ 2010 21
mail.ru/ master 1.htm 2.htmdeploy/ branch-1/ branch-1 2.htm (измененный файл) mail.ru.deploy/ mail.ru.branch-1/ (DOCUMENT_ROOT для branch-1.dev.mail.ru)
FUSE (Filesystem on Userspace)
http://branch-1.dev.mail.ru/1.htm
FUSE
1.htm
![Page 22: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/22.jpg)
HighLoad++ 2010 22
mail.ru/ master 1.htm 2.htmdeploy/ branch-1/ branch-1 2.htm (измененный файл) mail.ru.deploy/ mail.ru.branch-1/ (DOCUMENT_ROOT для branch-1.dev.mail.ru)
FUSE (Filesystem on Userspace)
http://branch-1.dev.mail.ru/2.htm
FUSE
2.htm
![Page 23: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/23.jpg)
HighLoad++ 2010 23
• git + windows• длинная цепочка действий для раскладки• принцип «сохранил – увидел» • решение – Samba + перенос репозитория
gitверстальщикВася
samba
ssh
/home/vasya/
Проблемы
![Page 24: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/24.jpg)
HighLoad++ 2010 24
Процесс:1. клонирование репозитория в /home/vasya2. редактирование через Samba3. проверка на vasya.dev.mail.ru4. новая ветка (на основе master)5. push6. раскладка по хуку на тестовый сервер7. мердж в prerelese8. раскладка по хуку9. мердж в master10.ручная раскладка на живые
Samba
![Page 25: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/25.jpg)
HighLoad++ 2010 25
Раскладчик
• модульность• проверка шаблонов• различная обработка разных типов
файлов• компиляция шаблонов
ищем diff
зависимости
обработка
компиляция
архивация
заливка по scp
![Page 26: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/26.jpg)
HighLoad++ 2010 26
Раскладчик – вкусности
• условная обработка файла в зависимости от меток в нем• JS
• сборка• минимизация• именование файлов
• Шаблон• переводы строк• перекодировка
• и любые глупости
![Page 27: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/27.jpg)
HighLoad++ 2010 27
Раскладчик – пример метки
• метка в первой строке файла• JS
• // @build • // @build-minify
• Шаблон• <!-- build-strip-newlines -->
![Page 28: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/28.jpg)
HighLoad++ 2010 28
Мониторинг раскладки
• инкрементный номер каждой раскладки• в БД – позиция на каждом сервере• мониторим состояние раскладчика• мониторим позиции на каждом сервере
deploy upload2 Фронтенды
БД Мониторинг
upload1
![Page 29: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/29.jpg)
HighLoad++ 2010 29
Результаты
• упростили жизнь верстальщикам• возможность параллельной разработки фич• ускорение отладки и тестирования• улучшение работы с репозиторием
![Page 30: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/30.jpg)
HighLoad++ 2010 30
Но есть проблема…
• узкое место – получение архивов с шаблонами из одного источника
upload
f1 f2 f3 f1373
![Page 31: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/31.jpg)
HighLoad++ 2010 31
Простое решение… шардинг
• увеличить количество отдающих серверов
uploadN
f1 f2 f(N-1) fN
upload1 …………..
![Page 32: Быстрое развёртывание шаблонов и статики в Mail.ru, Николай Кондратов](https://reader033.vdocuments.mx/reader033/viewer/2022050712/54922e67ac795953288b46da/html5/thumbnails/32.jpg)
HighLoad++ 2010 32
Хорошее решение: peer-to-peer
• с upload-сервера отдача в режиме супер-сидирования• фронтенды обмениваются между собой
f1
f2 f3
fN
upload