Как деплоить react приложение
Данная серия публикаций посвящена созданию сервиса runwith суть которого вы сможете почитать ниже. Это мой первый независимый проект, поэтому буду очень рад вашим комментариям и конструктивной критике касаемо стиля написания статьи и кода в целом, надеюсь тебе будет полезно и интересно, приятного чтения!
Идея сервиса
Было 2 мотивации для создания приложения. Спорим что почти каждый из нас когда то говорил себе:
Уже завтра начну заниматься спортом (С)
и забивал огромный гвоздь в эту ветку развития, если вы не забивали, то огромный F таким людям, но лично я не такой, мне нужна компания для таких занятий, так меньше шанса забить да и в целом вместе же веселей :) это первая мотивация, найти компанию для совместного занятия бегом.
Посидев немного в среде этих мотиваций родилась идея создания сервиса, в котором всяк сюда входящий найдет компаньона для бега в real-time.
Так как проект некоммерческий (а значит времени и средств на его реализацию не слишком много) решил что стоит начать с MVP и допиливать уже в продакшне функциональность.
На момент создания MVP приложение должно уметь
Находить напарника (или напарников до 10 участников) для бега в реальном времени (то есть здесь и сейчас).
Давать возможность для поиска напарника(ов) по выбранному району, а так же выбирать начальную и конечную точку забега.
Уметь хорошо проиндексировать себя в поисковике.
Делать серверный роутинг
Так как я фронтенд реактус разрабус, стек будет соответствовать:
ReactJS (Последних версий, будет писать на хуках)
Typescript (Да это увеличит время разработки из-за дополнительной разработки типов, но приложение может сильно расширяться, поэтому типизация нам пригодится во избежания 1 + "1" = 11 и других подобных приколов слабой типизации JS )
Sass (Был выбор между LESS и PCSS, PCSS собирается быстрей из-за того что плагины ставятся разработчиком и нет ничего лишнего, но sass как то родней как по мне скорость компиляции не столь критична на данных момент)
react-router-dom (Роутинг на клиенте)
NodeJS (Наш сервер)
express (Для упрощения серверной разработки)
Socket.IO (Наше все, создание комнат, real-time поиск, отображение комнат на клиенте)
react-router (Роутинг на сервере)
Webpack (Собственно собирает наш проект)
cross-env (Нам нужны будут системные переменные, для того чтобы определять как собирать проект для разработки или прода и другие)
nodemon (Перезапускает наш сервер при пересборке, чтобы ручками не делать каждый раз при каждом чихе)
Почему не хочу использовать NextJS
NextJS это фреймворк, а любой фреймворк навязывает много правил в разработке и проблемы при каких то кастомных решений (это неплохо но на данный момент противоречит моей 2 мотивации), мне хотелось бы чтобы проект был максимально гибкий, а так же разобраться в работе под капотом гибридного приложения.
Архитектура приложения
Как ты знаешь React это JS библиотека для создания пользовательских интерфейсов и работает она по принципу SPA , то генерация нашей страницы происходит в браузере после получения JS бандла, тк нам нужна наилучшая индексация поисковыми роботами мы будем использовать рендеринг на стороне сервера (и да сейчас 2021 год и многие поисковые роботы уже умеют собирать контент в браузере, однако не все и JS бандл может быть тяжелый, что может повлиять на качество индексации)
Принцип работы SSR (гибридного) - Сервер собирает у себя на стороне React приложение и при запросе отдает в виде строки, при получении браузером происходит восстановление нод и обработчиков и вставка в DOM (если по умному гидратация, делать за нас это будет метод hydrate).
Так как статья получается очень объемной, в этой части опишу только основную структуру нашего приложения, в следующей начну с детальной реализации клиентской и серверной части.
Не устал читать структуру клиентской стороны?) Я вот очень устал ее писать, однако давай перейдем к архитектуре сервера:
Тут все максимально просто :)
Теперь вебпак конфиги (именно конфиг(И), потому что мы должны собрать как клиент, так и сервер)
Еще есть файлы корневой директории, такие как конфиг .TS, package.json, однако расскажу о них в следующей статье когда мы перейдем уже к более детальному процессу разработки.
Заключение и источники
В данной статье постарался рассказать о мотивации создания проекта, о стеке, отличие SSR от SPA и что такое гибридное приложение, а так же архитектуре его директорий. Ссылочка на гит для ознакомления прилагается.
Если у вас остались какие то вопросы или допустил какие то неточности или статью можно как то улучшить, пожалуйста пишите, буду рад почитать ваши комментарии :)
Если вы ищете способ быстро продемонстрировать коллегам или заказчикам идею своего веб-приложения, развернув его на сервере, эта статья для вас.
Вы получите аналогичное приложение после выполнения этих действий:
- локальная установка ReactJS при помощи шаблона;
- настройка «корзины» AWS (Amazon Web Services) S3;
- создание учетных данных пользователя AWS для загрузки файлов на S3;
- развертывание шаблона на AWS;
- проверка работоспособности.
-
версии 6.0 или выше; ;
- Аккаунт AWS (бесплатного будет достаточно). Для интересующихся у нас есть шпаргалка по веб-сервисам Amazon.
1. Установка ReactJS
Клонируем шаблон (запустите команду в терминале), заменив «NameOfApp» на имя своего приложения:
Устанавливаем все библиотеки:
2. Настройка корзины AWS S3
Нажимаем «Create bucket» и вводим имя (например: onederful-quickstart). Нажимаем «Далее» на всех остальных шагах и создаем корзину (bucket, в русскоязычных источниках также можно встретить термин «бакет»):
Теперь открываем только что созданную корзину:
После появления всплывающего окна нажимаем на «Properties»:
Нажимаем на «Static website hosting» и вводим «index.html» в каждом из полей «Index document» и «Error document». Теперь у нас есть общедоступный URL:
Переходим на вкладку «Permissions», вместо [YOUR BUCKET NAME] вписываем свое название проекта:
3. Создаем учетные данные пользователя AWS для загрузки файлов на S3
В консоли управления AWS нажимаем на «IAM» (Identity Access Manager):
Переходим на вкладку «Users», находящуюся на боковой панели, и добавляем пользователя с именем «s3-admin»:
Прикрепляем «AmazonS3FullAccess policy»:
После создания пользователя сохраняем идентификатор доступа и секретный ключ (например, в блокноте) — они будут использоваться на последнем этапе этого руководства:
4. Публикуем шаблон на AWS
Замените следующие данные в файле tools/s3-upload.js :
- YOUR_BUCKET_NAME — на название корзины (со второго шага);
- YOUR_AWS_ACCESS_KEY — на свой идентификатор доступа (с третьего шага);
- YOUR_AWS_SECRET_KEY — на свой секретный ключ (с третьего шага).
5. Проверяем работоспособность и начинаем создавать приложение
Проверьте работоспособность приложения в вашем браузере. Если все работает, вы можете приступать к созданию логики вашего веб-приложения.
Настройка AWS должна выполняться только один раз, поэтому после внесения каких-либо изменений в ваше приложение можно просто запустить команду deploy , и в течение нескольких секунд изменения вступят в силу.
Всем привет. Вместе с весной в OTUS пришли новые курсы, знакомить с которыми мы начинаем прямо сегодня. Уже сейчас открыт набор на курс «React.js разработчик». Подробнее о курсе можно узнать на бесплатном вебинаре, который пройдет 11 марта. В рамках этого же вебинара будет разработано небольшое веб-приложение на ReactJS.
А сейчас предлагаем вам прочитать статью о деплое своего первого приложения, которую написал наш внештатный автор.
Стартовый шаблон Create-react-app и Heroku — это прекрасные инструменты для быстрого создания работающих в облаке приложений, однако документация React и Heroku включает в себя на удивление немного информации о том, как все-таки выкатить свое React-приложение на Heroku. Описанные в этой статье шаги сработают на любом проекте, созданном с помощью create-react-app. В нашей статье мы задеплоим на Heroku простое todo-приложение с самым минимальным бекэндом, просто чтобы посмотреть на сам процесс. Но обо всем по порядку:
Что такое вообще Heroku? Зачем он мне нужен?
Heroku — это облачная платформа как услуга (PaaS), которая поддерживает множество языков программирования (и этим она очень хвастается и выделяется). История Heroku началась в 2007, и тогда первым языком программирования был Ruby. Теперь она поддерживает Java, Node.js, Scala, Clojure, Python, PHP и Go.
А зачем мне это облако? Я вот могу хостинг недорогой купить
Да, вы можете купить себе любой хостинг и установить туда Node.js сервер, если на хостинге поддерживается эта услуга. Однако облачные платформы обладают такими качествами, как, например, эластичность и учет потребления — если на ваш сервис заходит очень много пользователей, тогда платформа скорее всего автоматически (или вы сами с помощью предоставленных платформой инструментов) отмасштабирует или сузит поток. Учет потребления означает, что вы заплатите только за те ресурсы, которые оказались востребованы. Облачные платформы имеют еще множество преимуществ, с полным списком можно ознакомиться здесь. Ну а мы перейдем непосредственно к деплою.
Создание своего React приложения
Что это вообще за шаблон create-react-app? Хоть немного заниматься разработкой React приложений и не знать про него, наверное, невозможно. Этот шаблон предоставляет React, React-dom, Webpack, ESLint «под капотом». Конечно, вы можете сами собрать свое React — приложение, но зачем плодить себе сложное приложение с кучей зависимостей, когда можно воспользоваться уже готовым велосипедом?
Для начала практических шагов убедитесь, что у вас установлена Node.js.
Что бы создать новое приложение, введите в консоль следующие команды:
Для того, чтобы у вас все заработало, нужно поставить create-react-app глобально. Для этого нужно ввести команду npm install -g create-react-app . Однако, если вы ставили уже (насколько я понимаю историю коммитов этого шаблона, то ранее прошлого года), у вас может генерироваться ошибка пути из-за того, что нужно обновить react-scripts на новую версию на 3.4.0. Но чтобы избежать ошибки и в следующих генерациях, вам нужно деинсталировать текущую версию пакета при помощи npm uninstall -g create-react-app .Отлично, вы поставили пакет и теперь хотите задеплоить это. Для того, чтобы не деплоить простой пакет с одним компонентом, который create-react-app поставляет «из коробки», я решил написать небольшое todo-приложение, с исходным кодом которого, если вы тоже хотите попробовать залить свое приложение, можно ознакомиться здесь. Если вкратце, то там идет сохранение состояния в виде нового и модного entries, где сохраняются текст дел и их id, которое генерируется напрямую из Date.now() . Часть верстки компонентов я взял из Material-UI react.
Можете поставить это приложение себе и развернуть его при помощи:
Дальше у нас есть невероятная возможность поиграться и создавать свои дела. Однако все возможности, которые есть в данном приложении — это сохранять дела в state. Никакой подвязки к серверу или хотя бы к localStorage я не делал, цель этой статьи состоит не в этом. Предположим, что я очень сильно параноик и свои дела буду записывать только за одно включение вкладки браузера.
Создание своего favicon
Зачем нам вообще нужен Node.js сервер, если никакой работы с БД не проводится? С помощью сервера мы будем отдавать favicon и весь остальный код. В нашем React-приложении заходим в папку public и удаляем оттуда шаблонный favicon.ico. Я возьму иконку отсюда и перенесу ее в папку public.
Создаем свой Express-сервер
Дальше создаем свой Express сервер для обслуживания билда. Прямо в папке приложения создаем файл server.js , в котором и развернется работа нашего бекенда.
Пишем в нем следующее:
Так как мы используем пакеты express, express-favicon и path, их нужно проинсталлировать:
В package.json изменяем команду start на следующую:
Запускаем build
Дальше нам нужно забилдить приложение с помощью следующей команды:
Неплохо было бы потестировать, что наше приложение работает корректно. Для этого набираем yarn start и оцениваем, насколько корректно оно работает.
Скрываем sourcemap
Возможно вы не хотите, чтобы кто-то мог получить доступ к вашему исходному коду. В этом случае нужно снять доступ к вашим sourcemap . Для этого создаете в репозитории файл .env и запрещаете в нем генерацию карт:
Source map упрощают дебаг кода непосредственно на продакшене (я понимаю, что дебаг, тесты, и комменты на проде это святое, но все-таки так делать нельзя). Самый грамотный ход — создать себе отдельную ветку с source map, на которой вы и будете дебажить, и отдельную в сам прод.Непосредственно деплой
Если у вас еще нет аккаунта на heroku, вам стоит зарегистрироваться здесь . Для деплоя также потребуется установить Heroku CLI отсюда. Проверьте его работу, написав heroku login в командную строку. Дальше вас ждет редирект на сайт heroku, где нужно авторизоваться.
Потом вводим имя вашего приложения. В моем случае это будет todoisakura313, потому что использовать спецсимволы и нижние подчеркивания в имени приложения нельзя:
Потом мы отправим наш билд с помощью следующих команд:
Эти команды позволят поставить зависимости, инициализировать git , и загрузить само приложение.
Если что-то пошло не так, узнать, в чем дело можно с помощью команды heroku logs --tail . Однако, в общем, если вы не отклонялись от инструкций данной статьи, у вас все должно было получиться.
На этом все! Спасибо за внимание. С работающим приложением можно ознакомиться здесь, а с его готовым кодом — здесь.
А тех, кто дочитал до конца, мы приглашаем на еще один бесплатный вебинар, в рамках которого Вы узнаете сильные и слабые стороны самых популярных JS-фреймворков для Frontend-разработки, поймете для каких задач какой из фреймворков лучше подойдет и сможете определиться, что лучше изучать.
React это одна из самых популярный JavaScript библиотек для создания интерфейсов. С помощью React можно очень быстро написать несложное веб-приложение или создать рабочий прототип. Но встает вопрос, как показать свое творение миру.
Привычным ответом будет — залить на хостинг. Но для этого приложение нужно сначала собрать, а затем скопировать получившиеся файлы на хостинг. И при каждом изменении приложения всю процедуру надо будет повторять еще раз. И тут на помощь приходит Heroku — облачный инструмент для сборки и развертывания приложения за пару консольных команд.
Наша задача в это й статье создать простейшее приложение на React и получить его рабочую версию в сети. Давайте же посмотрим, как это можно сделать.
Сначала создадим простое React приложение. Предполагаем, что Node у вас уже установлена, тогда легче всего это сделать с помощью утилиты create-react-app. Чтобы ее запустить, воспользуемся менеджером пакетов npx, поставляемом вместе с npm версии >= 5.2.
npx в отличие от npm самостоятельно ищет последнюю версию пакета, устанавливает ее и запускает. Таким образом следующая команда запустит create-react-app. Под капотом create-react-app использует Babel и Webpack для сборки и транспиляции, но для разработчика это остается незаметным.
После того, как create-react-app отработала, заходим в папку только что созданного проекта и стартуем приложение.
Приложение запустится в браузере на localhost:3000.
Деплой на обычный хостинг
Рассмотрим отличия процесса деплоя на обычный хостинг и на Heroku.
В случае с обычным хостингом сначала необходимо собрать приложение. Благодаря react-create-app все инструменты для этого в нашем проекте уже настроены. Запускаем команду:
После завершения работы команды в корне проекта появится папка build со всеми файлами, которые необходимо разместить на хостинге.
Деплой на Heroku
Для деплоя на Heroku необходимо будет внести в проект некоторые изменения.
Во-первых, добавить модуль сервера:
Затем изменить scripts в package.json
После создания вы сразу попадаете на страничку с инструкцией о том, как перенести ваш проект во внутренний репозиторий Heroku. Продублирую ее здесь:
Скачиваем Heroku CLI. Убедитесь, что у вас установлен Git, так как он нам сейчас понадобится. Заходим в папку с приложением на нашем компьютере и выполняем команды:
Далее заливаем последние изменения в удаленный репозиторий:
После выполнения этих команд, Heroku начинает автоматически скачивать зависимости и собирать приложение, затем располагает его на облачных серверах. Далее можно открыть рабочее приложение в браузере набрав команду:
Теперь любые изменения легко добавляются в проект, достаточно лишь запушить изменения в репозиторий, heroku сам пересобирет приложение.
Пару месяцев назад я задумался об автоматическом развертывании проекта при обновлении репозитория с этим проектом на gitlab . В тот момент коллега работал над одним из важных проектов компании, и так уж получилось что проект на React , который требует компиляции при помощи node.js , который найдешь не на каждом web хостинге. Но теперь у меня тоже есть проект на React и мне не нрваится руками запускать компиляция и заливать по ftp .
У читателя может возникнуть вопрос: а почему бы не сделать все по нормальному, к чему все эти ограничения в виде web хостинга и отсутсвия машины для компиляции? Ответ прост: нужно было сделать здесь и сейчас, на том что есть и это не обсуждалось :) Схема с использованием удаленного build репозитория была сделана как практическая хотелка для скилла, возможно более грамотный подход описан здесь же в главе "Вариант с архивом", он требует меньше, но делает столько же.Условия
- свой gitlab хостинг куда разрабы могут ходить только как пользователи, никаких ssh
- проект на React с частыми апдейтами (компиляция по
- компилировать исходники React проекта на node.js
- удалять с хостинга старые данные
- заливать на хостинг новые скомпилированные данные
Решение
git hooks
Внезпно обнаруживаем git хуки и читаем вывод команды терминала git help hooks . Стоит заметить что:
git хуки бывают клиентскими (выполняются на машине разработчика) и серверными (выполняются на сервере).Реализация клиентских хуков расположена по адресу .git/hooks относительно репозитория. Здесь представлены не все возможные хуки, а лишь часть. Чтобы пример хука заработал достаточно из имени файла удалить точку с расширением (.sample).
Судя по git help hooks наиболе подходящим вариантом для реагирования на обновление репозитория, а точнее на предстоящее обновление, является хук pre-push , который срабатывает непосредственно перед отправкой данных на удаленный репозиторий.
Возможности web хостинга
Схема деплоя
- реализовать хук pre-push , который запустит компиляцию React проекта, а по итогу компиляции инициализирует новый репозиторий и с перезаписью отправит его в специальный удаленный репозиторий на gitlab , в котором будет хранится скомпилированный React проект
- в этом специльном репозитории настроим WebHook , который вызовет скрипт на хостинге сайта и склонирует специальный репозиторий в нужное место, обновив тем самым сайт
Реализация
Доступ к репозиторию пока осуществляется по логину и паролю, поэтому в тексте ниже используется именно этот метод аутентификации.Создадим репозиторий для хранения скомпилированного React проекта.
Создадим файл build.bash (в любом месте, но я создал его прямо в репозитории с исходниками) и поместим туда следующее:
Здесь осуществляется переход в директорию React проекта и его компиляция, затем переход в директорию с билдом и создание локального репозитория. А в конце заливка билда в удаленный репозиторий с полной перезаписью всего содержимого репозитория.
Перейдем в директорию с хуками в репозитории ( .git/hooks ), который надо размернуть и создадим файл pre-push со следующим содержимым:
nohup в начале и & в конце команды нужны чтобы скрыть вывод терминала Перезапись репозитория не сохраняет коммиты, так как нет необходимости вести котнроль версий.Репозиторий с билдом в данном случае является лишь точкой реагирования, посредством которой произойдет финальная стадия деплоя.И сделаем оба файла исполняемыми:
Теперь создадим WebHook у проекта на gitlab , указав URL скрипта, секретный токен (по которому будем идентифицировать источник) и отметим только push :
Затем на web хостинге сайта в корневой директории создадим php скрипт __deploy-client.php куда поместим следующий код:
Вариант с архивом
Суть такова: заменяем специальный репозиторий с билдом на архив.
Немного меняем build.bash :
В предпоследней строке создаем zip файл из содержимого директории build после компиляции. А на последней строке отправляем post запрос на целевой сайт где требуется развернуть новую версию интерфйса сайта.
Теперь немного поменяем скрипт деплоя на сайте:
При использовании архива для развертывания наличие git сервера (а значит и удаленного репозитория) необязательно, деплой можно повесить на хук post-commitВ итоге имеем автоматическое развертывание React проекта на сайт, размещенный на web хостинге. В данном случае компиляция осуществляется на машине разработчика.
Читайте также: