Рубрики
Uncategorized

Как опубликовать пакеты NPM с Circleci

Я некоторое время слышал хорошие вещи о Circleci, и мне хотелось попробовать. Совпадает … Tagged с DevOps, Tutorial, TypeScript, JavaScript.

Я слышал хорошие вещи о Circleci некоторое время И мне хотелось попробовать. По совпадению, я опубликовал пакет NPM не так давно под названием Фалидатор , модуль для проверки объектов TypeScript в более функциональный путь Анкет Поэтому я подумал, что это все, давайте настроим Circleci для этого.

До сих пор опыт был отличным, и их Руководство довольно хорошо. К сожалению, некоторые темы не были покрыты там, и, когда я установил, все больше и больше вопросов появляются на этом пути. Таким образом, я решил написать еще одно руководство/блог о публикации пакета NPM с Circleci. Если вы просто заинтересованы в том, чтобы увидеть финальную конфигурацию, не стесняйтесь прыгать прямо к выводу.

Первые несколько шагов — ничего необычного

  • Создайте учетную запись Circleci
  • Разрешить Circleci получить доступ к учетной записи GitHub,
  • Перейти к приборной панели.
  • Нажмите на Добавить новый проект В
  • Выберите репозиторий пакета NPM,
  • Выберите Узел в раскрывающемся списке, и нас встретят с помощью образца конфигурации Barebone.
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10

    working_directory: ~/repo

    steps:
      - checkout

      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      - run: yarn test

Эта конфигурация должна быть скопирована в .circleci/config.yml И после совершения мы можем щелкнуть Начните строить , но до этого давайте в первую очередь внесем некоторые изменения.

Изображение Docker довольно старое. К счастью, в Circleci есть широкий спектр изображений Docker, доступных для нас. В большинстве случаев достаточно изменения версии на желаемое значение. Но чтобы быть уверенным, мы можем проверить Здесь или Здесь Для более полного набора.

Оставьте Working_directory как есть. Здесь будет проверять код и где будет проходить процесс CI. Поскольку я использую npm вместо пряжа , Я меняю запустить конфигурации в NPM Установка и NPM Run Test соответственно.

Как насчет RESTORE_CACHE и save_cache ? Как мы знаем, установка модулей NPM может занять некоторое время, особенно если у нас есть тонны из них. Идея здесь состоит в том, чтобы сохранить состояние после того, как мы установим его и повторно используете это состояние в следующем заезде. Кэш хранится до 30 дней. Это достаточно хорошо, особенно если у нас есть несколько сборок за день с минимальными изменениями зависимостей.

Что происходит за сохранением и восстановлением кэша

Поговорим о save_cache первый. В основном конфигурация выше говорится, сохраните состояние node_modules Папка после NPM Установка и дайте ему ключ на основе контрольной суммы package.json . Это означает, что если наш Package.json Не изменяет значение контрольной суммы останется прежним.

Во время RESTORE_CACHE , Circleci попытается получить последний кэш, который соответствует ключам. В наших настройках мы сопоставляем с 2 ключами: V1-зависимости-{{checksum "package.json"}} и V1-зависимости- Анкет

  • Если никто не совпадает с первым ключом, кэш будет сопоставлен с вторым ключом.
  • Если найдено несколько кэшей, используется новейшая из них, независимо от того, является ли это точным совпадением или частичным совпадением.

Сначала я не был уверен, должен ли я сопоставить кэш с несколькими клавишами или только одним ключом. Я боялся, что кэш вызовет большую головную боль и не стоит того, чтобы сохранить время. Но тогда я понял NPM Установка все равно будет запускать независимо от кеша. Это просто означает, что если кэш старше, ему может потребоваться установить больше модулей, какими бы ни были кэш.

Неиспользуемый кэш и то, как работает установка NPM

Кэш в Circleci неизменен. Это означает, что если мы хотим сохранить новый кэш, нам нужно дать ему другой ключ. Поэтому мне было интересно, если положить контрольную сумму Package-lock.json вместо Package.json лучшая идея. Ну, давайте посмотрим на то, как NPM Установка работает. Из того, что я знаю в версии NPM 6.12, существует такое поведение.

  • NPM Установка Установить модули на основе Package.json и не package-lock.json
  • NPM Установка Не устанавливает последнюю доступную версию, а скорее соответствует версии, указанной в package.json
  • Если package.json и package-lock.json не синхронизированы, во время NPM Установка , NPM попытается исправить package-lock.json на основе package.json
  • Чтобы проверить установленные и доступные версии модулей узлов, запустите npm устаревший
  • Чтобы обновить все наши модули узлов на основе нашего Package.json, запустите NPM обновление Анкет Если мы просто хотим обновить один модуль, запустите NPM установить Анкет Запуск любой из этой функции настроит нашу Package.json и Package-lock.json, если найдена новая версия.
  • Символы в Package.json на самом деле есть значение. ^ означает, что модуль может быть обновлен ( не установлен ) до последней незначительной версии, которая удовлетворяет Семантическое управление версиями . В то время как ~ означает, что модуль может быть обновлен до последней версии патчей, которая удовлетворяет семантической версии.

Основываясь на этих поведениях, имеет больше смысла использовать контрольную сумму package.json вместо package-lock.json как package.json, кажется, Источник всего узла модуля. Но, эй, проверьте версию NPM, которую вы используете, и убедитесь, что вы используете последнюю версию узла, если это возможно.

Разбивание Circleci Cache

Что такое v1 в конфигурации? Это на самом деле, чтобы разрушить кеш. Скажем, мы хотим начать Fresh без какого -либо из предыдущего кеша, мы можем изменить имя кеша с v1 к v2 И там у нас есть чистый лист, так как ключ не совпадает.

В какой -то момент я подумал, могу ли я положить v1 в переменную среды например Cache_version ? Ведь кажется, что это можно настроить вот так:

    environment:
      CACHE_VERSION: 1
    ...
    steps:
      - restore_cache:
          keys:
            - v{{ .CACHE_VERSION }}-dependencies-{{ checksum "package.json" }} # CACHE_VERSION environment variable can only be set in the web UI settings
            - v{{ .CACHE_VERSION }}-dependencies- # fallback match
      - save_cache:
          paths:
            - node_modules
          key: v{{ .CACHE_VERSION }}-dependencies-{{ checksum "package.json" }}

Оказывается, мы не можем сделать это так. После запуска приведенная выше конфигурация возвращает следующую ошибку

error computing cache key: template: cacheKey:1:4: executing "cacheKey" at <.CACHE_VERSION>: can't evaluate field CACHE_VERSION in type cache.TemplateValues

Сама работа работает просто отлично, но кэш не используется. Я попробовал еще одну попытку, на этот раз я поместил установленную переменную среды в контекст . Увы, это все еще не работает. От Здесь Я обнаружил, что невозможно использовать переменную среды для конфигурации кэша. Поэтому я сдался и вернул все к тому, что это было без переменной.

Рабочие места

Хорошо, что мы знаем, что такое работа. Это в основном серия шагов, которые должны быть выполнены последовательно Circleci например Проверка кода, тестирования, личинки и т. Д. Это конфигурация, которую у меня есть.

jobs:
  test_and_lint:
    <<: *defaults
    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            - v1-dependencies- # fallback match
      - run:
          name: Install dependencies
          command: npm install
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - run: npm run test
      - run: npm run lint
      - persist_to_workspace:
          root: ~/repo
          paths: .
  build:
    <<: *defaults
    steps:
      - attach_workspace:
          at: ~/repo
      - run:
          name: Build package
          command: npm run build
      - persist_to_workspace:
          root: ~/repo
          paths: .
  publish:
    <<: *defaults
    steps:
      - attach_workspace:
          at: ~/repo
      - run:
          name: Authenticate with registry
          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc
      - run:
          name: Publish package
          command: npm publish

Вы можете задаться вопросом, почему мы не бежим npm запустить тест и NPM запустить Lint один иди так NPM Run Test & NPM Run Lint . Это связано с тем, что, разделяя их на два отдельных шага, мы могли бы получить больше выводов, напечатанных в пользовательском интерфейсе Circleci.

Что такое <<: *по умолчанию ? Это в основном ярлык для повторения конфигураций. Например, нам нужно продолжать повторять изображение Docker и рабочую каталог для каждой работы. Вот почему мы поместили это в по умолчанию

defaults: &defaults
  working_directory: ~/repo
  docker:
    - image: circleci/node:12.13

Рабочие процессы

Рабочий процесс — это то, как одна или несколько рабочих мест проводятся для совместной работы. С рабочим процессом вы можете установить задание для выполнения в определенном порядке, остановленных для утверждение , или запустить только в случае выполнения определенного условия. Например, мы можем установить рабочий процесс, как ниже, чтобы запустить test_and_lint затем запустить сборка и публиковать Только если это главная ветвь.

workflows:
  version: 2
  test:
    jobs:
      - test_and_lint
      - build:
          filters:
            branches:
              only: master
          requires:
            - test_and_lint
      - hold:
          type: approval
          requires:
            - build
      - publish:
          requires:
            - hold

Это, в свою очередь, обеспечивает защиту филиала. Когда я поднимаю запрос на привлечение из моего филиала в мастер, будет запущена CI -проверка. Мы можем подтвердить это, перейдя в репозиторий GitHub, Настройки -> Ветви -> Правила защиты филиала -> Требовать проверки статуса перед слиянием

NPM токен

Прежде чем мы сможем опубликовать, нам нужно подготовить токен NPM. Токен создан в https://www.npmjs.com , нам нужно

  • Создать учетную запись и вход в систему
  • Нажмите на аватар
  • Перейти к Auth Token -> Создайте новый токен
  • Скопировать токен в буфер обмена
  • Вернитесь в Circle CI и выберите правильный трубопровод
  • Перейти к Настройки —> Настройки сборки -> Переменные среды
  • Создайте новую переменную среды Npm_token и вставьте жетон в

К настоящему времени вы, вероятно, заметили это в предыдущей теме, у нас есть шаг, как

        - run:
          name: Authenticate with registry
          command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/repo/.npmrc

Это в основном добавляет токен в домашний каталог, требование, прежде чем мы сможем запустить NPM Publish Анкет Это сбивает с толку меня как использование переменных среды здесь хорошо, но не при настройке ключей кеша.

Тег

Еще одно требование, прежде чем мы сможем запустить NPM Publish это то, что нам нужно вернуть пакет. Версия также должна быть увеличена каждый раз. Это сложно, потому что это может быть патч, несовершеннолетняя или основная версия. Я надеялся, что смогу ввести новую версию во время утверждение Шаг, но, увы, я не думаю, что это возможно. Таким образом, я решил, что вывод версий произойдет локально на моем Dev Machin

Так локально на моей машине разработчика

npm version patch -m "bump to 0.0.7"
git push origin

Тем временем на цирки, эти должны быть настроены

workflows:
  version: 2
  generic:
    jobs:
      - test_and_lint: # implicitly all jobs always run on branches, unless filtered.
          filters:  
            tags: # required since `build` has tag filters AND requires `test_and_lint`.
              only: /^v.*/
      - build:
          filters:  
            tags: # required since `publish` has tag filters AND requires `build`
              only: /^v.*/
            branches: # required since we don't want to build on branches, just tags
              ignore: /.*/
          requires:
            - test_and_lint
      - publish:
          filters:
            tags:
              only: /^v.*/
            branches:
              ignore: /.*/
          requires:
            - build

Что со всеми этими фильтрами? Они необходимы, потому что эти фундаментальные поведения в Circleci

  • По умолчанию задания работают на всех филиалах.
  • По умолчанию задания не Бег по всем тегам.

Звучит просто, но в сочетании с конфигурацией порядка выполнения, у нас довольно неприятный набор фильтров.

В качестве альтернативы, поскольку Circleci позволяет нам иметь более одного рабочего процесса, мы можем настроить его, как ниже. Нам просто нужно убедиться, что только один рабочий процесс работает в любой момент времени.

workflows:
  version: 2
  on_branch:
    jobs:
      - test_and_lint
  on_tags:
    jobs:
      - test_and_lint:
          filters:
            tags:
              only: /^v.*/
            branches:
              ignore: /.*/
      - build:
          filters:
            tags:
              only: /^v.*/
          requires:
            - test_and_lint
      - publish:
          filters:
            tags:
              only: /^v.*/
          requires:
            - build

К сожалению, как вы можете видеть, мы все еще не можем уйти от фильтров из -за того, как Circleci работает с тегами. Так какой из них лучше? Я немного предпочитаю последнее, но, честно говоря, мне не очень нравится ни один из них. Если у кого -нибудь из вас есть лучшее решение, дайте мне знать. Для получения дополнительного чтения, вы можете обратиться к здесь

Это завершает мой опыт публикации пакета NPM с Circleci. Некоторые плюсы:

  • Легко настроить и Приличная начальная конфигурация
  • Много документов
  • Все настроено через файл конфигурации с минимальным взаимодействием веб -пользовательского интерфейса

Но, конечно, есть некоторые вещи, которые можно улучшить

  • Непоследовательный опыт работы с переменными окружающей среды в Команда , кэш и контекст
  • Рабочие процессы могут быть упорядочены лучше. теги и ветви можно сделать для использования аналогичного шаблона конфигурации
  • Когда вы входите на их веб -сайт, вы случайным образом получаете новый или старый пользовательский интерфейс. Есть меню, чтобы вернуться к старому пользовательскому интерфейсу от нового пользовательского интерфейса. Но, к сожалению, нет возможности перейти от старого пользовательского интерфейса в новый интерфейс.

В целом Circleci довольно хорошо. Недостатки есть, но они не критичны. Circleci прост в использовании и идеально подходит для небольшого проекта с открытым исходным кодом, таким как мой. Если вы хотите увидеть полную конфигурацию, он доступен в GitHub Репо Анкет И вот и все, спасибо за чтение. Отзывы приветствуются:)

Оригинал: «https://dev.to/djoepramono/how-to-publish-npm-packages-with-circleci-4hmj»