Повысьте качество развертывания с помощью веб-перехватчиков
Netlify, универсальная платформа для автоматизации развертывания современных приложений, является отличным инструментом для максимально быстрого запуска вашего сайта.
Единственная проблема заключается в том, что у нас действительно нет гибкости, чтобы заранее запустить полный набор тестов без особых хлопот. Тем не менее, это важно для защиты ваших приложений от ошибок и предотвращения случайного взлома вашего сайта.
К счастью, выход есть. И нам не нужно покидать Netlify. Вместо этого мы подключим CircleCI, чтобы настроить процесс тестирования на свой вкус. Остальное возьмет на себя Netlify. Давайте создадим новый проект, чтобы начать с нуля.
Настройка нашего проекта
Чтобы проверить, можем ли мы предотвратить процесс развертывания из CircleCI, нам понадобится какой-то тест, который мы можем целенаправленно провалить. Для этого воспользуюсь Cypress. Создайте новый проект и установите его с помощью npm i cypress --save-dev. Я также добавил сценарий в package.json файл, чтобы упростить его запуск.
Если вы запустите npm run cypress, он должен теперь открыть Cypress для вас. Если это ваш первый раз, он сгенерирует cypress.jon файл конфигурации в корне вашего проекта, а также в папке cypress.
Вы можете избавиться от всего, что находится в папке cypress/integration, и создать новый test.js файл. Поскольку написание тестов выходит за рамки этого руководства, у нас будет одна единственная спецификация:
Чтобы выполнить это на CI, добавьте еще один сценарий в ваш package.json файл. Мы назовем это в нашем файле конфигурации CircleCI. После этого вы можете отправить свои изменения на GitHub.
Интеграция CircleCI
Наш следующий шаг - интегрировать CircleCI в наше приложение. Перейдите в CircleCI и войдите в свою учетную запись GitHub. Вы увидите список репозиториев. Нажмите кнопку Настроить проект.
Он сгенерирует для вас файл конфигурации. Но прежде чем добавлять это в свою кодовую базу, убедитесь, что вы добавили сценарий E2E в качестве последнего шага.
Теперь вы должны увидеть, что ваш конвейер работает. Если ваши сборки не работают из-за похожей ошибки, подобной этой…
Вам нужно добавить дополнительный шаг в ваш config.yml файл:
Это заранее установит недостающие библиотеки. Теперь, когда у нас есть CircleCI, мы также можем настроить Netlify.
Развертывание сайта через Netlify
Следующий шаг - запустить сайт через Netlify. Перейдите на домашнюю страницу Netlify и создайте новую учетную запись, если у вас ее еще нет. Затем на панели инструментов создайте новый сайт из Git.
Если вы не видите свой репозиторий после подключения Git к Netlify, вам необходимо добавить доступ для чтения к вашему репо, настроив приложение Netlify на GitHub.
На третьем этапе оставьте все как есть и разверните свой сайт. Вы будете перенаправлены в раздел обзора страницы, где сможете перейти по ссылке, чтобы просмотреть ее.
К сожалению, вы получите сообщение «Страница не найдена». Это потому, что мы не добавили ни одного HTML-файла, который мог бы появиться. Так что давай исправим это быстро. Добавьте следующее в корневую папку вашего проекта и зафиксируйте изменения.
Это запустит сборку CircleCI, а также развернет изменения на Netlify. Проблема только в том, что эти шаги выполняются отдельно. Даже если тесты не пройдут, сайт все равно будет развернут. А мы этого не хотим. Итак, в качестве последнего шага давайте наконец соединим их вместе и запустим развертывание Netlify через CircleCI.
Подключение CircleCI к Netlify
Наконец, нам нужно подключить CircleCI к Netlify. На самом деле это проще, чем вы думаете. Сначала перейдите на вкладку «Сборка и развертывание» в Netlify и настройте хук сборки.
Назовите его как хотите. После сохранения вы получите конечную точку API. Если мы отправим запрос POST на этот URL-адрес, Netlify запустит сборку. Итак, давайте перейдем к конфигурационному файлу CircleCI и добавим его в качестве последней команды.
Не рекомендуется передавать конфиденциальную информацию о вашем приложении в систему управления версиями. Вместо этого мы настроим его как переменную окружения под названием «hook». Поэтому, прежде чем фиксировать изменения, откройте свою панель управления на CircleCI и перейдите к настройкам проекта на вкладке «Работа».
В разделе «Переменные среды» добавьте новый ключ с именем «hook», где значение - это конечная точка, которую Netlify предоставил нам для привязки сборки.
Если мы зафиксируем изменения, внесенные в файл конфигурации, мы увидим, что в конце задания запускается развертывание. Но все же, как только мы отправляем изменения в репозиторий, он также запускает развертывание на Netlify. Это означает, что даже если предыдущие шаги завершились неудачно, сайт все равно будет развернут.
К сожалению, есть только обходной путь. Перейдите в настройки «Сборка и развертывание» и установите производственную ветку на то, чего никогда не будет. Таким образом, Netlify не сможет развернуть ветку, и только ловушка может запустить развертывание.
Если мы нарушим тесты, CircleCI никогда не отправит запрос на публикацию в Netlify, и сайт не будет развернут, пока мы не исправим проблему.
Резюме
Теперь, когда вы вносите свои локальные изменения, это всего лишь вопрос секунд, чтобы начать работу. Преимущество Netlify в том, что даже если ваши тесты не обнаруживают критических проблем, вы все равно можете вернуться к предыдущей сборке одним нажатием кнопки.
Спасибо, что нашли время прочитать эту статью. Удачного развертывания!
