Узнайте, как приготовить сбалансированную лазанью вместо запутанных спагетти.
Предисловие
Это руководство займет около двух часов. Если вы не знакомы с Лерной, Трэвисом или Сейчас, вы можете попасть в несколько ловушек, но все это часть процесса обучения! Я включил раздел об устранении неполадок в конце статьи для решения распространенных проблем, так что обращайтесь к нему в любое время.
Введение
Если вы работаете один или в небольшой команде, вы, скорее всего, начали работать над небольшими программами, которые постепенно становятся сложными и запутанными. Происходит дерьмо, и вскоре вы обнаружите, что ваша идеально сбалансированная лазанья превращается в полную миску спагетти.
То же самое и с теми, кто работал в большой компании / команде. Руководства по брендингу представлены в виде руководств по стилю css или повторно используемых компонентов. Отделение отдельных пакетов от общего становится проблемой, если все хранится вместе. Возможно, вам даже придется иметь дело с несколькими похожими проектами, разбросанными в разных репозиториях, что может быть проблемой для отслеживания. Это некоторые из проблем, которые решают монорепозитории.
Монорепозиторий - это шаблон архитектурного проектирования, который позволяет нам поддерживать несколько пакетов в одном репо. Это снижает сложность при работе с пакетами, которые используют внутренние и сторонние зависимости.
Думайте о монорепозиториях как о хорошо организованном супермаркете. Каждый проход содержит определенный вид еды, что упрощает навигацию и поиск нужного блюда. Супермаркеты также содержат множество различных продуктов, поэтому вам не нужно ходить в определенные магазины, чтобы найти безглютеновый и безмолочный пирог баноффи (что очень важно).
При монорепозиции код разбивается на определенные пакеты (проходы). Это означает, что вы можете легко перемещаться по проекту, чтобы найти компонент или модуль, над которым хотите работать. Это также означает отсутствие необходимости поддерживать отдельные репозитории при внесении изменений, затрагивающих несколько частей вашего стека (единый магазин).
Хватит теории, давайте перейдем к руководству, которое разделено на 2 раздела: разработка и развертывание.
Разработка - мы сконфигурируем существующее приложение, созданное с помощью Gastby, в монорепозиторий. Если вы раньше не слышали о Гэтсби, найдите время, чтобы прочитать об этом. Я не буду вдаваться в подробности его реализации, потому что это выходит за рамки данной статьи. Мы пойдем на пышную вечеринку, которую устраивает для нас великий Гэтсби, и не будем спрашивать, почему и как они это сделали. Еще один инструмент, который мы будем использовать, - Lerna, который будет управлять зависимостями нашего проекта. Lerna также позволит нам связывать пакеты вместе, которые мы будем использовать для обмена компонентами.
Развертывание. После преобразования нашего приложения в монорепозиторий мы подключим нашу учетную запись GitHub к Travis-CI и создадим конвейер CI. Конвейер CI будет тестировать, создавать и развертывать наше приложение. W̵e̵'̵l̵l̵ использовать Heroku HANDLE-к внедрениям инструмента, потому что подмигнули простое в использовании, ̵ Гибкое и интегрирует очень хорошо с Travis-̵C̵I̵.̵ я изменил свое мнение, проведя три дня, пытаясь получить мой Monorepo развертывается с Heroku, и управление это через час с Сейчас. Итак, мы используем Now!
Перед началом работы необходимо учесть несколько предостережений:
Из-за масштаба нашего демонстрационного сайта вы можете подумать, что монорепозитории нецелесообразны. Вы правы, если думаете, что, поскольку монорепозиторий в данном случае непрактичен. Будут элементы дублирования и переписывания, которые покажутся контрпродуктивными. Также может показаться, что мы чрезмерно переработали простой сайт. Настоящее обучение приходит из понимания того, как части сочетаются друг с другом в небольшом масштабе. Вы сможете легко интегрировать монорепозицию на производственном уровне, зная фундаментальные концепции и лежащие в основе технологии.
В этом руководстве рассматривается множество мелких изменений, которые создают множество возможностей для того, чтобы что-то пойти не так. Я постарался излагать себя как можно более ясно, чтобы предотвратить это, но если вы все же столкнетесь с проблемами, оставьте описательный комментарий, я постараюсь ответить, отредактировать и улучшить эту статью. Вы также можете найти готовое репо здесь. Нет ничего постыдного в том, чтобы скопировать мой код, если вы застряли.
Я также предполагаю фундаментальные знания веб-разработчиков, включая опыт работы с React, Git и командной строкой.
Часть первая: Жюстин (разработка)
Давай начнем! Перейдите в пустую папку в терминале и клонируйте репо, выполнив следующую команду
git clone https://github.com/andrico1234/lerna-monorepo-starter.git
и перейдите в каталог lerna-monorepo-starter.
Перейдите в свою учетную запись GitHub и создайте новое репо, это будет репо, на которое вы отправите сайт, чтобы Трэвис мог запустить конвейер. Для тех, кому нужно напомнить о создании нового репо, вам, возможно, придется запустить git remote remove origin, чтобы вы могли указать код на ваше недавно созданное репо.
Запустите код, который выводит GitHub при создании нового репо:
git remote add origin git@github.<account-name>/<repo-name>.git git push -u origin master
Зафиксируйте и регулярно продвигайтесь для достижения наилучших результатов.
Перейдите в каталог lerna-monorepo-starter и установите пакеты, запустив yarn. После установки пакетов запустите yarn develop, чтобы запустить приложение на localhost: 8000.
Откройте Chrome и перейдите на localhost: 8000. Вы найдете простое приложение с фиктивным блогом и фиктивным магазином. Представьте, что это конкретизированное приложение, мы можем сделать предположение, что основная логика, лежащая в основе блога и магазина, различна и что есть сходство со стилем и компонентами.
Вернитесь в свою среду IDE, и вы увидите, что мы не получаем данные из внешнего источника. Данные обслуживаются локально через пару файлов json в каталоге data. Когда мы запускаем команду develop, Гэтсби извлекает данные из этих файлов json и создает для них страницы. Вы можете посмотреть, как это делается, заглянув внутрь gatsby-node.js файла. Это потому, что Гэтсби создает код и выводит статический сайт.
Итак, представьте, что наше приложение начинает расти, магазин и блог начинают переплетаться друг с другом. Вы можете не замечать отсутствия разделения, пока не станет слишком поздно и ваш код не запутается сильнее, чем плющ на стене дома вашей бабушки.
Давайте начнем разбивать наше приложение. Я коснусь только поверхности того, на что способна Лерна, поэтому рекомендую посмотреть их репо, чтобы узнать больше. Установите Lerna с yarn global add lerna. Нам нужно создать файл в корневом каталоге с именем lerna.json. Добавьте следующее:
{
"lerna": "2.11.0",
"packages": [
"packages/*"
],
"npmClient": "yarn",
"useWorkspaces": true,
"version": "1.0.0"
}
Вышеуказанное указывает версию Lerna, которую мы используем. Мы также сообщаем Лерне, где найти наши пакеты, в этом случае пакеты будут содержаться в каталоге внутри packages. Мы указываем, что используем Yarn, текущую версию нашего приложения, и что мы используем Yarn Workspaces, позволяющую Lerna поднимать пакеты. Чтобы включить рабочие области Yarn, добавьте следующее в ваш package.json файл.
{
...rest of file,
"private": true,
"workspaces": [
"packages/*"
]
}
После этого создайте новый packages каталог в корне проекта. Создайте в нем три дополнительных каталога, чтобы структура выглядела следующим образом:
packages | blog | shared-ui | shop
Следующим шагом является перемещение содержимого из нашего текущего приложения в соответствующие папки. Все файлы в нашей components папке будут перемещены в наш shared-ui каталог, поскольку мы хотим иметь возможность использовать их где угодно в нашей кодовой базе.
А пока мы перенесем все в shared-ui компоненты и импортируем их, используя относительный URL.
Внутри каталога packages/shared-ui я создал файл с именем index.js, который будет нашей точкой входа для импорта компонентов. Это каталог, в который мы собираемся переместить нашу папку компонентов. Откройте свой терминал, перейдите на верхний уровень каталога проекта и запустите
mv src/components/ packages/shared-ui/components/
Это переместит компоненты в их новый дом. Сделайте то же самое и для каталога theme. Вам нужно будет исправить теперь неработающие операторы импорта для каждого компонента, использующего объект темы.
Компонент Layout действует как точка входа для каждого приложения Gatsby, а это означает, что каждый пакет будет нуждаться в одном.
Мы избежим дублирования кода, абстрагируя части макета, которые не нужно будет изменять в зависимости от страницы, например использование компонента Header. Мы сохраним индивидуальную логику каждого пакета, например запрос graphql.
В packages/shared-ui создайте новый каталог с именем layouts/PrimaryLayouts. Создайте index.js файл и переместите сюда содержимое src/layouts/index.js файла. Как только это будет сделано, избавьтесь от graphql запроса. Переместите файл css, чтобы импорт не прервался.
Вернувшись в файл src/layouts, мы можем избавиться от всего и заменить его следующим образом:
После этого обновите операторы экспорта в файле shared-ui/index.js, чтобы они выглядели следующим образом.
Иерархия папок ваших пакетов теперь должна выглядеть так
packages
| blog
| shared-ui
| index.js
| components
| Button
| index.js
| Header
| index.js
| ItemCard
| index.js
| theme
| index.js
| layouts
| PrimaryLayout
| index.js
| index.css
| shop
Скорее всего, ваш проект не запустится, потому что операторы импорта для ваших общих компонентов не работают. Способ настройки проекта означает, что мы можем выполнить поиск и заменить, чтобы найти ../components/{specific-component} и заменить его на ../../packages/shared-ui. Сайт все равно будет сломан, потому что нам нужно заключить имя импорта в фигурные скобки, поэтому оператор импорта выглядит так:
import { Header } from ‘../../packages/shared-ui’
Просто убедитесь, что импорт заголовка для вашего PrimaryLayout/index.js выглядит следующим образом import { Header } from '../../'. После того, как вы заменили все устаревшие операторы импорта новыми, попробуйте снова запустить приложение. Мы должны ожидать, что в консоли не будет ошибок. Сейчас хорошее время, чтобы зафиксировать и опубликовать код.
Теперь, когда это работает, мы хотим сделать еще один шаг и заставить shared-ui вести себя так же, как общедоступный пакет. Создайте package.json файл внутри пакета shared-ui и добавьте следующее:
Это добавит необходимые зависимости для нашего пакета shared-ui.
// разрыв главы
Теперь нам нужно разделить наше исходное приложение на два отдельных пакета; блог и магазин. Нам нужно будет имитировать текущую иерархию, чтобы гарантировать, что Гэтсби продолжит работать. В каждом пакете будет:
- каталог данных
- src каталог с макетами и страницами
- gatsby-config.js
- gatsby-node.js
- файл package.json
Идите вперед и создайте пустые папки / файлы для каждого элемента в списке выше внутри каждого пакета. Мы рассмотрим каждый пункт один за другим для пакета блога, а затем я предоставлю вам реализовать это для пакета магазина. Вы можете обратиться к готовому репо в любое время, если вы застряли.
Каталог данных - переместите файл blog.json в каталог данных верхнего уровня. Перейдите в консоль, перейдите в каталог верхнего уровня репо и выполните следующую команду mv data/blog.json packages/blog/data/. Это перемещает данные нашего фиктивного блога в его законный дом.
Каталог src с макетами и страницами - в packages/blog/src/layouts создайте файл index.js. Скопируйте и вставьте содержимое src/layouts/index.js файла верхнего уровня. Ваша IDE может начать кричать на вас, потому что ../../packages/shared-ui больше не является допустимым местом для импорта. Наконец-то мы можем использовать фирменный новый пакет shared-ui, который мы создали ранее. Измените старое местоположение импорта на @lerna-monorepo/shared-ui. Создайте два новых файла в каталоге packages/blog/src/pages/ с именами index.js и blogItem.js. В файле index.js скопируйте содержимое файла blog.js в каталог src/pages/. Обновите импорт для пакета shared-ui, как мы это сделали для индексного файла. Сделайте то же самое с файлом blogItem.js. Вам нужно будет изменить атрибут to ‘back to blog’ в этом файле на ‘/’.
gatsby-config.js - снова скопируйте содержимое файла верхнего уровня gatsby-config.js с файлом из пакета блога.
gatsby-node.js - мы узнаем, все ли работает или наш сайт гадит, только после того, как мы переместим этот файл и добавим package.json. Мы хотим скопировать только логику, относящуюся к обработке данных блога. Скопируйте и вставьте все в пустой gatsby-node.js файл. Удалите все строки между 6–33 включительно, а также самую нижнюю правую фигурную скобку и правую скобку на предпоследней строке.
package.json - Добавьте в файл package.json следующее:
Помимо зависимостей, которые мы определили в нашем package.json файле верхнего уровня, я добавил еще пару, которые мы будем использовать позже. Вам не нужно сейчас беспокоиться о том, что они делают.
Примечание. На вашем верхнем уровне package.json измените версию React на 16.0.0. Я объясняю, почему, в разделе устранения неполадок внизу статьи.
Вы должны заметить, что мы добавили "@lerna-monorepo/shared-ui": "^1.0.0" в список зависимостей. Это будет рассматривать наш пакет shared-ui как стандартный модуль узла. Запустите lerna clean и lerna bootstrap, чтобы обновить свои пакеты.
После этого попробуйте перейти в каталог packages/blog и запустить yarn develop. Надеюсь, все компилируется, и вы сможете получить доступ к домашней странице. Поскольку магазин еще не реализован, попытка перейти к этой части приложения приведет к неудаче. Проделайте то же самое с магазинной упаковкой.
Вот package.json файл пакета магазина:
Я немного изменил этот файл, чтобы запуск обоих пакетов не приводил к конфликту портов. Если вы можете перейти к обоим пакетам и запустить yarn develop без появления ошибки сценария, то зафиксируйте и отправьте свои изменения.
Нам необходимо решить две основные проблемы:
- Необходимость запускать каждый пакет вручную - это боль.
- Наш веб-сайт не распознает, что мы связываем два разных пакета.
Мы решим первую проблему, создав сценарий верхнего уровня, который запускает и блог, и магазин параллельно. Вторую проблему мы решим, добавив переменные .env, которые будут содержать адреса для URL-адресов блога / магазина. Переменные будут разными для производственной среды и будут содержать действующие URL-адреса.
Добавьте следующее в блок scripts вашего package.json файла верхнего уровня.
Первые два запускают сервер Gatsby каждого пакета отдельно, а последний использует npm-run-all для параллельного запуска скриптов. Установите npm-run-all, используя lerna add npm-run-all на верхнем уровне вашего проекта.
Примечание. Npm-run-all запускает оба экземпляра Gatsby в одном окне терминала. Таким образом, журналы для магазина и блога выводятся в одно и то же окно. Вам нужно будет дважды нажать cmd + d, чтобы остановить процесс Гэтсби.
Чтобы перемещаться между обоими нашими сайтами Gatsby в процессе разработки, нам нужно будет добавить переменные среды для использования с компонентами Link. Мы добавим пакет dotenv, чтобы Гэтсби знал, какие переменные загружать для данной среды.
lerna add dotenv --scope=*{@lerna-monorepo/shop,@lerna-monorepo/blog}*
Модуль dotenv добавляется только к пакетам блога и магазина, таким образом мы не добавляем ненужных зависимостей в наш пакет shared-ui.
Создайте новый файл в пакете вашего магазина под названием .env.development и .env.production. Внутри первого добавьте следующую строку:
BLOG_URL=https://localhost:8000
Оставьте пока рабочий файл в покое и повторите для пакета блога, просто измените имя переменной на SHOP_URL и порт на 8001.
Теперь добавьте следующий код в верхнюю часть вашего gatsby-config.js файла в пакете вашего магазина.
Добавьте этот код и в gatsby-config.js файл блога. Этот фрагмент кода предоставит вам доступ к этим переменным внутри наших компонентов. Мы можем предоставить разные наборы переменных в зависимости от текущей среды. Когда мы позже запустим gatsby build для создания нашего статического сайта, он будет использовать производственные переменные.
После того, как мы добавим это, нам нужно будет найти все случаи, когда мы переходим с сайта блога на сайт магазина и наоборот, вам нужно будет заменить текущие ссылки на:
<a href={process.env.SHOP_URL}>Back to Shop</a>
Совет: они в shop/src/pages/index.js и blog/src/pages/index.js.
Это позволит нам переходить между двумя нашими сайтами. Сделайте то же самое для пакета магазина, и вы сможете использовать сайт как обычно. Если yarn run:all по-прежнему работает и вы можете запускать yarn build для каждого пакета, то зафиксируйте и отправьте изменения. При каждом запуске пакета yarn serve переходите к правильному порту, чтобы дважды проверить, все ли отображается правильно.
Поздравляем, теперь сайт ведет себя точно так же, как и при запуске. Может показаться, что от монорепозиториев мало пользы, но вы обнаружите, что использование монорепозитория - это способ сохранить независимость пакетов друг от друга и при этом легко повторно использовать ресурсы.
Вы можете остановить обучение сейчас, и у вас будет рабочее представление о том, когда, как и зачем использовать монорепозицию, но вторая половина этого руководства покажет нам, как мы можем сделать еще один шаг вперед. Мы настроим конвейер CI для нашего приложения и успешно развернем его.
Часть вторая: Клэр (развертывание)
Давайте на секунду задумаемся о том, где мы сейчас находимся. Нам удалось начать с одного приложения с двумя отдельными разделами и разделить их в монорепозитории. Это позволяет нам разделить проблемы и предоставить доступ к повторно используемым компонентам.
Этот раздел состоит из двух частей: конвейера непрерывной интеграции (CI) и развертывания сайта. Наш конвейер CI будет использоваться для автоматизации серии проверок, чтобы убедиться, что наши тесты проходят и наша сборка компилируется. Если что-то из этого или какая-либо часть конвейера выйдет из строя, наш сайт не будет развернут. Вторая часть - это то, как мы справляемся с успешной сборкой, и это развертывание! Если все пройдет успешно, наш сайт будет развернут с использованием Now, где он будет размещен, чтобы весь мир мог видеть его в Интернете.
Чтобы использовать Travis, нам сначала нужно создать учетную запись и добавить репозиторий GitHub, который мы продвигали. И, как и со всеми другими инструментами, которые мы использовали, лучший способ начать работу с Трэвисом - это прочитать страницу Трэвис: начало работы. Страница начала работы также включает добавление вашего репозитория GitHub, что можно сделать через главную страницу. Нажмите + и на странице своего профиля нажмите Управление репозиториями в GitHub. Выберите репо, которое вы использовали, и вам нужно его настроить.
Как только вы это сделаете, мы создадим наш .travis.yml, в котором описаны шаги, которые будет выполнять наш конвейер CI при подготовке к развертыванию. Трэвис не распознает приложения без .travis.yml, поэтому мы создадим базовое. После того, как мы отправим код, содержащий .travis.yml файл, конвейер CI будет запускаться при каждой последующей отправке.
В корне вашего проекта создайте файл с именем .travis.yml. И, пожалуйста, убедитесь, что вы правильно написали имя файла. Я ломал голову большую часть часа, размышляя, почему моя сборка не работает, только чтобы обнаружить, что я пропустил ведущий период в .travis.yml.
Это самое малое, что мы можем сделать для нашего конвейера CI. Мы говорим Трэвису, что используем версию узла 10.9.0. Примечание. Я выбрал 10.9.0 только потому, что это последняя стабильная версия Node, доступная на момент написания. Чтобы узнать, какая у вас версия, введите node -v в командной строке и объявите эту версию в своем .travis.yml файле. Мы не хотим расхождений между нашей средой разработки и производственной сборкой, поэтому мы будем использовать согласованную версию Node, которую используем.
Как только вы это сделаете, зафиксируйте изменения и продвигайте их вперед. Трэвис должен распознать ваш .travis.yml файл и запустить конвейер.
Вы должны получать отзывы от Трэвиса о своих сборках и о том, что они терпят неудачу. Это ожидается, поскольку по умолчанию travis запускает yarn test как часть своего конвейера. У нас нет тестов, поэтому бросается error code 1, вызывая сбой конвейера. Чтобы пройти этот тест, мы добавим тест токена в нашу кодовую базу. В blog/src/pages создайте новый файл blogitem.test.js и добавьте следующее.
Мы используем Enzyme, пакет, который позволяет нам тестировать компоненты React, отрисовывая компонент в виртуальной модели DOM. Для целей руководства мы используем ферментный эквивалент expect(true).toBe(true). Теперь перейдите в файл package.json для блога и добавьте jest test --config ../../jest-config.json в поле test под скриптами. Как только вы это сделаете, перейдите к пакету блога в командной строке и запустите yarn test, вы должны пройти тест. Проделайте то же самое с shoppingItem компонентом пакета магазина.
Примечание: вам, скорее всего, понадобится указание react-router-dom в качестве зависимости, чтобы тесты заработали. Я подробно расскажу об этом в разделе устранения неполадок ниже. Также убедитесь, что вы установили jest глобально, в противном случае запустите yarn global add jest в командной строке. Протестируйте, чтобы убедиться, что yarn build по-прежнему работает для каждого пакета, поскольку это будет следующий шаг в нашем конвейере.
Прежде чем мы начнем, нам нужно внести еще пару изменений в наш конвейер. Обновите свой .travis.yml файл, чтобы он выглядел следующим образом:
Дополнения включают кеширование Yarn, установку глобальных зависимостей и указание того, что мы хотим запустить yarn test и yarn build как часть нашего конвейера.
Запустите yarn test в последний раз в командной строке, чтобы убедиться, что все по-прежнему работает. Если это так, подтолкните свой код, чтобы запустить конвейер CI. Держите Travis-CI открытым в своем веб-браузере, чтобы вы могли наблюдать за отзывами на каждом этапе CI. Если Трэвис залил весь экран красным, значит, что-то пошло не так. В этом случае попробуйте запустить все локально, чтобы убедиться, что все еще работает. Распространенной ошибкой является использование глобального пакета локально, который мы явно не указали в нашем .travis.yml файле. Это означает, что у Трэвиса не будет доступа к нему при запуске конвейера. Трэвис обычно ведет хороший журнал, чтобы понять, почему ваш конвейер вышел из строя, так что стоит в них покопаться.
Нам нужно добавить еще два раздела в наш .travis.yml файл.
- Обработка индивидуальных скриптов для каждого пакета.
- Обработка развертывания при прохождении конвейера.
О последнем пока беспокоиться не будем, но давайте займемся запуском скриптов для разных репозиториев. Поскольку мы не собираемся развертывать наш shared-ui, мы можем пропустить его из нашего конвейера CI. Мы будем запускать yarn test и yarn build как для блога, так и для магазина.
Мы сделаем это, добавив matrix шаг сразу после install в конвейер CI. Этот шаг матрицы позволит нам указать, на каких пакетах мы хотим запустить конвейер CI. Мы назовем каждую матрицу и зададим переменные среды для местоположения пакета. Затем мы изменим шаг script, чтобы Трэвис переместился в правильный каталог и выполнил шаг script. Удалите все после шага установки и добавьте следующее:
matrix:
include:
- name: "Blog Pipeline"
env: PACKAGE_LOCATION=packages/blog
- name: "Shop Pipeline"
env: PACKAGE_LOCATION=packages/shop
script:
- cd $PACKAGE_LOCATION
- yarn test
- yarn build
Надеюсь, то, что я сказал, имеет больше смысла с кодом, который перед нами. Конвейер скрипта запускается для каждого шага, который мы включили в матрицу. Мы также добавили еще один шаг в раздел скриптов, он не делает ничего, кроме перехода в каталог текущего пакета. Снова отправьте изменения в свое репо и откройте Travis, чтобы увидеть, как работает ваш конвейер. Теперь вы должны увидеть, как одновременно выполняются два задания сборки, что означает, что наша матрица работает. Если все пройдет, мы перейдем к развертыванию нашего приложения.
Сейчас
Теперь это инструмент, созданный ZEIT, который упрощает процесс развертывания приложений Node. Компания Now недавно выпустила обновления способа развертывания статических веб-сайтов. К счастью, наши пакеты Gatsby создаются для статических сайтов, поэтому для нас это победа.
Если вы раньше не использовали Now, то приступайте. Это установит now-cli и создаст бесплатную учетную запись, что нам нужно для этого учебника. На странице "Начало работы" также есть краткий раздел часто задаваемых вопросов, который стоит прочитать.
Travis-CI по умолчанию не разрешено развертывать в вашей учетной записи Now, и для него требуется токен. Вы можете создать токен на странице настроек учетной записи на веб-сайте Now. Когда вы окажетесь там, перейдите на вкладку токенов и создайте новый токен. Скопируйте его в буфер обмена, так как мы будем добавлять его в список переменных, которые Трэвис использует в наших конвейерах. Перейдите в репозиторий lerna-monorepo в Travis и в раскрывающемся списке «Дополнительные параметры» нажмите «Настройки». Когда вы окажетесь здесь, вы увидите раздел под названием «переменные среды». Создайте новую переменную с именем NOW_TOKEN и вставьте свой открытый ключ Now в качестве значения. Теперь мы можем ссылаться на ключ из нашего .travis.yml файла.
Теперь мы добавим последнюю часть нашего конвейера, которая касается развертывания. Убедитесь, что ваш .travis.yml файл выглядит следующим образом, и мы рассмотрим дополнения.
Обратите внимание, что мы добавили некоторые дополнительные переменные среды в нашу матрицу, поэтому и их там. Мы внесли огромные изменения в конец файла, поэтому давайте рассмотрим их построчно:
- deploy - указывает шаг конвейера; шаг развертывания.
- поставщик - указывает имя сценария, который запускается для развертывания, в данном случае это «сценарий».
- skip_cleanup - мы не хотим, чтобы Трэвис избавлялся от файлов, созданных во время сборки. Мы создали «общедоступную» папку при запуске сборки, поэтому мы не хотим, чтобы Трэвис избавлялся от нее.
- app - указывает имя развертываемого приложения,
Мы должны добавить небольшую конфигурацию на нашей стороне, чтобы обеспечить правильное размещение наших сайтов. Конфигурация представлена в виде now.json файла, в котором описаны параметры, которые мы хотим использовать сейчас при развертывании нашего сайта. Зайдите в каталог пакетов нашего блога и создайте файл now.json. Мы хотим сообщить Now, что мы развертываем статический сайт, каталог входа на статический сайт и какой псевдоним мы хотим назначить нашему сайту. Поместите это в свой now.json файл.
Примечание. Необходимо указать public: true, поскольку у вас, скорее всего, будет бесплатный аккаунт Now. Наличие общедоступного сайта - одно из ограничений уровня бесплатного пользования. Файл входа на наш статический сайт также называется public, поэтому не объединяйте их.
Отправьте эти изменения в свое репо, чтобы запустить конвейер сборки. Если все прошло успешно, ваша сборка будет пройдена и ваш сайт будет развернут. Перейдите к Трэвису, откройте свою сборку блога, чтобы у вас был доступ к журналам. Прокрутите вправо до места, где написано «развертывание приложения», и разверните раздел. Это будет URL, по которому сейчас развернут ваш сайт. Должно получиться примерно https://buildsjdoe383jd.now.sh. Скопируйте этот URL-адрес и вернитесь в командную строку. Выполните следующую команду:
now alias <your randomly generated URL> <your chosen alias>
Я выбрал «lerna-monorepo-blog» в качестве псевдонима, чтобы вы не могли его использовать, поэтому выберите свой. Когда вы запустите команду, вы получите ответ о том, что псевдоним был успешно создан. В противном случае, вероятно, команда была написана неправильно или псевдоним уже используется кем-то другим. После того, как вы успешно добавили псевдоним для блога, сделайте то же самое для пакета вашего магазина.
Даже если вы продвинете все вперед сейчас, навигация по сайту все равно будет нарушена. Последнее, что нам нужно сделать, это добавить наш псевдоним URL в качестве переменных среды в наш .env.production файл. В .env.production вашего blog пакета добавьте следующее:
BLOG_URL=https://<your chosen alias>.now.sh/
Сделайте то же самое для URL-адреса вашего магазина, зафиксируйте и нажмите. Поздравляю!
Заключение
Теперь у вас должна быть возможность получить доступ к сайту и легко перемещаться между вашим магазином и вашим блогом. Отличная работа! Если что-то пошло не так, как планировалось, не переживайте. Этот урок состоит из крошечных движущихся частей, которые создают массу возможностей для того, чтобы что-то пойти не так.
Спасибо за прочтение!
Если вы хотите пригласить меня на конференцию, встречу или выступить в качестве гостя для любого мероприятия, вы можете написать мне в Twitter!
Надеюсь, эта статья научила вас чему-то новому. Я публикую сообщения регулярно, поэтому, если вы хотите быть в курсе моих последних выпусков, вы можете подписаться на меня. И помните, чем дольше вы удерживаете кнопку хлопка, тем больше хлопков вы можете дать. 👏👏👏
Вы также можете ознакомиться с другими моими статьями ниже:
Как использовать новые компоненты Query Apollo для управления локальным штатом
Добавьте немного задержки в свое веб-приложение с помощью React.lazy ()
Не нужно ждать праздников, начни украшать сейчас
Управление местным государством с помощью Apollo и компонентов более высокого порядка
Питьевая игра React Conference
Устранение неполадок
Я буду добавлять в этот раздел, когда сам получу отзывы или наткнусь на проблемы.
Если после глобальной установки вы получаете сообщение об ошибке «lerna: command not found», установите ее локально как зависимость проекта и запустите с помощью yarn lerna <command>.
Запуск вашего приложения:
В первой половине приложения многое может пойти не так, поэтому убедитесь, что ваши файлы находятся на своих местах. Также убедитесь, что вы правильно выполняете импорт из пакета shared-ui.
В первую очередь, когда приложение не работает должным образом, я запускаю lerna clean и lerna bootstrap. Это очистит все ваши node_modules и переустановит их.
Для запуска приложения вам необходимо react, указанное в файле package.json уровня пакета. И вам также потребуются react и react-router-dom, указанные в package.json верхнего уровня для запуска тестов. Это поставило меня в тупик, и единственная логическая причина, по которой я думаю, это происходит, заключается в том, что Gatsby, кажется, ищет React только в каталоге node_modules уровня пакета. Поскольку тесты запускаются с верхнего уровня, React также должен существовать там.
Я предлагаю установить react зависимость уровня пакета от последней версии React, а react зависимость верхнего уровня - от версии 16.0.0.
Запуск конвейера для вашего приложения:
Если ваш конвейер CI неправильно развертывает ваш сайт, может быть трудно определить, проблема ли это в Трэвисе или проблема в Now. Если вы можете перейти в один из каталогов вашего пакета и запустить now, и все будет успешно, то, скорее всего, проблема связана с вашим .travis.yml файлом или способом, которым вы определяете переменные среды в Travis. Просмотрите этот раздел еще раз, чтобы убедиться, что все написано так, как должно быть.
Развертывание вашего приложения:
Если при выполнении команды now в вашем пакете возникает ошибка, убедитесь, что вы вошли в систему через интерфейс командной строки. Вы можете сделать это через now login. Убедитесь, что ваш now.json файл указывает на правильный вывод yarn build. Возможно, ваша версия Gatsby не создает каталог сборки с именем public, а вместо него dist или build.
Просмотр вашего живого приложения:
Скорее всего, вам может потребоваться развернуть свой сайт несколько раз, прежде чем все заработает, господин знает, что я сделал это при написании этого приложения. Одна вещь, которая меня сбила с толку, - это кеширование на стороне клиента. Это то, что Now делает из коробки. Это просто означает, что даже если вы развернули новую версию сайта, вы можете просматривать старую, кэшированную версию. В этом случае откройте инструменты разработчика Chrome / браузера, щелкните правой кнопкой мыши символ перезагрузки и выберите «очистить кеш и полностью перезагрузить».
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .
