Как развернуть приложение React с сервером Express на Heroku

Ashish Nandan Singh

Привет, мир! Недавно мне нужно было развернуть веб-сайт на Heroku для одной из частей работы, которую я выполнял на фрилансе. Я думаю, что этот процесс может быть несколько сложным, и подробный учебник или статья о том, как это сделать, должны помочь. Так что этот будет очень простым и, надеюсь, очень коротким.

Мы начнем с создания приложения Express, которое будет действовать как наш сервер. Как только сервер будет готов, мы создадим простое приложение create-react-app, соединим сервер с фронтендом и, наконец, развернем все это на хостинговой платформе, такой как Heroku.

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

Давайте начнем.

Создание приложения Node/Express

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

$ touch server.js$ npm init

Последняя команда из приведенного выше фрагмента проведет вас через некоторые шаги и инициализирует ваш проект с файлом package.json. Если вы совсем новичок в этом деле, можете считать этот файл бухгалтерской книгой, в которой хранятся записи обо всех зависимостях, которые вы будете использовать в процессе сборки вашего приложения.

Теперь, когда у нас готов файл package.json, мы можем начать с добавления зависимостей для проекта.

Добавление Express:

$ npm i -g express --save

Это добавит Express как зависимость в ваш package.json. Теперь, когда у нас это есть, нам нужна еще одна зависимость, и она нужна для горячей перезагрузки приложения, когда мы вносим изменения в код:

$ npm i -g nodemon --save --dev

Это добавит nodemon в приложение. Если вы хотите прочитать больше о nodemon, вы можете обратиться к этой ссылке для получения дополнительной информации.

Теперь, когда все это добавлено, мы готовы к созданию нашего самого базового сервера в Express. Давайте посмотрим, как это делается.

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

//Route 
setupapp.get('/', (req, res) => { 
    res.send('root route');
})

//Start 
serverapp.listen(port, (req, res) => {
    console.log(`server listening on port: ${port}`)
});

Вот и все. Просто перейдите в терминал, убедитесь, что вы находитесь в корневом каталоге проекта, и введите:

$ nodemon <name-of-the-file> (index.js/server.js)

В нашем случае, поскольку мы назвали его server.js, это будет nodemon server.js. Это запустит сервер на порту 5000 вашего компьютера локально. Если вы зайдете в браузер и откроете https://localhost:5000/, то увидите текст “root route“, что означает, что сервер запущен. Если у вас возникнут какие-либо проблемы, не стесняйтесь добавить их в комментариях ниже.

Теперь, когда сервер настроен и работает, давайте перейдем к настройке приложения React.

Приложение React

$ npm i -g create-react-app$ create-react-app <name-of-the-app>

Для целей этого руководства мы назовем приложение “client“, поэтому наша команда будет выглядеть следующим образом create-react-app client.

После этого установка займет некоторое время и создаст небольшую папку внутри вашего основного приложения с именем “client“.

Пока что мы не будем вносить никаких серьезных изменений в общее приложение React – это выходит за рамки данного руководства.

Теперь задача заключается в том, что нам нужно вызвать и соединиться с нашим сервером, работающим на localhost. Для этого нам нужно сделать вызов API.

Добавление прокси

React дает нам возможность сделать это, добавив значение прокси в файл package.json. Перейдите к файлу package.json в вашей директории и добавьте приведенный ниже фрагмент кода.

"proxy": "http://localhost:5000",

В нашем случае сервер работает на порту 5000, отсюда и 5000 в значении прокси. Значение может отличаться, если вы используете другой порт.

Теперь нам нужно вызвать конечные точки Express-defined, или конечные точки API, из наших компонентов React. На самом деле это означает, что теперь мы можем просто вызвать “api/users/all” со стороны клиента, который затем проксирует наш запрос, и он будет выглядеть следующим образом “https://localhost:5000/api/users/all“. Это избавляет нас от необходимости делать кросс-запрос, который большинство современных браузеров не разрешают по соображениям безопасности.

Далее мы внесем некоторые изменения в файл src/app.js.

import React, { Component } from 'react';
import './App.css';
import Navbar from './Components/Layout/Navbar';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './Components/Layout/Footer';
import Home from './Components/Layout/Home';
import Social from './Components/social/Social';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {}
    this.connecToServer = this.connecToServer.bind(this);
  }

  connecToServer() {
    fetch('/');
  }

  componentDidMount() {
    this.connecToServer();
  }

  render() {
    return(
      <Router>
        <div className="container">
          <Navbar />
          <Route exact path="/" component={Home} />
          <Route exact path="/social" component={Social} />
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;

Мы создали конструктор и привязали его значение к нашей функции, которая будет выполнять вызов API fetch. Затем мы вызываем функцию, как только компонент будет смонтирован. Далее у нас есть функция render, которая содержит общую разметку для приложения. Это было последнее изменение, которое мы сделаем в React или в нашем фронтенд-приложении.

Ваш файл package.json должен выглядеть так, как показано в фрагменте кода ниже.

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "react-router-dom": "^4.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:5000",
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

Теперь давайте сделаем паузу на минуту и подумаем, что нам нужно сделать дальше…. какие-нибудь мысли?

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

Изменение файла сервера

const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 5000;

//Static file 
declarationapp.use(express.static(
  path.join(__dirname, 'client/build')
));

//production 
modeif(process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(
    __dirname, 'client/build')));
  app.get('*', (req, res) => {
    res.sendfile(path.join(
      __dirname = 'client/build/index.html'));
  })
}

//build 
modeapp.get('*', (req, res) => {
  res.sendFile(path.join(
    __dirname+'/client/public/index.html'));
})

//start 
serverapp.listen(port, (req, res) => {
  console.log( `server listening on port: ${port}`);
})

В приведенном выше фрагменте кода сначала нужно использовать встроенный модуль path в node и объявить статическую папку, которую вы хотите использовать на этом Express-сервере.

Затем вы проверяете, является ли процесс производственным, которым он станет после развертывания приложения на Heroku. При этом условии вы хотели бы обслуживать файл index.html из папки build, а не из общей папки.

Если это не производственный процесс, и вы тестируете какую-то функцию, а ваш сервер работает на localhost, вы хотите, чтобы файл index.html обслуживался из общей папки.

Теперь нам нужно убедиться, что сначала мы запустили наш Express-сервер, а затем приступим к запуску нашего React-сервера. Существует множество способов сделать это, но для простоты этого руководства мы будем использовать модуль concurrently для запуска обоих серверов одной командой.

Убедитесь, что вы находитесь в корневом каталоге, а затем выполните приведенную ниже команду из терминала.

npm i concurrently --save

После этого давайте внесем некоторые изменения в скрипты, которые находятся в файлах package.json нашего сервера Express.

"scripts": {
  "client-install": "npm install --prefix client",
  "start": "node index.js",
  "server": "nodemon index.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
}

• npm run client-install установит все зависимости для приложения React
• npm start запустит сервер и не будет перезагружать его после обнаружения каких-либо изменений
• npm run server запустит сервер, прослушает любые изменения в коде и выполнит горячую перезагрузку страницы в браузере для отражения изменений.
• npm run client запустит React-приложение без запуска сервера
• npm run dev будет одновременно запускать сервер, а затем запускать клиент в браузере

Настройка Heroku

Убедитесь, что у вас есть учетная запись на Heroku. Если у вас его нет, вы можете быстро создать его, используя учетные данные GitHub.

Далее мы установим Heroku CLI, который поможет нам развернуть приложение прямо из терминала. Нажмите здесь, чтобы получить инструкции по установке на macOS и Windows.

$ heroku login

Введите учетные данные для входа в Herkou, а затем:

$ heroku create

Это создаст для вас приложение. Если вы сейчас зайдете на приборную панель Heroku, там будет приложение.

Теперь нам нужно убедиться, что в нашем проекте есть папка build, прежде чем мы отправим проект в репозиторий Heroku. Добавьте приведенный ниже скрипт в файл package.json.

"scripts": {
  "client-install": "npm install --prefix client",
  "start": "node server.js",
  "server": "nodemon server.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},

После этого сохраните файл и перенесите весь репозиторий проекта в ветку приложения Heroku.

//add remote
$ heroku git:remote -a application-name
$ git add .
$ git commit -am 'prepare to deploy'
$ git push heroku master

И на этом все.

Как только все это будет сделано, вы получите URL-адрес для вашего проекта на живом хостинге. Поделитесь и покажите, что вы можете создать, используя эти технологии.

Оригинал: “https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/”