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