Heroku обслуживает создание-реагирование-разработки приложений вместо производства

Question

Я новичок в создании-реакции-приложения.

Я только что сделал новую настройку с помощью redux и response-router-dom, затем отправил ее в Scalingo, а затем в Heroku, и оба они в конечном итоге стали обслуживать сборку разработки.Мой Redx-Logger включен, и инструменты React dev предупреждают, что:

Эта страница использует разрабатываемую сборку React.100

Я ничего не делал для настройки развертывания, просто отправил в производство.

Что я делаю не так?

Журналы развертывания Scalingo:

<-- Start deployment of ***** -->
       Fetching source code
       Fetching deployment cache
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.15.0...
       Using default npm version: 6.4.1
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.14.0)...
       Installed yarn 1.14.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.14.0
       [1/4] Resolving packages...
       success Already up-to-date.
       Done in 0.60s.
       Running build (yarn)
       yarn run v1.14.0
       $ react-scripts build
       Creating an optimized production build...
       Compiled successfully.

       File sizes after gzip:

       161.32 KB  build/static/js/2.21f749f2.chunk.js
       1.15 KB    build/static/js/main.e65e7a00.chunk.js
       761 B      build/static/js/runtime~main.fdfcfda2.js

       The project was built assuming it is hosted at the server root.
       You can control this with the homepage field in your package.json.
       For example, add this to build it for GitHub Pages:

       "homepage" : "http://myname.github.io/myapp",

       The build folder is ready to be deployed.
       You may serve it with a static server:

       yarn global add serve
       serve -s build

       Find out more about deployment here:

       https://facebook.github.io/create-react-app/docs/deployment

       Done in 7.79s.
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
 Build complete, shipping your container...
 Waiting for your application to boot... 
 <-- https://*****.scalingo.io -->

package.json:

{
  "name": *****,
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@sentry/browser": "^4.5.4",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3",
    "prettier": "^1.16.4",
    "prop-types": "^15.7.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^6.0.0",
    "react-redux-i18n": "^1.9.3",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --single-quote --trailing-comma all --write",
      "git add"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Answer 1

Мое рабочее решение - это просто изменить package.json на:

 "scripts": {
       "heroku-prebuild": "npm install -g serve",
       "devstart": "react-scripts start",
       "start": "serve -s build",
       "build": "react-scripts build",
       "eject": "react-scripts eject",
 },

С помощью «heroku-prebuild» вы можете установить подачу без загрузки дополнительного кода.

Answer 2

Сервер в Heroku запустит сценарий запуска, указанный в файле package.json.По умолчанию при использовании create-реагировать на приложение стартовый скрипт запускает приложение в режиме разработки.

Чтобы запустить оптимизированное приложение из папки сборки, вам нужно написать сервер.Вы можете использовать следующий код для простого сервера.Обязательно сохраните файл с именем server.js и поместите его в корень хранилища.

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
  return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

Вам потребуется добавить следующие зависимости:

1. express
2. express-favicon
3. path

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

"scripts": {
  "build": "react-scripts build",
  "devstart": "react-scripts start",
  "start": "node server.js"
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Нажмите изменения в Heroku, и ваше приложение должно работать правильно.

Вы можете прочитать больше оэто в этой статье.
https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08