我不知道如何让我的react应用（用create-react-app创建）在部署到heroku时工作。
没有heroku，一切都很好。我使用 npm start 其中使用 react-scripts start 现在，我想让应用程序在heroku上运行，我必须使用express将它的内容提供给客户端。我试过了，但遗憾的是我的浏览器一直是空白。只是一个白色的屏幕，没有其他。甚至没有错误信息？无论是在控制台还是在浏览器的控制台中都没有。
我的服务器的结构是这样的。
这是我的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. 我想我现在很困惑。这些命令之间有什么区别？
我又该怎么做才能解决这个问题呢？谁能帮帮我？或者你需要任何额外的代码见解来帮助我？
我的服务器.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 文件夹，在那里生产将被heroku接收。
我的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"
}
}
Heroku将运行 npm run build 部署时，默认情况下是这样的。在您的情况下，这是 react-scripts build. 这个脚本将把你的代码捆绑到一个 build 文件夹。
这意味着您的Express中间件应该从您的 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说明了Heroku在部署你的代码后应该运行哪个命令。知道Heroku会运行 npm run build 你应该提供你的 bundle 而不是你的源代码。
你可以通过修改你的procfile来做到这一点。
web:npm start
Should be:
web:node server.js
这将会运行你的server.js文件，它将为你的静态内容提供服务。build 文件夹。
(注意，。npm run start 只是为了本地开发。当部署你的Web应用时，你应该只部署生产代码。)
(注意：你可以在本地测试你的生产构建，通过执行 npm run build 捆绑您的代码和 node server.js 来为其服务）。)