Почему мое приложение реагирования, которое имеет узел и серверную часть mysql, работает локально, но не на Heroku?

Question

Домашний маршрут для первоначального запроса: "http://localhost:5000/contacts".. После развертывания на heroku пользовательский интерфейс отображается, но данные отсутствуют, и я получаю статус 404: не найден. Показанный URL-адрес:один: "https://powerful -gorge-20271.herokuapp.com / contacts ". Я использую надстройку Clear-DB на heroku в качестве базы данных mySql. Я попытался изменить прокси-сервер в приложении реакциифайл package.json из "http://localhost:5000" на URL-адрес heroku, но это не работает.Репозиторий для этого приложения: https://github.com/aosante/React-Contact-Manager

Я использовал эту статью https://daveceddia.com/deploy-react-express-app-heroku/ для руководства, но он все еще не работает

Это код в app.jsfile

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», но это не так.не помогло

Answer 1

Пара вещей. Порядок маршрутов важен в Экспресс - он первым пришел, первым обслужен.

Поскольку в процессе работы вы захватываете все свои маршруты app.get('*', для обслуживания своего внешнего интерфейса, другие маршруты никогда не могут быть найдены. Вам нужно переместить это к концу app.js после объявления других ваших маршрутов.

Кроме того, вы должны тщательно определить ваши маршруты, чтобы не было столкновения между передней и задней частью. Я не уверен, используете ли вы React Router или нет, но вы определяете маршрут получения в корне вашего приложения ('/'). Это будет конфликтовать с вашим интерфейсом. Похоже, что это делает то же самое, что и /contacts, поэтому удалите определение корня.

Я не уверен, лично, возможно, кто-то еще может добавить, но в package.json в вашем scripts рассмотрите возможность переопределения heroku-postbuild. Я не уверен, что изменение каталога может повлиять на приложение, может быть, ничего. Но вот еще один способ справиться с этим:

"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"