Переходите от нулевого уровня к производственному с помощью React, Docker и Travis CI

Раньше мы работали над настройкой React с Docker на этапе разработки. Но что делать, когда мы закончили работу над нашим аккуратным приложением и захотели поделиться им со всем миром? Эта статья объяснит, как именно это сделать.

Примечание. Я настоятельно рекомендую вам ознакомиться с первой частью, прежде чем читать эту статью. В предыдущей главе рассказывалось о многих концепциях и том, как работает Docker: « Вот как вы можете использовать Docker с React »

Настройка Docker для производства

На данный момент у нас есть Dockerfile для разработки, но как насчет производства? Чтобы исправить это, нам нужен еще один файл Docker, предназначенный для производственной сборки.

Создание рабочего Dockerfile

Идите вперед и создайте файл с именем Dockerfile со следующим содержимым:

Файл Docker очень похож на файл для разработки, не так ли? Основное различие между производством и разработкой - это последняя команда, в которой мы указываем запуск сценария build.

Примечание. Если Dockerfile вас сбивает с толку, прочтите первую главу, где мы шаг за шагом рассмотрим аналогичный файл.

Сценарий build собирает приложение для производства в папку build. Он правильно связывает React в производственном режиме и оптимизирует сборку для достижения максимальной производительности.

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

Тестирование рабочего Dockerfile

Прежде чем развертывать образ Docker в Travis CI, давайте убедимся, что Docker успешно создает рабочий образ. Создайте рабочий образ Docker следующим образом:

Если все прошло, как ожидалось, вы должны увидеть следующее сообщение:

Successfully tagged indreklasn/my-react-docker-app:latest

Не забудьте заменить тег изображения докера своим именем. Например, вместо indreklasn/my-react-docker-app можно сделать yourname/my-react-docker-app или что-то подобное.

Настройка Travis CI (непрерывная интеграция)

Прежде чем мы начнем, давайте разберемся, почему непрерывная интеграция - это хорошая идея.

Что такое непрерывная интеграция (CI)?

Непрерывная интеграция - это практика частого слияния небольших изменений кода, а не слияния крупных изменений в конце цикла разработки. Цель состоит в том, чтобы создавать более здоровое программное обеспечение, разрабатывая и тестируя меньшими порциями. Вот тут-то и пригодится Travis CI.

CI Builds и автоматизация: сборка, тестирование, развертывание

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

Сборки CI также могут автоматизировать другие части рабочего процесса доставки. Это означает, что задания могут зависеть друг от друга с помощью этапов сборки, настройки уведомлений, подготовки развертываний после сборки и многих других задач.

Я выбрал Travis CI по следующим причинам:

  • Хорошо работает вместе с Github.
  • Он прост в использовании и бесплатен для частных лиц.

Перейдите на официальный сайт Travis CI и зарегистрируйтесь.

После того, как вы нажмете кнопку «Активировать все репозитории с помощью приложений Github», вы должны увидеть список репозиториев Github.

Создание .travis.yml

Сборки в Travis CI настраиваются в основном с помощью конфигурации сборки, хранящейся в файле .travis.yml в вашем репозитории. Это позволяет гибко управлять версиями вашей конфигурации. Идите вперед и создайте файл с именем .travis.yml в корне проекта:

Прежде чем двигаться дальше, вам понадобится учетная запись Dockerhub! Пожалуйста, сделайте один здесь, прежде чем двигаться дальше:

Что происходит в .travis.yml файле:

  • Трэвис использует Docker в качестве нашей среды.
  • Создает образ Docker для разработки.
  • Затем мы запускаем все тесты внутри этого образа разработки. Это то же самое, что запустить npm run test внутри нашего проекта. Прежде чем двигаться дальше, мы хотим убедиться, что все тесты пройдены.

npm test

Запускает тестовый раннер в интерактивном режиме часов. См. Дополнительную информацию в разделе Запуск тестов.

Ваше приложение готово к развертыванию! См. Раздел Развертывание для получения дополнительной информации о развертывании вашего приложения у популярных хостинг-провайдеров.

Размещение кода на Github

Создайте репозиторий Github и отправьте код в репозиторий.

Как только вы отправите код в Github, Трэвис автоматически выберет репозиторий и увидит файл .travis.yml.

Поздравляю - вы дошли до конца!

Если вы столкнулись с какими-либо проблемами, см. Репозиторий Github на предмет опечаток.

Заключение

Спасибо за прочтение! Удачного кодирования и не стесняйтесь задавать мне любые вопросы.

Лучший способ быть в курсе моего контента - это моя информационная рассылка. Будьте первым, кто получит уведомление.