Как запустить react приложение на хостинге
What You'll Be Creating
React стал популярным фреймворком, как для разработки на стороне клиента, так и сервера. Изначально react имел высокий порог вхождения, когда дело касалось инструментов сборки, помимо этого наблюдалось некоторое разочарование в JavaScript со стороны сообщества. create-react-app как раз и был создан, чтобы изменить положение вещей.
Начнём
Для начала убедитесь, что у вас установлен Node. Вам понадобится по крайней мере Node 4 версии, но рекомендуется 6 версия для быстрой загрузки пакетов и оптимизации дискового пространства. Можно использовать nvm для переключения между версиями Node.
После того как установите Node, откройте командную строку и поставьте глобально create-react-app, тем самым вы будете иметь возможность запустить команду где угодно на вашей системе.
npm install -g create-react-app
Как создать первое приложение
Сперва откройте командную строку и создайте или перейдите в директорию где вы планируете начать процесс разработки. Далее мы создадим приложение запустив create-react-app tuts-plus-react-app . Будет запущен инструмент командной строки и создано приложение tuts-plus-react-app.
Далее вам следует перейти в директорию приложения выполнив команду cd tuts-plus-react-app .
Запускаем приложение
Приложение использует webpack для запуска локального сервера. Вам доступна функция watch, когда вы редактируете код React и сохраняете изменения, они автоматически отобразятся в браузере.
В том случае, если в коде будут ошибки, вы также увидите предупреждения в браузере.
Стиль кода и тестирование
В вашем распоряжении имеется ESLint, он будет следить за тем, что приложение отвечает популярным стилям кода. Следовательно вы будете знать, что код стабильный, что особенно важно когда над проектом работают несколько человек. Я рекомендую использовать данную функцию, если вы начинающий React разработчик, изучите правильные React и JavaScript стили написания кода.
Если вам знакомо написание тестов для кода, в вашем распоряжении - Jest. Jest фреймворк для тестирования, который был создан и поддерживается Facebook, создателями React. Для запуска тестов, выполните npm test в командной строке. Запустятся тесты, после чего запустится watcher, для выполнения тестов, в то время, как ваш конечный код изменится. Можно добавить уже существующий файл с тестами в src/App.test.js .
Развёртывание приложение на сервере
Когда вы закончите разработку, время подготовить приложение к переносу на сервер. Всё что вам нужно сделать, так это выполнить npm run build в директории приложения. Данная команда запустит Babel для транспиляции React кода в код, который способен понимать браузер. Помимо этого, код будет минифицирован для лучшей производительности.
Пользовательский мануал
Ко всему прочему - документация касательно тестирования и развёртывания приложения.
Приятного хакинга
Надеюсь вы поняли насколько просто создать React приложение с create-react-app. Надеюсь это поможет понизить порог вхождения и начать работу с React. Я уверен вам это понравится!
Пару месяцев назад я задумался об автоматическом развертывании проекта при обновлении репозитория с этим проектом на 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 хостинге. В данном случае компиляция осуществляется на машине разработчика.
Если вы ищете способ быстро продемонстрировать коллегам или заказчикам идею своего веб-приложения, развернув его на сервере, эта статья для вас.
Вы получите аналогичное приложение после выполнения этих действий:
- локальная установка 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 , и в течение нескольких секунд изменения вступят в силу.
Сервис Firebase от Google довольно нелпохо развился в последнее время. Одной из его приятных “фишек” является Firebase Hosting - хостинг для статических сайтов или SPA/Web приложений. В рунете про него мало информации, впрочем как и про Firebase в целом, что по моему мнению несправделиво, ибо сам сервис от “Корпорации Добра” хорош, особенно для начинающих разработчиков.
Итак, если вам нужно показать заказчику готовую верстку, или демку приложения на React/Angular/Vue (…любое другое serverless приложение на JS) можно воспользоваться бесплатным хостингом от Firebase. Он подойдет также для сайта сгенерированного на Jekyll, или любого другого статического сайта(лэндинг, визитка, портфолио, CV…). Чтобы начать пользоваться нужно совсем немного - иметь аккаунт в google и чуть-чуть свобоного времени.
На выбор дают 3 тарифа - 2 платных и один бесплатный, который к слову включает в себя уже SSL! Где такое встретишь у отечественых хостеров?
На бесплатном тарифном плане нам дают: 1GB дискового пространства и месячный траффик в 10GB/месяц. Для показа заказчику, тестирования или первоначлаьного размещения сайта или приложения хватит. Тем более что здесь можно привязать домен, купленный заранее. Я создал небольшое TODO приложение на ReactJS, которое мы “зальем” на хост. Данный пример будет справедлив также для любого статического сайта/верстки etc…
Let’s do it!
Создание проекта
Для начала нужно иметь зарегестрированный аккаунт в google. Есть такой?
Настройка проекта
Основные команды:
- firebase login - для входа в учетную запись гугла.
- firebase init - инициализирует в директории проект, создает там 2 файла: .firebaserc в котором хранится название проекта, и firebase.json, в котором можно указать: какие директории/файлы не загружать на хостинг, прописать путь для папки public и многое другое.
- firebase deploy - команда для отправки файлов из папки public на хостинг. Если вы хотите обновить файлы на сайте или залить новые - выполняйте ее.
Готовый тестовый домен у Вас уже имеется, можно перейти на него и проверить работу нашего приложения/сайта. Также можно подключить свой домен.
Внизу история развертываний. Каждый раз когда вы будете выполнять команду - firebase deploy, будут появляться своего рода резевные копии, к котороым в любой момент можно “откатиться”. Это удобно! И не нужно в случае со обычным хостингом просить резервную копию у тех.поддержки.
В следующих статьях мы более детально рассмотрим другие сервисы, которые предлагаются в Firebase:
Читайте также: