Теги: Docker JS TypeScript Angular Storybook NPM
Есть проект на Angular (исходники хранятся в этом каталоге), который представляет собой библиотеку компонентов одной из дизайн-систем
Необходимо упаковать витрину-компонентов в Docker-образ, используя в качестве базы конечного образа Nginx версии 1.22 (не alpine и не perl)
Для промежуточных этапов (сборка, тестирование, линтинг) необходимо использовать Node 18-buster-slim
Важно: нужно упаковывать не сам проект, а витрину-компонентов на базе Storybook
Разработчик сказал следующее* (дословно):
Мы делаем библиотеку компонентов на Angular, которая должна использоваться всеми проектами внутри компании
Чтобы остальные понимали, как ею пользоваться, мы подготовили Storybook
Теперь нам нужно упаковать всё в Docker так, чтобы при запуске Docker-контейнера люди могли увидеть Storybook
Чтобы запустить Storybook локально, нужно выполнить команду
npm run storybook, чтобы собрать его:npm run build-storybookВот так примерно выглядит Storybook:
Важно:
- У нас есть авто-тесты, с UI они запускаются просто командой
npm test(Ctrl + Cдля остановки)- Мы придерживаемся определённого CodeStyle, поэтому проверяем стиль кода через
npm run lint
Лирическое отступление: к сожалению, часто бывает, что разработчики знают, как использовать свои инструменты в режиме разработки, но не знают, как использовать "за пределами разработки", например, как опубликовать тот самый Storybook, поэтому с этим придётся разбираться самостоятельно
Примечание*: мы обещали, что файлов будет немного (до 10 значащих), поэтому явно указываем, куда смотреть:
В других файлах ничего смотреть не нужно, кроме того, не нужно вообще что-то в файлах проекта менять (кроме добавления собственного Dockerfile и .dockerignore)
Что нужно сделать:
- Упаковать витрину в Docker-образ
- Выложить всё в виде публичного образа на GHCR* (GitHub Container Registry), чтобы мы могли сами затестить и переиспользовать
Примечание*: GHCR приведён лишь в качестве примера, вы можете использовать любой реестр на собственное усмотрение
Важно: мы хотим запускать и авто-тесты, и проверку стиля кода
Чего не нужно делать (дословно):
Никаких
entrypoint.shи других sh-скриптов писать не нужноПеределывать приложение и конфигурационные файлы вроде
package.jsonтоже не нужно, настраивайте запуск всего через:
Установку необходимых переменных окружения
Передачу флагов в соответствующие команды, например, в
npm test
Важно: никакие конфигурации Karma и т.д. создавать не нужно (достаточно установки пары переменных окружения и передачи нескольких параметров)
В качестве реализации CI/CD пайплайна и Docker Registry можно использовать любые, например (из облачных и бесплатных), GitHub Actions и GitHub Packages