Нет простого способа сказать это, но я ненавижу развертывание на 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);
}
Так должно быть, мои сограждане.
Прошу прощения, если это было неудобно при чтении / опыте, так как это мой первый пост.
Этот алмаз - мой билет с этого… богом забытого континента.
~ Дэнни Арчер