Нет простого способа сказать это, но я ненавижу развертывание на Heroku, я видел много способов развернуть приложение реакции и выражения на Heroku, к сожалению, ни один из них, похоже, не работал.

Что ж, я нашел способ сделать это 🎉, хорошо, что я здесь, чтобы шаг за шагом гильдировать вас.

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

Приложение было создано с использованием React, который отображает пользовательский интерфейс и ExpressJS в качестве сервера, сервер представляет собой спокойный API, который запускает реляционную базу данных с помощью sequelize, который представляет собой ORM Node.js на основе обещаний.

хорошо сказано, давайте приступим к делу.

Шаг 1. Структура папки

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

school-admin
|
---api <--- your restful api
|
---client <--- your react app
|
--- README

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

После завершения инициализации добавим в сценарий два свойства.

start и heroku-postbuild

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "cd api && npm install && npm start",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

Также добавьте свойство механизма с нашей версией узла, чтобы получить версию узла, вы можете просто открыть командную строку и запустить node -v

"engines": {
  "node": "10.17.0"
}

Шаг 2. Клиентская папка

Перейдем к package.json файлу, находящемуся в папке клиента, мы собираемся настроить прокси для нашего сервера. Добавьте свойство "proxy" в файл package.json.

Значением будет localhost, на котором работает ваш сервер API, мой - на 5000.

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

Теперь в вашем приложении реакции, откуда бы вы ни делали HTTP-запросы, вы должны изменить URL-адрес с http://localhost:5000/api/users на /api/users.

Это должно быть в этой папке, но поскольку мы находимся в папке клиента, вы можете просто создать свое приложение для реагирования, запустив npm run build в командной строке (для целей тестирования позже).

Шаг 3 - Папка API

Для package.json, находящегося в этой папке, просто убедитесь, что стартовый скрипт имеет значение node app.js.

"scripts": {
  "start": "node app.js"
}

Теперь мы КОДИРУЕМ !!

В файле вашего сервера, будь то app.js, index.js или server.js, давайте запросим API пути и обработаем статические файлы из папки сборки клиента.

const path = require('path');
app.use(express.static(path.join(__dirname, '../client/build')));

Также добавьте комплексный маршрут для обслуживания файла index.html из папки сборки клиента.

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

Если маршруты не совпадают, он вернет index.html.

ПРИМЕЧАНИЕ !!!!

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

app.get('*', (req, res) => {...});
app.get('/api/users', (req, res) => {...});

Если вы попытаетесь получить данные из /api/users, это не сработает, потому что маршрут для приема всей почты домена находится выше маршрута API, посещение /api/users будет соответствовать маршруту для приема всей почты домена

Лучше всего разместить его над промежуточным программным обеспечением обработчика ошибок.

app.get('/api/users', (req, res) => {...});
app.get('/api/courses', (req, res) => {...});
app.get('/api/courses/:id', (req, res) => {...});
//api routes above

app.get('*', (req, res) => {...});
//error handler's below
app.use((req, res) => {
  res.status(404).json({
    message: 'Route Not Found'
  });
});
app.use((err, req, res) => {
  res.status(err.status || 500).json({
    message: err.message,
    error: {}
  });
});

Шаг 4. Протестируйте, затем разверните

Проверьте это и посмотрите, отвечает ли сервер на файл index.html, когда мы посещаем localhost:5000, открываем командную строку и запускаем npm start.

if (app_runs) {
console.log ('ура, давай, разверни приложение');

}еще{

console.log ('выполните шаги еще раз' || Напишите мне в твиттер, и мы разберемся @adel_xoxo);
}

Так должно быть, мои сограждане.

Прошу прощения, если это было неудобно при чтении / опыте, так как это мой первый пост.

Этот алмаз - мой билет с этого… богом забытого континента.

~ Дэнни Арчер