Как развернуть приложение React с внутренним API. Часть 3: Heroku.
В этом руководстве мы узнаем, как развернуть приложение React с внутренним API на Heroku. Мы рассмотрим развертывание API Express.js для взаимодействия с интерфейсом React.
Это третья часть руководства. В части 1 мы узнали, как развернуть приложение в Netlify, включая развертывание лямбда-функций, вы можете прочитать это здесь. Во второй части руководства мы узнали, как развернуть приложение на Vercel, вы можете прочитать его здесь.
Если вы уже прочитали часть 1 или 2 руководства, вы можете пропустить этот раздел и сразу перейти к разделу Heroku.
Совет: используйте Bit, чтобы поделиться и установить компоненты React. Используйте свои компоненты для создания новых приложений и делитесь ими со своей командой, чтобы создавать их быстрее. Попробуйте.
Давайте начнем
Наше приложение React будет очень простым по своей природе, оно вызывает API Express.js только с одним POST маршрутом и одним GET маршрутом.
Маршрут GET возвращает «Hello from Express», а маршрут POST - это всего лишь одно поле, которое при публикации возвращает «Я получил ваш запрос POST. Это то, что вы мне прислали: [из ввода] ».
Ниже приведен отрывок из кода Express.js, показывающий оба маршрута.
app.get('/api/hello', (req, res) => {
res.send({ express: 'Hello From Express' });
});
app.post('/api/world', (req, res) => {
res.send(
`I received your POST request. This is what you sent me: ${req.body.post}`,
);
});
В приложении также есть маршрутизация на стороне клиента с помощью React Router, который переходит на дополнительную страницу и отображает страницу 404, когда мы вводим несуществующий URL.
Ниже вы можете увидеть демонстрационное приложение.
После загрузки React вызывает конечную точку Express.js GET и отображает сообщение. При отправке формы с одним полем React вызывает конечную точку Express.js POST и отображает сообщение.
Я решил включить маршрутизацию на стороне клиента, потому что одностраничные приложения (SPA) используют API истории, и при развертывании нам необходимо включить некоторые дополнительные шаги. (Подсказка: нам нужно настроить перенаправления)
Допустим, мы развертываем приложение на demoapp.com. Когда мы нажимаем demoapp.com, приложение загружается. Затем мы нажимаем ссылку меню «Другая страница (demoapp.com/another-page)», и страница загружается нормально; но если мы обновим страницу, мы получим ошибку. Это потому, что сервер ищет файл с именем «another-page», но этот файл не существует, поскольку все наше приложение (включая маршрутизацию) загружается из index.html. Итак, нам нужно каким-то образом указать серверу перенаправить все запросы на index.html.
Я буду указывать именно этот шаг в каждом развертывании, чтобы исправить эту «проблему».
Базовая структура приложения
У каждого развертывания есть собственный корневой каталог. Тогда у нас будет наш API Express.js в каталоге api, а приложение React - в каталоге client или прямо в корневом каталоге каждого проекта.
Приложение React было загружено с помощью Create React App (CRA), поэтому структура каталогов довольно стандартна с исходными файлами в каталоге src и общедоступными ресурсами в каталоге public.
Heroku
Взгляните на репо в каталоге heroku.
Heroku немного отличается от Now и Netlify. Здесь вам нужно запустить приложение React, настроив предпочтительную серверную технологию. Heroku поддерживает, среди прочего, Node, Ruby, Python и PHP.
В нашем случае мы создадим экземпляр Node, и Express.js будет обслуживать наше приложение React и API. Heroku также создаст приложение React на своих серверах при развертывании.
Перед тем, как начать, зайдите в Heroku и создайте учетную запись или войдите в систему. Вам также необходимо будет установить их инструмент командной строки.
Чтобы установить инструмент Heroku CLI, введите в терминале (macOS) следующее:
brew tap heroku/brew && brew install herokuВы также можете скачать установщик. Пользователям Windows потребуется загрузить установщик Windows. Подробнее об этом вы можете узнать в инструкции по установке.
Для входа в систему введите свой терминал
heroku login
Откроется окно браузера, в котором вам нужно будет войти в систему со своими учетными данными. После этого интерфейс командной строки автоматически войдет в систему.
Структура проекта
Взгляните на репо в каталоге Heroku.
├── /client └── server.js
Здесь у нас есть API Express.js прямо в каталоге root, а приложение React - в каталоге client.
Необходимые конфигурации
Как и в предыдущем примере, здесь у нас также есть приложение Express.js, работающее на порту 5000, и приложение React на порту 3000. Поэтому нам нужно будет настроить прокси-сервер.
На этот раз клиентская сторона package.json находится в каталоге client, и мы добавляем прокси следующим образом
"proxy": "http://localhost:5000/",
Теперь давайте откроем package.json со стороны Express.js (в каталоге root) и заметим, что у нас есть специальный скрипт npm.
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
Этот сценарий сообщает Heroku, что делать после развертывания приложения Express.js. В нашем случае мы хотим создать наше приложение React для производства, которое будет обслуживаться нашим приложением Express.js. Вы можете узнать больше о поддержке Heroku Node в их документации.
Express.js
Давайте посмотрим на код Express.js
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// API calls
app.get('/api/hello', (req, res) => {
res.send({ express: 'Hello From Express' });
});
app.post('/api/world', (req, res) => {
res.send(
`I received your POST request. This is what you sent me: ${req.body.post}`,
);
});
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use(express.static(path.join(__dirname, 'client/build')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
app.listen(port, () => console.log(`Listening on port ${port}`));
Все то же, что и в предыдущем примере, за исключением кода, выделенного жирным шрифтом. Здесь мы указываем, если переменная среды NODE_ENV равна production, тогда мы запустим некоторый код. В основном мы обслуживаем готовое к производству приложение React и перенаправляем клиентские маршруты на index.html.
Причина, по которой мы делаем это таким образом, заключается в том, что при развертывании Heroku автоматически назначит production переменной среды NODE_ENV, и мы хотим запускать только этот конкретный код в производственной среде. Во время локальной разработки у React есть собственный сервер разработки, поэтому нашему приложению Express.js не нужно его обслуживать.
Приложение React
Вот как мы вызываем API в нашем приложении React
...
callApi = async () => {
const response = await fetch('/api/hello');
const body = await response.json();
if (response.status !== 200) throw Error(body.message);
return body;
};
handleSubmit = async e => {
e.preventDefault();
const response = await fetch('/api/world', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ post: this.state.post }),
});
const body = await response.text();
this.setState({ responseToPost: body });
};
...
Развертывание на Heroku
Для развертывания в Heroku проект должен находиться в локальном репозитории Git.
Ниже приведены шаги по инициализации нового репозитория Git.
cd my-app-directory/ git init
Затем вам нужно будет создать экземпляр приложения в Heroku. Для этого введите в свой терминал следующее (убедитесь, что вы находитесь в корне проекта)
heroku create [app-name]
app-name будет именем приложения.
Если вы заметили на скриншоте, я пытался создать проект с именем create-react-app-express, но это имя уже занято. При создании приложений имя должно быть уникальным по всем направлениям. После того, как я выбрал другое имя (create-react-app-expressjs), я смог создать приложение. Heroku дал мне ссылку на приложение и добавил git remote.
На скриншоте выше я проверяю конфигурацию git, и мы видим пульт с именем heroku. Здесь мы собираемся развернуть наш код.
Перед развертыванием нам нужно зафиксировать код
git add . git commit -m "initial commit"
Теперь мы можем развернуться на Heroku
git push heroku master
Подробнее о развертывании в их документации.
И у нас есть живое приложение: https://create-react-app-expressjs.herokuapp.com/
Бонус
Heroku также поддерживает непрерывную доставку, и у них есть несколько вариантов. Взгляните на их документы. Еще одна особенность Heroku заключается в том, что вы можете установить множество надстроек, например, для отправки электронных писем и аутентификации.
Заключение
В этой статье мы узнали, как развернуть приложение React с API Express.js в Heroku. Если вы также читали часть 1 и часть 2 этой серии, теперь у вас есть инструменты для развертывания не только в Now и Heroku, но и в Netlify.
И, как я уже говорил ранее, научившись развертывать у нескольких поставщиков, вы сможете принять обоснованное решение, когда придет время развертывать свой проект в производственной среде. Спасибо, что дочитали до этого места. Надеюсь, тебе понравилось! Не стесняйтесь комментировать ниже и спрашивать, я буду рад помочь :) Ура!
