В Sim 6 от Strategio передо мной и небольшой командой стояла задача создать конвейер CI/CD для приложения, существующего или готовящегося к созданию. Меня зовут Стивен Рейносо, и я имел удовольствие работать вместе с Камилом Хомиаком, Руди Маркесом и Амином Халифом. Мы сформировали команду Cloudbyte. План, который мы реализовали, состоял в том, чтобы подключить конвейер к одному из ранее существовавших проектов Камила, Brew List. Вот обзор самого Brew List.
Список заваривания
В Brew List вы можете создать учетную запись, настроить свой профиль, просматривать кофейни, ставить лайки и оставлять комментарии, а также просматривать другие профили.
Бэкэнд
Первым шагом было создание бэкенда, настройка базы данных и создание всех маршрутов, необходимых для проекта:
bcryptjs— используется для хэширования паролей пользователей при регистрации и их сохранения в базе данных.
cloudinary — используется для размещения изображений профилей пользователей, они загружаются в cloudinary, а ссылка сохраняется в базе данных.
cors— используется для настройки контролируемого доступа к ресурсам, расположенным за пределами данного домена, другими словами, так мы позволяем нашей клиентской стороне получать доступ и общаться с нашим сервером.
dotenv — используется для хранения переменных среды.
express & express jwt — первый необходим для создания маршрутов, последний — модуль, используемый для проверки веб-токенов JSON.
jsonwebtoken — используется для аутентификации и обмена информацией о безопасности между клиентом и сервером.
mongoose — библиотека ODM для MongoDB, используемая для подключения и настройки БД.
morgan – промежуточное программное обеспечение регистратора HTTP-запросов, помогает устранять неполадки, связанные с HTTP.
multer — промежуточное ПО для обработки multipart/for-data, используемое для загрузки файлов в Cloudinary.
После выяснения внутренней структуры был создан проект NPM, установлены все зависимости, а также настроены и настроены необходимые коллекции для проектов в атласе MongoDB (MongoDB, размещенная в облаке).
Когда все было на месте, пришло время подключить БД, создать необходимые модели и схемы, настроить и настроить хранилище Cloudinary, настроить и создать все экспресс-маршруты, настроить любое промежуточное ПО, настроить сервер для запуска и прослушивания на локальном хосте, и проверить все с почтальоном.
Бэкенд настроен, аватарки загружены в облачное хранилище, пользователи созданы и сохранены в базе данных, с хэшированными паролями и проверками на дубликаты, при аутентификации выдаются токены JWT, а также прописаны все маршруты для сохранения, комментирования и извлечения данных. на месте.
Клиент
Для клиентской стороны Камил использовал реакцию с реактивным маршрутизатором для маршрутизации и axios для вызовов API. Структура была создана с помощью приложения create-react-app, которое предоставляет нам шаблон настройки реагирующего приложения. Шаблон создается с большим количеством ненужных программ, которые были удалены. Все зависимости были установлены и добавлены в файл package.json.
Зарегистрируйтесь и войдите
На страницах регистрации и входа должны быть формы для отправки пользовательских данных в серверную часть со ссылками на каждую страницу и домашнюю страницу. Формы имеют проверку, чтобы убедиться, что предоставлен правильный формат данных, а также отображение сообщений об ошибках, проверку совпадения пароля и проверку надежности пароля при регистрации.
Список кафе
Когда пользователь проходит аутентификацию и входит в систему, ему открывается страница со списком кафе, на которой отображаются все кафе для выбранного города. Список является адаптивным (вместе с остальной частью сайта), и в каждом кафе есть слайдер карусельных изображений для предварительного просмотра изображений и любимая функция, позволяющая быстро добавить его в избранное.
Одна страница кафе
Каждое кафе имеет свою собственную специальную страницу, на которой отображаются изображения, которые можно щелкнуть, чтобы увеличить в модальном режиме, раздел о сайте, раздел услуг, местоположение на карте и комментарии пользователей.
Профиль
Для пользователей есть страница управления профилем и страница для просмотра того, как ваш текущий профиль выглядит для других. Вы можете изменить свое изображение, управлять своим избранным и изменить информацию о себе.
CI/CD
При создании конвейера CI/CD для этого проекта использовались следующие технологии:
Гитхаб
- Используется для контроля версий. Благодаря простоте использования в сочетании с открытым исходным кодом его легко выбрать в качестве нашего основного репозитория.
Действия на гитхабе
- Гарантия того, что код должен пройти тесты, а то, что пройдено, было интегрировано
- Уже интегрирован в Github, что упростило процесс настройки.
Циклический
- Бессерверная облачная инфраструктура хостинга, включающая лучшее из того, что может предложить AWS, DynamoDB, S3, AWS Lambda
- Развернутые приложения готовы по запросу, без сна, пробуждения, раскрутки или повторного использования.
- Встроенный конвейер CI/CD, интегрированный с github. Изменения вступают в силу через несколько секунд. Развертывания регистрируются в журналах сборки/развертывания.
- Приложения можно запускать по всему миру, чтобы убедиться, что пользователи видят наименьшую задержку и минимизируют время простоя с помощью стратегии аварийного переключения «активный-активный» по умолчанию.
Нетлайф
- Размещал статическую интерфейсную веб-страницу и был связан с нашим репозиторием для всех обновлений.
- Камиль уже настроил его для существующего внешнего интерфейса, поэтому нам просто нужно было подключить его к обновленному репозиторию с существующим CI/CD.
Мокко + Чай
- Mocha — это среда тестирования JavaScript, работающая на Node. js и в браузере. Mocha позволяет асинхронное тестирование, отчеты о покрытии тестами и использование любой библиотеки утверждений. Chai — это библиотека утверждений BDD/TDD для NodeJS и браузера, которую можно прекрасно сочетать с любой средой тестирования javascript.
- В то время как Jest подходит для тестирования приложений JavaScript, Mocha сам по себе очень надежен, когда дело доходит до тестирования с помощью Express и MongoDB. Кроме того, Chai — это библиотека для Mocha, которая имеет синтаксис, подобный Jest, а также хорошо сочетается с NodeJS и Mongo.
- Таким образом, мы смогли использовать Mocha и Chai для специального тестирования API и серверной части нашего приложения, проверяя, что соединение с сервером существует, что наши запросы были получены, и что наш пользователь получил взамен правильные данные.
Проблемы
Сам процесс CI/CD не был гладким. Сначала мы попытались использовать Jest для настройки тестов, но Jest плохо работал с MongoDB и Express, и нам пришлось быстро перейти на Mocha + Chai.
Само тестирование также оказалось сложным, когда программное обеспечение успешно работало на одной из наших машин, но терпело неудачу на другой по непонятной причине. В конце концов, это произошло из-за того, что мы не следили за зависимостями, но приложив достаточно усилий, мы добились своего.
Работа над проектом Камила также оказалась небольшой проблемой для команды: половина из нас не имела доступа к большинству технологий, которые Камиль применил для создания приложения, поэтому нам пришлось потратить на это дополнительное время.
Несмотря на это, команда собрала проект и подключила конвейер в свободное время. Было проделано много тяжелой работы, чтобы убедиться, что мы это сделаем, и это не пропало даром. Сам проект выложен на Netlify по ссылке: Brew List. Пожалуйста, не стесняйтесь проверить это!
Будущее
Будущее Brew List в значительной степени неопределенно, но появляются идеи по улучшению, самым большим из которых является улучшение мобильного опыта и добавление OAuth. С внутренней стороны улучшением был бы Docker, так как он устранил бы проблему с зависимостями.
Комментарии и вопросы приветствуются!
