![](/img/trans.png)
[英]why does my node app works for a few moments on and crashes( heroku)?
[英]Why is my react app, which has a node and mysql backend, working locally but not on Heroku?
初始請求的本地路由為“ http:// localhost:5000 / contacts ”。 部署到heroku之后,呈現了UI,但是沒有數據,並且我的狀態為404:找不到。 顯示的網址就是這個網址:“ https://powerful-gorge-20271.herokuapp.com/contacts ”。 我在heroku上使用Clear-DB add作為mySql數據庫。 我試圖將react app的package.json文件中的代理從“ http:// localhost:5000 ”修改為heroku url,但這不起作用。 此應用程序的存儲庫為: https : //github.com/aosante/React-Contact-Manager
我使用這篇文章https://daveceddia.com/deploy-react-express-app-heroku/作為指導,但仍然無法正常工作
這是app.js文件中的代碼
const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
const path = require('path');
const port = process.env.PORT || 4000;
const app = express();
//Static file declaration
app.use(express.static(path.join(__dirname, 'client/build')));
//production mode
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendfile(path.join((__dirname, 'client/build', 'index.html')));
});
}
app.use(cors());
const SELECT_ALL_CONTACTS = `SELECT * FROM contacts ORDER BY firstName ASC`;
//Connection creation to mysql database
const connection = mysql.createConnection({
host: 'host goes here',
user: 'user goes here',
port: 'goes here',
password: 'password goes here',
database: 'heroku_cdf7d751774d818',
insecureAuth: true
});
connection.connect(err => {
if (err) console.log(err);
});
//Server start
app.listen(port, () => {
console.log('Server started on port ' + port);
});
app.get('/api', (req, res) => {
connection.query(SELECT_ALL_CONTACTS, (err, results) => {
if (err) {
res.send(err);
} else {
return res.json({
data: results
});
}
});
});
app.get('/api/contacts', (req, res) => {
connection.query(SELECT_ALL_CONTACTS, (err, results) => {
if (err) {
res.send(err);
} else {
return res.json({
data: results
});
}
});
});
app.post('/api/contacts/add', (req, res) => {
const { firstName, lastName, email, phone } = req.query;
const INSERT_CONTACT = `INSERT INTO contacts (firstName, lastName, email, phone) VALUES ('${firstName}', '${lastName}', '${email}', '${phone}')`;
connection.query(INSERT_CONTACT, (err, results) => {
if (err) {
console.log(err);
} else {
return res.send(results);
}
});
});
app.delete('/api/contacts/delete/:id', (req, res) => {
const { id } = req.params;
const DELETE_CONTACT = `DELETE FROM contacts WHERE id = ${id}`;
connection.query(DELETE_CONTACT, (err, results) => {
if (err) {
console.log(err);
} else {
return res.send(results);
}
});
});
app.get('/api/contacts/edit/:id', (req, res) => {
const { id } = req.params;
const GET_CONTACT = `SELECT * FROM contacts WHERE id = ${id}`;
connection.query(GET_CONTACT, (err, results) => {
if (err) {
res.send(err);
} else {
return res.json({
data: results
});
}
});
});
app.put('/api/contacts/update/:id', (req, res) => {
const { id } = req.params;
const { firstName, lastName, email, phone } = req.query;
const UPDATE_CONTACT = `UPDATE contacts SET firstName = '${firstName}', lastName = '${lastName}', email = '${email}', phone = '${phone}' WHERE id = ${id}`;
connection.query(UPDATE_CONTACT, (err, results) => {
if (err) {
console.log(err);
} else {
res.send(results);
}
});
});
//production mode
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join((__dirname, 'client/build', 'index.html')));
});
}
//this goes in the end after all the requests
//build mode
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/public/index.html'));
});
這就是package.json文件中的內容:
{
"name": "react-contact-manager",
"version": "1.0.0",
"description": "Simple contact manager with mysql backend",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js",
"client-install": "npm install --prefix client",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "npm install --prefix client && npm run build - -prefix client"
},
"keywords": [
"react",
"mysql"
],
"author": "Andrés Osante",
"license": "ISC",
"dependencies": {
"concurrently": "^4.1.0",
"cors": "^2.8.5",
"express": "^4.16.4",
"mysql": "^2.16.0",
"nodemon": "^1.18.9"
}
}
我還添加了一個Procfile,上面寫有“ web:node app.js”,但這無濟於事
有幾件事。 路線的順序在Express中很重要-先到先得。
由於在生產中,您捕獲了所有路線app.get('*',
以便為您的前端服務,其他路線永遠不會被擊中。您需要在聲明其他路線后將其移到app.js
的末尾。
另外,您應該仔細定義您的路線,以免前端和后端之間發生碰撞。 我不確定您是否在使用React Router
,但是您在應用程序的根目錄( '/'
)上定義了一條獲取路由。 這將與您的前端沖突。 這似乎和/contacts
,所以繼續刪除根定義。
我個人不確定,也許其他人可以添加,但是在scripts
package.json
中,請考慮重新定義heroku-postbuild
。 我不確定更改目錄可能會對應用程序造成什么影響,也許什么也沒做。 但是,這是另一種處理方式:
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.