Приложение React остается пустым с Express для развертывания в Heroku

Question

Я не могу понять, как заставить мое приложение реагировать (созданное с помощью create-реагировать-приложение) работать при развертывании на heroku.

Без героку все работает нормально. Я использую npm start, который использует react-scripts start для запуска приложения реакции, и все работает локально, как и ожидалось. Теперь, когда я хочу, чтобы приложение работало на heroku, я должен использовать express, чтобы предоставить его контент клиенту. Я попробовал это, но, к сожалению, мой браузер остается пустым. Просто белый экран, больше ничего. Даже сообщения об ошибках ?! Ни в консоли, ни в консоли браузера.

Структура моего сервера выглядит следующим образом:

• public
  • favicon.ico
  • index. html
  • манифест. json
  • et c ...
• src
  • Приложение. css
  • Приложение. js
  • индекс. css
  • индекс. js
  • et c ...
• пакет-блокировка. json
• пакет. json
• Procfile
• сервер. js

Вот мой сервер. js file:

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

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'src')));

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

app.listen(port, () => {
   console.log('Server is running on port ' + port);
});

Есть ли ошибка в файле? Или я могу использовать неправильный метод для запуска сервера?

Я видел людей, использующих node server.js, некоторые запускают node server.js в одном терминале и npm start в другом терминале. А некоторые другие запускают только npm start, но меняют стартовый скрипт в пакете. json на node server.js. Я думаю, что я смущен в этом пункте. В чем разница между всеми этими командами?

А что я мог сделать, чтобы решить проблему? Может кто-нибудь мне помочь? Или вам нужны дополнительные сведения о коде, чтобы помочь мне?

Answer 1

Heroku будет запускать npm run build по умолчанию при развертывании. В вашем случае это react-scripts build. Этот сценарий объединит ваш код в папку build.

---

Express

Это означает, что ваше промежуточное ПО Express должно обслуживать stati c файлы из build папка вместо вашей src папки.

app.use(express.static(path.join(__dirname, 'src')));

должно быть:

app.use(express.static(path.join(__dirname, 'build')));

(Примечание: я предлагаю использовать переменную окружения для этого process.env.STATIC_DIR или что-то еще Таким образом, вы можете легко переключаться между src для локальной разработки и build для производственного кода и развертывания.)

---

Procfile

Ваш procfile сообщает, какая команда Heroku должен запускаться после развертывания вашего кода. Зная, что Heroku запускает npm run build, вы должны обслуживать свой пакет вместо исходного кода.

Вы можете сделать это, изменив свой профайл следующим образом:

web:npm start

Должно быть:

web:node server.js

Это запустит ваш сервер. js файл, который обслуживает ваш контент c из папки build.

(Примечание: npm run start только для локальных При развертывании веб-приложения вы должны только развертывать производственный код.)

(Примечание: вы можете протестировать свою производственную сборку локально, запустив npm run build для связывания кода и node server.js служить ему.)

Answer 2

Мой сервер. js

const express = require('express');
const http = require('http');
const path = require('path');
let app = express();
app.use(express.static(path.join(__dirname, 'build')));
const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on :${port}`));

Мой Procfile согласно heroku:

web: node server.js

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

Моя посылка. json

{
  "name": "my-app",
  "version": "3.0.1",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@amcharts/amcharts4": "^4.0.3",
    "@amcharts/amcharts4-geodata": "^4.0.27",
    "@babel/runtime": "7.0.0-beta.55",
    "@date-io/moment": "^1.1.0",
    "@material-ui/core": "^3.8.1",
    "@material-ui/icons": "^3.0.1",
    "array-move": "^1.0.0",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.18.0",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap": "^4.1.3",
    "bootstrap-v4-rtl": "^4.1.1-0",
    "can-use-dom": "^0.1.0",
    "chart.js": "^2.7.3",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.2.1",
    "cross-env": "^5.2.0",
    "downshift": "^3.1.5",
    "draft-js": "^0.10.5",
    "draftjs-to-html": "^0.8.4",
    "email-regex": "^3.0.0",
    "express": "^4.17.1",
    "history": "^4.7.2",
    "install": "^0.10.1",
    "isomorphic-fetch": "^2.2.1",
    "jss-rtl": "^0.2.3",
    "jwt-decode": "^2.2.0",
    "luhn": "^2.3.0",
    "material-ui-pickers": "^2.0.1",
    "moment": "^2.22.2",
    "node-sass": "^4.10.0",
    "node_env": "^0.0.3",
    "nprogress": "^0.2.0",
    "package.json": "^2.0.1",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "query-string": "^6.4.0",
    "react": "^16.6.3",
    "react-autosuggest": "^9.4.2",
    "react-big-calendar": "^0.20.2",
    "react-bootstrap-sweetalert": "^4.4.1",
    "react-chartjs-2": "^2.7.4",
    "react-circular-progressbar": "^1.0.0",
    "react-ckeditor-component": "^1.1.0",
    "react-color": "^2.17.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-d3-speedometer": "^0.4.2",
    "react-device-detect": "^1.6.1",
    "react-dnd": "^6.0.0",
    "react-dnd-html5-backend": "^6.0.0",
    "react-dom": "^16.6.3",
    "react-draft-wysiwyg": "^1.12.13",
    "react-dropzone": "^4.2.9",
    "react-google-maps": "^9.4.5",
    "react-hot-loader": "^4.3.12",
    "react-icons": "^3.2.2",
    "react-intl": "^2.7.2",
    "react-joyride": "^1.11.4",
    "react-jss": "^8.6.1",
    "react-jvectormap": "^0.0.4",
    "react-loadable": "^5.5.0",
    "react-notifications": "^1.4.3",
    "react-number-format": "^4.0.4",
    "react-paypal-express-checkout": "^1.0.5",
    "react-placeholder": "^3.0.1",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.1.1",
    "react-simple-maps": "^0.12.1",
    "react-slick": "^0.23.1",
    "react-sortable-hoc": "^0.8.3",
    "react-star-rating-component": "^1.4.1",
    "react-swipeable-views": "^0.13.0",
    "react-text-mask": "^5.4.3",
    "reactstrap": "^6.5.0",
    "recharts": "^1.3.6",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.2",
    "save": "^2.3.2",
    "slick-carousel": "^1.8.1",
    "typeface-roboto": "^0.0.54",
    "underscore": "^1.9.1",
    "url-search-params": "^1.1.0"
  },
  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "bootstrap": "^4.1.3",
    "node-sass": "^4.9.3",
    "prettier": "^1.14.2",
    "react-scripts": "2.1.1"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],
    "production": [
      ">0.25%",
      "not op_mini all",
      "ie 11"
    ]
  },
  "engines": {
    "node": ">=6.9.0",
    "npm": ">= 3"
  }
}