React 應用程序保持空白，Express 部署到 Heroku

Question

在部署到 heroku 時，我不知道如何讓我的 React 應用程序（使用 create-react-app 創建）工作。

沒有 heroku 一切正常。 我使用npm start ，它使用react-scripts start來啟動 React 應用程序，一切都按預期在本地運行。 現在我希望應用程序在 heroku 上運行，我必須使用 express 將其內容提供給客戶端。 我試過了，但遺憾的是我的瀏覽器保持空白。 只是一個白屏，沒有別的。 甚至沒有錯誤信息？ 既不在控制台中，也不在瀏覽器的控制台中。

我的服務器結構如下所示：

• 民眾
  • 網站圖標.ico
  • index.html
  • 清單.json
  • ETC...
• 來源
  • 申請.css
  • 應用程序.js
  • index.css
  • 索引.js
  • ETC...
• 包鎖.json
• package.json
• 簡介
• 服務器.js

這是我的 server.js 文件：

 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但將 package.json 中的啟動腳本更改為node server.js 。 我想我現在很困惑。 所有這些命令之間有什么區別？

我能做些什么來解決這個問題？ 誰能幫我？ 或者您需要任何額外的代碼見解來幫助我嗎？

Answer 1

我的服務器.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}`));

根據 heroku，我的 Procfile：

web: node server.js

請注意，您應該有build文件夾，heroku 將在其中生成作品。此外，package.json。

我的 package.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"
  }
}

Answer 2

Heroku 會在部署時默認運行npm run build 。 在您的情況下，這是react-scripts build 。 該腳本會將您的代碼捆綁到build文件夾中。

---

表達

這意味着您的 Express 中間件應該從您的build文件夾而不是您的src文件夾中提供 static 個文件。

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

應該：

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

（注意：我建議為此process.env.STATIC_DIR使用環境變量或類似的東西。這樣你就可以輕松地在用於本地開發的src和用於生產代碼和部署的build之間切換。）

---

簡介

您的 procfile 說明在部署代碼后應運行哪個命令 Heroku。 知道 Heroku 運行npm run build你應該提供你的包而不是你的源代碼。

您可以像這樣更改您的 procfile 來做到這一點：

web:npm start

應該：

web:node server.js

這將運行您的 server.js 文件，該文件為build文件夾中的 static 內容提供服務。

（注意： npm run start僅用於本地開發。在部署 web 應用程序時，您應該只部署生產代碼。）

（注意：您可以通過運行npm run build來捆綁您的代碼和node server.js來在本地測試您的生產構建。）

Answer 3

是的， create-react-app不能很好地與 Node 配合使用。 這就是我為修復部署所做的工作。

tl;dr ：由於您使用create-react-app了 React 應用程序，因此您需要使用不同的構建包，例如： github.com/mars/create-react-app-buildpack.git

從 Heroku 的文檔中獲取的示例工作流：

# You probably did this already
# Create the App
npm install -g create-react-app
create-react-app my-app
cd my-app
git init

# Then you worked on your app

# Now, create the app in heroku with this buildpack...
heroku create -b https://github.com/mars/create-react-app-buildpack.git
# ...or add the buildpack in Heroku's dashboard

# Add the files the buildpack bundled for you and deploy
git add .
git commit -m "react-create-app on Heroku"
git push heroku master

# To see your app
heroku open

Procfile（在根目錄中）應包含以下內容：

web: bin/boot

一旦它在 heroku 的 repo 中，您就可以使用 CLI 啟動 web dyno

heroku ps:scale web=1:free

您可以此時刪除您的 server.js 文件：更多信息在這里： https://github.com/mars/create-react-app-buildpack#usage

希望這可以幫助。 干杯!