我是 create-react-app 的新手。
我刚刚使用 redux 和 react-router-dom 进行了全新设置,然后将其推送到 Scalingo,然后推送到 Heroku,它们最终都为开发版本提供服务。我的 redux-logger 已打开,React 开发工具发出警告:
This page is using the development build of React. 🚧
我没有做任何定制部署的事情,只是推送到生产环境。
我做错了什么?
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"
}
}
}
最佳答案
Heroku 中的服务器将运行文件 package.json 中给出的启动脚本。默认情况下,当使用 create-react-app 时,启动脚本将以开发模式运行应用程序。
为了从构建文件夹运行优化的应用程序,您需要编写一个服务器。您可以将以下代码用于简单的服务器。确保将其保存为名为 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);
您需要添加以下依赖项:
- express
- express-favicon
- 路径
最后,更改 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
关于reactjs - Heroku 提供 create-react-app 开发构建而不是生产,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54680727/