Настройка конвейера непрерывной интеграции от А до Я, который: запускает тесты, создает приложение и развертывает его в Netlify. Давай сделаем это! 🤓

К настоящему времени вы, вероятно, развернули проект в Netlify, используя их пользовательский интерфейс, связав проект GitHub / GitLab и настроив необходимые шаги для создания приложения ».

Возможно, вы не знаете, что Netlify имеет основанный на Node инструмент CLI, который позволяет вам выполнять развертывание с терминала.

Более того, конвейеры CI / CD GitLab предоставляют бесплатно 2000 минут конвейера CI в месяц, которые мы можем использовать для автоматизации процесса тестирования и развертывания.

Содержание

Создать новый проект

Или используйте уже существующий. В этом случае мы создаем новый с именем vue_netlify_ci, используя vue create vue_netlify_ci.

Вот конфигурация, которую я использовал:

Отправьте его в репозиторий GitLab

Стандартная процедура.

Установите netlify-cli глобально

Запустите npm i netlify-cli -g и убедитесь, что он правильно установлен, набрав netlify -v. Результатом будет что-то вроде netlify-cli / 2.11.10 darwin-x64 node-v10.15.3.

Команда не найдена?

Возможно, при попытке запустить netlify вы получите сообщение «Команда не найдена». Скорее всего, это связано с какой-то проблемой, связанной с тем, как вы изначально установили Node + npm. Чтобы исправить это, вам нужно обновить $ PATH env (для MacOS / Linux процесс должен быть примерно одинаковым. Для пользователей Windows, Google, я думаю?)

1. Посмотрите вверх результат установки netlify-cli , он должен выглядеть примерно так:

/usr/local/Cellar/node/8.7.0/bin/ntl -> /usr/local/Cellar/node/8.7.0/lib/node_modules/netlify-cli/bin/run
/usr/local/Cellar/node/8.7.0/bin/netlify -> /usr/local/Cellar/node/8.7.0/lib/node_modules/netlify-cli/bin/run
+ [email protected]
updated 1 package in 5.123s

В моем случае netlify можно найти в /usr/local/Cellar/node/8.7.0/bin/
, и это строка, которую мы нужно добавить в наш .bash_profile. Для этого vim зайдите в него usingvim ~/.bash_profile и добавьте строку export PATH=/usr/local/Cellar/node/8.7.0/bin/:$PATH (обратите внимание, что вам нужно изменить это в зависимости от вашего вывода).

Сохраните его и запустите source ~/.bash_profile, и netlify теперь должен быть доступен в вашем терминале.

Подготовка Netlify к CI

Свяжите свое репо с новым проектом Netlify

Запустите netlify init --manual и следуйте этим шагам мастера:

  1. Выберите: Создать и настроить новый сайт.
  2. Дайте ему имя (необязательно) (назовем его vue-netlify-ci)
  3. Выберите свою команду, если таковая имеется, и нажмите Enter для завершения.

Примечание. если вы впервые используете интерфейс командной строки netlify, вам будет предложено авторизовать подключение к вашей учетной записи (откроется окно браузера с пользовательским интерфейсом авторизации). .

После этого ваш проект будет создан в Netlify, но он не будет развернут (потому что мы еще не сказали ему, как это сделать).

Теперь у нас есть идентификатор сайта, который нам понадобится для наших инструкций GitLab YAML.

Сгенерируйте личный токен доступа

Если вы вошли в Netlify, нажмите здесь, чтобы перейти прямо в правый раздел. Для справки: он находится в разделе Настройки пользователя › Приложения.

Добавьте к токену описание, например CI, и храните его в надежном месте! После выхода с этой страницы со сгенерированным токеном вы больше не сможете его получить. Если вы его потеряете, вам нужно будет сгенерировать новый.

Настройте файл конфигурации Netlify

Мы можем описать, как Netlify будет создавать и развертывать ваш сайт, используя язык разметки TOML. В нашем случае просто создайте файл с именем netlify.toml в корневом каталоге проекта со следующим:

Что тут происходит? Мы просто сообщаем Netlify, какой каталог содержит готовые к развертыванию ресурсы, созданные сборкой.

(Примечание: в нашем случае мы создаем приложение с помощью бегунов GitLab и развертываем пакет вместе, тогда как обычно у вас есть command = "npm run build", чтобы сообщить Netlify, что нужно сначала создать приложение).

Теперь у нас есть токен доступа, идентификатор сайта и мы рассказали Netlify, как управлять процессом развертывания. На GitLab.

Подготовка к GitLab CI / CD

CI / CD GitLab довольно прост. Если вы нажмете на репо, и он обнаружит файл .gitlab-ci.yml в вашем проекте, он будет использовать общие бегуны для запуска скриптов внутри него в соответствии с предоставленными инструкциями.

Перед настройкой файла нам необходимо настроить переменные среды так, чтобы наш .yml не отображал какие-либо важные данные, а именно токен доступа и идентификатор сайта.

Для этого перейдите в Настройки ›CI / CD и разверните раздел" Переменные ".

Добавьте NETLIFY_AUTH_TOKEN и NETLIFY_SITE_ID с соответствующими значениями. (Совет: если вы не помните свой боковой идентификатор, вы можете увидеть его в корневом каталоге проекта в .netlify / state.json).

Сохраните их, и теперь мы готовы, наконец, добавить .gitlab-ci.yml

Определение конвейера CI / CD

Конвейеры GitLab CI / CD настраиваются с помощью файла YAML с именем .gitlab-ci.yml в каждом проекте.

В корневом каталоге проекта создайте файл с именем .gitlab-ci.yml и добавьте следующее:

Это устанавливает 4-этапный конвейер, который: 1) устанавливает зависимости проекта; 2) запускаем наши тесты; 3) собрать приложение; 4) разверните его в Netlify.

Некоторые подробности о том, что используется:

изображение: указывает, какой Docker использовать для заданий.

кеш: позволяет нам ускорить вызовы последующих запусков данного задания, сохраняя зависимости, в данном случае node_modules. Подробнее о кешировании здесь.

артефакты: указывает файлы / каталоги, которые мы хотим сделать доступными для следующих заданий.

зависимости: для использования вместе с артефактами. Позволяет нам использовать результат этапа build (папка dist) в этапе deploy.

npm ci : npm ci обходит пакет package.json для установки модулей из файла блокировки пакета [ ..], предлагая значительные улучшения как производительности, так и надежности сборок для процессов непрерывной интеграции / непрерывного развертывания .

netlify deploy: развертывает наш сайт в Netlify, а именно: --site $ NETLIFY_SITE_ID и --auth $ NETLIFY_AUTH_TOKEN указывают нужный нам сайт. для развертывания и аутентификации для развертывания (с использованием переменных env CI / CD, которые мы установили ранее). --prod указывает, что мы хотим развернуть в производственной среде.

Результат: смешивается?

Наконец, добавьте и зафиксируйте файлы andgit push (мы работали над веткой master. В идеале вы должны нажать на отдельную ветку, а затем PR + Merge в master. Только изменения в master влияют на конвейер CI).

Как только вы нажмете / объедините в master, GitLab запустит свои бегуны и выполнит конвейер.

В своем проекте GitLab перейдите к CI / CD ›Pipelines или CI / CD› Jobs, чтобы подробно просмотреть статус каждого этапа. Если вы получили сообщение об ошибке, не забудьте нажать на это задание и просмотрите журналы, чтобы понять, в чем проблема.

Бонус: добавление промежуточного предварительного просмотра

Знаете, что было бы круто? Возможность предварительного просмотра новых функций при отдельном развертывании. Netlify имеет возможность развернуть превью для каждого PR / MR, когда вы связываете свое репо, как обычно, используя пользовательский интерфейс.

К сожалению для нас, кажется, что на данный момент невозможно автоматизировать развертывание только с помощью нашего конвейера CI и / или интерфейса командной строки Netlify, поэтому мы поступим иначе .

В конце у нас будет такой поток:

Создайте проект в Netlify

Создайте новый проект в Netlify, в котором будут размещены предварительные просмотры промежуточных запросов и запросов на слияние. Мы дадим ему имя, добавив staging-- к имени продукта, чтобы оно выглядело как staging-vue-netlify-ci.netlify.com. Это просто помогает различать оба проекта, вы можете использовать любое название, какое захотите.

Свяжите промежуточный проект с репо

После выбора проекта выберите ветвь разработки, которая будет отвечать за представление нашего промежуточного предварительного просмотра.

Определите команду сборки как npm run build и установите для каталога публикации значение dist.

После сохранения Netlify будет следить за веткой develop и автоматически создавать предварительные версии MR и производственные сборки (которые в данном случае считаются нашей постановкой. Реальное производство обрабатывается нашим собственным конвейером, помните?).

Создать запрос на слияние в Develop

Помня приведенный выше поток, вы можете сгенерировать столько развертываний, сколько захотите:

  • по одному для каждой ветви, в которой есть запрос на слияние в develop (идеально подходит для быстрой проверки функций, гипотез, быстрой демонстрации);
  • один для ветви разработки, которая действует как наша промежуточная среда;

И мы можем продолжать использовать наш собственный конвейер CI для применения тестов при слиянии с мастером. Конечно, вы можете изменить весь этот поток в соответствии со своими потребностями.

Дополнительным преимуществом такой настройки является то, что сборка из наших предварительных версий MR и развертывания develop выполняется Netlify, а это означает, что мы не можем тратить время CI, предоставляемые GitLab. 👌

Следующие шаги

Как видите, довольно легко настроить конвейер непрерывной интеграции и доставки для размещения приложения Vue.js на Netlify с помощью GitLab.

Оптимизация времени конвейера

Имейте в виду, что по мере того, как приложение получает новые функции и вы добавляете больше тестов, этапы конвейера CI / CD будут длиться все дольше и дольше. Важно, чтобы он оставался быстрым не только из соображений гибкости, но и из соображений стоимости, поскольку GitLab предоставляет только 2 тыс. Бесплатных минут для CI / CD в месяц⏱️.

Я далеко не эксперт в использовании конфигураций .gitlab-ci.yml и уверен, что указанное выше время можно значительно сократить. В этой статье Уэса Коссика подробно описаны некоторые способы ускорить время выполнения конвейера. Я буду просматривать эту статью с тестами и улучшениями по мере того, как буду улучшать конвейеры своих проектов.

Репо и ресурсы

Этих предоставленных файлов конфигурации должно быть достаточно, но если вы хотите взглянуть на репозиторий (со значком состояния развертывания Netlify), вы можете взять его здесь (https://gitlab.com/mstrlaw/vue_netlify_ci).

Ресурсы / материалы для чтения:

Присоединяйтесь к нам и оставляйте свои мысли и предложения в комментариях ниже.

Редактирует:

  • Добавлен раздел «Бонус», объясняющий, как связать дополнительный проект с Netlify;
  • Грамматика & опечатки;