Heroku и React: деплоим свое первое приложение

Всем привет. Вместе с весной в 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.

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

 npx create-react-app test-app
 cd test-app

Полезное замечание

Для того, чтобы у вас все заработало, нужно поставить 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.

Можете поставить это приложение себе и развернуть его при помощи:

 npm i -D
 npm start

Дальше у нас есть невероятная возможность поиграться и создавать свои дела. Однако все возможности, которые есть в данном приложении — это сохранять дела в state. Никакой подвязки к серверу или хотя бы к localStorage я не делал, цель этой статьи состоит не в этом. Предположим, что я очень сильно параноик и свои дела буду записывать только за одно включение вкладки браузера.

Создание своего favicon

Зачем нам вообще нужен Node.js сервер, если никакой работы с БД не проводится? С помощью сервера мы будем отдавать favicon и весь остальный код. В нашем React-приложении заходим в папку public и удаляем оттуда шаблонный favicon.ico. Я возьму иконку отсюда и перенесу ее в папку public.

Создаем свой Express-сервер

Дальше создаем свой Express сервер для обслуживания билда. Прямо в папке приложения создаем файл server.js, в котором и развернется работа нашего бекенда.

Пишем в нем следующее:

 const express = require('express');
 const favicon = require('express-favicon');
 const path = require('path');
 const port = process.env.PORT || 8080;
 
 // здесь у нас происходит импорт пакетов и определяется порт нашего сервера
 const app = express();
 app.use(favicon(__dirname + '/build/favicon.png')); 
 
 //здесь наше приложение отдаёт статику
 app.use(express.static(__dirname));
 app.use(express.static(path.join(__dirname, 'build')));
 
 //простой тест сервера
 app.get('/ping', function (req, res) {
  return res.send('pong');
 });
 
 //обслуживание html
 app.get('/*', function (req, res) {
 res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 app.listen(port);

Так как мы используем пакеты express, express-favicon и path, их нужно проинсталлировать:

 yarn add express express-favicon path -D

В package.json изменяем команду start на следующую:

 "start": "node server.js",

Запускаем build

Дальше нам нужно забилдить приложение с помощью следующей команды:

 yarn build

Неплохо было бы потестировать, что наше приложение работает корректно. Для этого набираем yarn start и оцениваем, насколько корректно оно работает.

Скрываем sourcemap

Возможно вы не хотите, чтобы кто-то мог получить доступ к вашему исходному коду. В этом случае нужно снять доступ к вашим sourcemap. Для этого создаете в репозитории файл .env и запрещаете в нем генерацию карт:

 GENERATE_SOURCEMAP=false

Полезное замечание

Source map упрощают дебаг кода непосредственно на продакшене (я понимаю, что дебаг, тесты, и комменты на проде это святое, но все-таки так делать нельзя). Самый грамотный ход — создать себе отдельную ветку с source map, на которой вы и будете дебажить, и отдельную в сам прод.

Непосредственно деплой

Если у вас еще нет аккаунта на heroku, вам стоит зарегистрироваться здесь . Для деплоя также потребуется установить Heroku CLI отсюда. Проверьте его работу, написав heroku login в командную строку. Дальше вас ждет редирект на сайт heroku, где нужно авторизоваться.

Потом вводим имя вашего приложения. В моем случае это будет todoisakura313, потому что использовать спецсимволы и нижние подчеркивания в имени приложения нельзя:

 heroku create todoisakura313

Потом мы отправим наш билд с помощью следующих команд:

 npm install
 git add --all
 git commit -m "first commit"
 git push heroku master 

Эти команды позволят поставить зависимости, инициализировать git, и загрузить само приложение.

Отлично! В общем все готово, сейчас приложение уже должно появиться по адресу https://<название вашего приложения>.herokuapp.com/. Вы можете открыть приложение, набрав в консоли следующие команды:

heroku open

Если что-то пошло не так, узнать, в чем дело можно с помощью команды heroku logs --tail. Однако, в общем, если вы не отклонялись от инструкций данной статьи, у вас все должно было получиться.

На этом все! Спасибо за внимание. С работающим приложением можно ознакомиться здесь, а с его готовым кодом — здесь.

А тех, кто дочитал до конца, мы приглашаем на еще один бесплатный вебинар, в рамках которого Вы узнаете сильные и слабые стороны самых популярных JS-фреймворков для Frontend-разработки, поймете для каких задач какой из фреймворков лучше подойдет и сможете определиться, что лучше изучать.