Развертывание производственного приложения React в Heroku
1.Создайте приложение React
npm create-react-app heroku-deploy-test
cd heroku-deploy-test
2.Создайте сервер Express JS для обслуживания вашей производственной сборки
//server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const port = process.env.PORT || 8080;
app.listen(port);
В вашем файле package.json
измените сценарий запуска следующим образом: start:
"node server.js"
3.Развертывание в Heroku
Если у вас еще нет учетной записи Heroku, создайте ее здесь: https://signup.heroku.com/ В командной строке выполните следующую команду: heroku login
Вам нужно будет ввести свои учетные данные герою в терминал.После того, как вы успешно ввели свои учетные данные heroku, запустите следующую команду в своем терминале, чтобы создать новое развернутое приложение:
heroku create heroku-deploy-test
(замените heroku-deploy-test
на вашесобственное имя приложения.)
Затем отправьте сборку своего приложения на heroku со следующим git в своем терминале:
git init
git add .
git commit -m "initial commit"
heroku git:remote -a heroku-deploy-test
git push heroku master
Эти команды устанавливаютваши зависимости, инициализируйте git и подключите репозиторий к удаленному репозиторию, размещенному на Heroku.
Примечание: если вы уже инициализировали свой git перед запуском heroku create [app-name]
, тогда вы нене нужно запускать heroku git:remote -a [app-name].
запустить heroku open
, и ваше приложение для разработки откроется в браузере по умолчанию.Если вы хотите построить производство, я думаю, вы уже знаете, что делать.-> Создайте производственную сборку приложения React
.Создайте правильный файл .gitignore
, чтобы были развернуты только соответствующие файлы.
ВАЖНО: Если у вас уже был файл .gitignore
, убедитесь, что эта строка отсутствует в нем /build
:)
Могу ли я также предложить прочитать этот блог !Хорошего вам!