Как развернуть приложение узла js с реагированием на героку

Question

Я пытаюсь развернуть мое приложение MERN на heroku.

После успешной сборки на heroku не видит маршруты API:

Шаги : на локальном хостеЯ запускаю одновременно сервер узла и клиент (create-реагировать-приложение).Сервер на порту 5000 и клиент на порту 3000. После этого я получаю данные из массива API-маршрутов / отелей с элементами и подключаю его к хранилищу Redux и отображаю его.

Правильное поведение:

Localhost : работает отлично

Heroku : не работает (не подключался через API)

Это мой сервер.js-файл:

const express = require('express');
const path = require('path');
const app = express();
const http = require('http');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieSession = require('cookie-session');
const passport = require('passport');
const morgan = require('morgan');
const keys = require('./API/config/keys');

//######### MODELS #########
require('./API/models/Users');

//######### SERVICES #########
require('./API/services/passport');

//######### MONGODB CONNECT #########
mongoose.connect(MONGO_CONNECT);

//######### ROUTES #########
const hotelsRoutes = require('./API/routes/hotels');
const countRoutes = require('./API/routes/count');
const topRoutes = require('./API/routes/top');

// Use routes
app.use('/hotels', hotelsRoutes);
app.use('/count', countRoutes);
app.use('/top', topRoutes);

app.use(morgan('dev'));
app.use('/uploads', express.static('uploads'));
app.use(bodyParser.urlencoded({extended: false}));

app.use(bodyParser.json());
app.use(
  cookieSession({
      maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
      keys: [keys.cookieKey]
  })
);

app.use(passport.initialize());
app.use(passport.session());

require('./API/routes/authRoutes')(app);

app.use(express.static('client/build'));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

const port = process.env.PORT || 5000;
const server = http.createServer(app);

server.listen(port);

Package.json (сервер):

{
  "name": "root-react-hotel-app",
  "version": "0.1.0",
  "main": "server.js",
  "scripts": {
    "client": "cd client && yarn start",
    "start": "node server.js",
    "start-api": "nodemon server.js",
    "dev": "concurrently \"yarn start-api\" \"yarn client\"",
    "build": "cd client && npm install && yarn build"
  },
  "devDependencies": {
    //
  },
  "dependencies": {
    //
  }
}

Package.json (клиент):

{
  "name": "client-react-hotel-app",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/google": {
      "target": "http://localhost:5000"
    },
    "/api/*": {
      "target": "http://localhost:5000"
    },
    "/*": {
      "target": "http://localhost:5000"
    }
  },
  "dependencies": {
    // Here are dependencies
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "eject": "react-scripts eject",
    "compile:sass": "node-sass src/css/styles.scss src/css/styles.css -w",
    "generate:doc": "sassdoc src/css/abstracts/_mixins.scss",
    "test": "cross-env NODE_ENV=test jest --config=jest.config.json",
    "test-coverage": "cross-env NODE_ENV=test jest --coverage --config=jest.config.json",
    "test-ci": "cross-env NODE_ENV=test jest --config=jest.config.json --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
  },
  "devDependencies": {
     // Here are devDependencies
  }
}

Также пытается использовать файл static.json и Procfile:

{
  "root": "client/build/",
  "setupFiles": [
    "<rootDir>/client/src/setupTests.js"
  ]
}

Кто-нибудь может помочь?

Answer 1

Поскольку ваш экспресс-сервер обслуживает как ваш пакет реакции, так и ваши маршруты API, в:

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

Вам необходимо защитить свои маршруты API в файле app.get при развертывании на heroku (рабочий режим).).Вы можете использовать простое регулярное выражение, чтобы обслуживать все маршруты к вашему пакету реагирования, кроме '/ api' (или как выглядит ваша конечная точка api, / API в вашем случае выше).Он работает локально, потому что вы запускаете ваше API и реагируете на приложения на разных портах, а не на одном и том же сервере.

Обычно что-то вроде:

if (process.env.NODE_ENV === 'production') {
      app.get(/^\/(?!api).*/, (req, res) => { // don't serve react app to api routes
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
      });
};