Strange Create-React-App Heroku错误 - 无法获取/
[英]Strange Create-React-App Heroku Error - Cannot GET /
问题描述
So I have been struggling with this issue for some days now, trying almost every forum suggestion that I have come across. 
所以我几天来一直在努力解决这个问题，尝试几乎所有我遇到过的论坛建议。 Basically I have set up a backend server in order to allow myself to send emails through node. 基本上我已经设置了一个后端服务器，以便允许自己通过节点发送电子邮件。 The strange thing is, it works perfectly on my local machine, and it even builds and deploys perfectly when I push to Heroku. 奇怪的是，它在我的本地机器上完美运行，当我推送到Heroku时它甚至可以完美地构建和部署。 But still, I am just prompted with 'Cannot GET /'. 但是，我只是提示“无法获取/”。
This is my file structure: 这是我的文件结构：
PROJETNAME
- client
^--
^-- build
^-- node_modules
^-- public
^-- src
- node_modules
- .gitignore
- package.lock.json
- package.json
- server.js
This is my package.json in the root (backend) folder: 这是root（backend）文件夹中的package.json：
{
"name": "sendemail",
"version": "1.0.0",
"description": "",
"main": "server.js",
"devDependencies": {},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"engines": {
"node": "8.9.x"
},
"keywords": [
"node",
"heroku",
"create-react-app",
"react"
],
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client":"npm run start --prefix client",
"dev":"concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "ANDY",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"concurrently": "^3.5.1",
"express": "^4.16.3",
"nodemailer": "^4.6.5",
"nodemon": "^1.17.5"
}
}
And this is my server.js 这是我的server.js
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.post('/api/form', (req, res) => {
nodemailer.createTestAccount((err, account) => {
const htmlEmail = `
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
let transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'config',
pass: 'config'
}
});
let mailOptions = {
from: 'config',
to: 'config',
replyTo: 'config',
subject: 'New message',
text: req.body.message,
html: htmlEmail
};
transporter.sendMail(mailOptions, (err, info) => {
if(err){
return console.log(err);
}
console.log('Message sent: %s', info.message);
console.log('Message URL: %s', nodemailer.getTestMessageUrl(info));
});
});
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log('Server listening on port ' + PORT);
});
Here is my package.json in the client folder: 这是我在客户端文件夹中的package.json：
{
"name": "website",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"devDependencies": {
"react-scripts": "^1.1.0"
},
"dependencies": {
"axios": "^0.18.0",
"email-validator": "^1.1.1",
"firebase": "^4.10.1",
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-helmet": "^5.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-s-alert": "^1.4.1",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I will also include some Heroku logs, so this is from the console upon visit with all of the configurations above in place: 我还将包含一些Heroku日志，所以这是在访问控制台时使用上面的所有配置：
2018-05-31T17:05:30.745029+00:00 heroku[web.1]: Starting process with command `npm start`
2018-05-31T17:05:33.349990+00:00 app[web.1]: Server listening on port 52364
2018-05-31T17:05:33.029353+00:00 app[web.1]:
2018-05-31T17:05:33.029370+00:00 app[web.1]: > sendemail@1.0.0 start /app
2018-05-31T17:05:33.029372+00:00 app[web.1]: > node server.js
2018-05-31T17:05:33.029374+00:00 app[web.1]:
2018-05-31T17:05:34.589991+00:00 heroku[web.1]: State changed from starting to up
2018-05-31T17:05:36.032333+00:00 heroku[router]: at=info method=GET path="/" host=tranquil-ravine-15017.herokuapp.com request_id=7c7aa9a7-e1d9-429f-9122-ea84040e7627 fwd="46.9.122.184" dyno=web.1 connect=0ms service=16ms status=404 bytes=383 protocol=https
2018-05-31T17:11:15.097815+00:00 heroku[router]: at=info method=GET path="/" host=tranquil-ravine-15017.herokuapp.com request_id=0df69ac3-e087-4b7a-a13a-84b14937c03b fwd="46.9.122.184" dyno=web.1 connect=2ms service=5ms status=404 bytes=383 protocol=https
So as you can see here, no significant errors with the starting of the server. 因此，您可以在此处看到，启动服务器时没有出现重大错误。 Lastly, I'll include the last build (upload to Heroku) as well: 最后，我还将包括最后一个版本（上传到Heroku）：
Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 369 bytes | 369.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 8.9.x
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 8.9.x...
remote: Downloading and installing node 8.9.4...
remote: Using default npm version: 5.6.0
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (package.json):
remote: - node_modules
remote: - client/node_modules (exists - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json + package-lock)
remote: up to date in 3.189s
remote: Running heroku-postbuild
remote:
remote: > website@1.0.0 heroku-postbuild /tmp/build_83074ef79a0ec69232c64e8b290c1953
remote: > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote:
remote: > grpc@1.10.1 install /tmp/build_83074ef79a0ec69232c64e8b290c1953/client/node_modules/grpc
remote: > node-pre-gyp install --fallback-to-build --library=static_library
remote:
remote: [grpc] Success: "/tmp/build_83074ef79a0ec69232c64e8b290c1953/client/node_modules/grpc/src/node/extension_binary/node-v57-linux-x64-glibc/grpc_node.node" is installed via remote
remote:
remote: > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_83074ef79a0ec69232c64e8b290c1953/client/node_modules/uglifyjs-webpack-plugin
remote: > node lib/post_install.js
remote:
remote: added 305 packages, removed 220 packages and updated 1092 packages in 56.689s
remote:
remote: > website@0.1.0 build /tmp/build_83074ef79a0ec69232c64e8b290c1953/client
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled with warnings.
remote:
remote: ./src/components/Admin-Panel-Edit-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Table' is defined but never used no-unused-vars
remote: Line 3: 'Checkbox' is defined but never used no-unused-vars
remote: Line 3: 'Modal' is defined but never used no-unused-vars
remote: Line 3: 'Popup' is defined but never used no-unused-vars
remote: Line 4: 'BrowserRouter' is defined but never used no-unused-vars
remote: Line 4: 'Route' is defined but never used no-unused-vars
remote: Line 4: 'Switch' is defined but never used no-unused-vars
remote: Line 4: 'Link' is defined but never used no-unused-vars
remote: Line 4: 'NavLink' is defined but never used no-unused-vars
remote: Line 6: 'database' is defined but never used no-unused-vars
remote: Line 24: Do not mutate state directly. Use setState() react/no-direct-mutation-state
remote: Line 82: Unexpected string concatenation of literals no-useless-concat
remote: Line 157: Unexpected string concatenation of literals no-useless-concat
remote: Line 328: 'open' is assigned a value but never used no-unused-vars
remote: Line 328: 'size' is assigned a value but never used no-unused-vars
remote: Line 344: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 344: Expected '!==' and instead saw '!=' eqeqeq
remote:
remote: ./src/components/Admin-Panel-Add-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Table' is defined but never used no-unused-vars
remote: Line 3: 'Checkbox' is defined but never used no-unused-vars
remote: Line 5: 'BrowserRouter' is defined but never used no-unused-vars
remote: Line 5: 'Route' is defined but never used no-unused-vars
remote: Line 5: 'Switch' is defined but never used no-unused-vars
remote: Line 5: 'Link' is defined but never used no-unused-vars
remote: Line 5: 'NavLink' is defined but never used no-unused-vars
remote: Line 96: Unexpected string concatenation of literals no-useless-concat
remote: Line 171: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 171: Expected '!==' and instead saw '!=' eqeqeq
remote:
remote: ./src/components/Admin-Header.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 4: 'BrowserRouter' is defined but never used no-unused-vars
remote: Line 4: 'Switch' is defined but never used no-unused-vars
remote: Line 4: 'Route' is defined but never used no-unused-vars
remote: Line 5: 'performLogout' is defined but never used no-unused-vars
remote: Line 52: 'allNewMessages' is assigned a value but never used no-unused-vars
remote: Line 60: Expected '===' and instead saw '==' eqeqeq
remote: Line 78: 'showMobileMenu' is assigned a value but never used no-unused-vars
remote: Line 89: 'mobileMenuVisible' is assigned a value but never used no-unused-vars
remote: Line 94: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 96: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 101: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 102: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 102: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 108: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 109: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 112: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 117: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 118: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote: Line 118: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote:
remote: ./src/components/Admin-Panel-Messages.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Image' is defined but never used no-unused-vars
remote: Line 3: 'Dimmer' is defined but never used no-unused-vars
remote: Line 3: 'Segment' is defined but never used no-unused-vars
remote: Line 3: 'Loader' is defined but never used no-unused-vars
remote: Line 94: Expected '===' and instead saw '==' eqeqeq
remote: Line 176: 'canShowMessages' is assigned a value but never used no-unused-vars
remote:
remote: ./src/components/Admin-Panel-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Loader' is defined but never used no-unused-vars
remote: Line 3: 'Segment' is defined but never used no-unused-vars
remote: Line 3: 'Dimmer' is defined but never used no-unused-vars
remote: Line 3: 'Modal' is defined but never used no-unused-vars
remote: Line 129: Expected '===' and instead saw '==' eqeqeq
remote: Line 161: 'open' is assigned a value but never used no-unused-vars
remote: Line 161: 'size' is assigned a value but never used no-unused-vars
remote:
remote: ./src/Admin-Reset-Password.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Message' is defined but never used no-unused-vars
remote: Line 5: 'Redirect' is defined but never used no-unused-vars
remote: Line 53: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
remote:
remote: ./src/components/Admin-Panel-Welcome.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 23: 'form' is assigned a value but never used no-unused-vars
remote:
remote: ./src/components/Authentication.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'withRouter' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-Edit-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-Read-Message.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-Messages.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-Add-News.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/Admin-Welcome.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote:
remote: ./src/components/Admin-Panel-Read-Message.js
remote: Line 2: 'ReactDOM' is defined but never used no-unused-vars
remote: Line 3: 'Table' is defined but never used no-unused-vars
remote: Line 3: 'Checkbox' is defined but never used no-unused-vars
remote:
remote: Search for the keywords to learn more about each warning.
remote: To ignore, add // eslint-disable-next-line to the line before.
remote:
remote: File sizes after gzip:
remote:
remote: 265.06 KB (-103 B) build/static/js/main.34ea30f2.js
remote: 9.36 KB build/static/css/main.17f72539.css
remote:
remote: The project was built assuming it is hosted at the server root.
remote: You can control this with the homepage field in your package.json.
remote: For example, add this to build it for GitHub Pages:
remote:
remote: "homepage" : "http://myname.github.io/myapp",
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: yarn global add serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote: http://bitlylinkhere
remote:
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (package.json):
remote: - node_modules
remote: - client/node_modules
remote:
remote: -----> Pruning devDependencies
remote: Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
remote: https://github.com/npm/npm/issues/19356
remote:
remote: You can silence this warning by updating to at least npm 5.7.1 in your package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 78.9M
remote: -----> Launching...
remote: Released v23
remote: https://myherokuapphere.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
As you can see, neither any alarming errors in the build, which ends up - also being uploaded successfully. 正如您所看到的，构建中的任何警报错误都没有 - 最终也成功上传。 I have literally gone crazy because of this. 因为这个，我真的疯了。 What seems to be the problem here? 这里似乎有什么问题？ I have promised a friend to intergrate email function in his website, which is supposed to be delivered next week, and I am super stressed out because of this. 我已经答应了一位朋友在他的网站上集成了电子邮件功能，该网站应该会在下周发布，因此我感到非常紧张。 Any help at all would be greatly appreciated! 任何帮助都将非常感谢！ Thanks in advance. 提前致谢。
1 个解决方案
解决方案1
8 已采纳 2018-06-01 21:47:43
Ahhh! 唉唉！ I think I see the problem lol. 我想我看到了问题大声笑。 You're not serving the index.html file from your express server. 您没有从快速服务器提供index.html文件。 paste this code into your server.js file. 将此代码粘贴到server.js文件中。
if (process.env.NODE_ENV === 'production') {
// Exprees will serve up production assets
app.use(express.static('client/build'));
// Express serve up index.html file if it doesn't recognize route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在Heroku上获取请求会返回create-react-app默认页面？ - Get request on Heroku returns create-react-app default page?
在 Heroku 上部署 create-react-app 的应用程序错误 - Application Error Deploying create-react-app on Heroku
create-react-app 的 Heroku 部署问题 - Heroku deployment issues with create-react-app
使用带有googleapis的Create-react-app时出错 - Error using Create-react-app with googleapis
错误：create-react-app 正在中止安装 - Error : create-react-app Aborting installation
Create-React-App 代理错误 - Create-React-App Proxy error
Ubuntu 中的 npx create-react-app 错误 - Error with npx create-react-app in Ubuntu
在Heroku上使用Rails API部署Create-React-App - Deploying Create-React-App with Rails API on Heroku
Create-React-App + Heroku + Api 路由 = 404 错误 - Create-React-App + Heroku + Api Routes = 404 Errors
使用 npm 安装 create-react-app 时出错 - Error installing create-react-app with npm
相关标签