Рубрики
Uncategorized

Настройка Travisci для тестирования, создания и развертывания вашего приложения на NetLify за 5 минут

В этом уроке вы узнаете, как настроить Travisci для тестирования и создания простого приложения (я использую Vue.js … Помечено начинающими, учебником, WebDev, DevOps.

В этом уроке вы узнаете, как настроить ТРЕВИСКИ Чтобы протестировать и создать простое приложение (я использую здесь vue.js, но не стесняйтесь использовать все, что вы хотите!), А затем развернуте его на NetLify Анкет Travisci — это размещенная, распределенная служба непрерывной интеграции, используемая для создания и тестирования проектов на GitHub. NetLify предлагает облачный хостинг для статических веб -сайтов, обеспечивая непрерывное развертывание, бесплатное SSL, функции без серверов и многое другое … Прочитайте эту статью Для получения дополнительной информации о непрерывной интеграции и непрерывном развертывании с Travisci и NetLify.

👉🏻 В этот репозиторий Вы найдете окончательный код.

Настройка NetLify

Настройка вашего сайта с помощью NetLify действительно проста, нажмите на Новый сайт от git и следуйте инструкциям. После этого шага отключите автоматические сборки в приборной панели NetLify сайта под Строитель и развертывание > Непрерывное развертывание > Настройки сборки Анкет Без этой опции я предлагаю запустить отдельный экземпляр вашего сайта на NetLify, чтобы легко сохранить такие функции, как предварительный просмотр сайта в запросах на вытягивание (проверьте Этот запрос на вытягивание Чтобы увидеть, как он работает). Например, у меня есть эти два экземпляра для моего приложения примера

Настройте Travisci

Настройки на Travis CI можно настроить через конфигурацию сборки, хранящуюся в .travis.yml помещен в корень вашего проекта. Чтобы создать, проверить и развернуть простое приложение Vue, окончательное .travis.yml Файл будет выглядеть так 

language: node_js
node_js:
  - 12
cache:
  directories:
    - node_modules
script:
  - yarn test:unit
before_deploy:
  - npm install netlify-cli -g
  - yarn build
deploy:
  provider: script
  edge: true
  script: netlify deploy --dir=dist --prod
  on:
    branch: master

Эта конфигурация проста для понимания: во -первых, она инструктирует Travisci использовать Node.js 12 окружающая среда и запустить тесты с Тест пряжи: единица команда, как указано в Скрипт раздел. В следующем разделе перед_Деплой , Travisci запускает полную сборку вашего сайта (используя в этом случае сборка и устанавливает NetLify CLI развернуть сайт позже. NetLify CLI должен знать, кто вы, и целевой сайт, который вы хотите развернуть.

  • Под Токены личного доступа , выберите Новый токен доступа Анкет
  • Введите описание и выберите Генерировать токен Анкет
  • Скопируйте сгенерированный токен в свой буфер обмена (как только вы перемещаетесь со страницы, токен не может быть замечен снова!) И добавьте его в NetLify_auth_token Переменная среда в Трэвиска.

Чтобы установить целевой сайт для развертывания

  • На панели инструментов сайта NetLify перейдите к Настройки > Общий > Детали сайта > Информация о сайте и скопируйте значение для API ID .
  • Назначить API ID к NetLify_site_id Переменная среда в Трэвиска.

В последнем разделе, развернуть , Travisci использует NetLify CLI для развертывания вашего сайта в NetLify в производственном режиме, указывая исходную папку (в данном случае dist сгенерировано По умолчанию развертывания будут происходить только в главной филиале, но вы можете перезаписать это, используя опцию филиала.

✨ Ваш конвейер CI/CD с использованием Travisci и NetLify готов!

Оригинал: «https://dev.to/astagi/setup-travisci-to-test-build-and-deploy-your-app-on-netlify-in-5-minutes-khn»

Читайте ещё по теме: