Heroku 沒有為 react package.json 獲取 PORT

Question

在我的本地服務器中，我可以在我的 Express 應用程序上對 PORT 8001 的前端使用 react。

它顯示在 localhost:8001 上，並且 express 應用程序運行良好。

我需要一種讓heroku做同樣事情的方法。 目前，我得到

不能獲取 /

Express 使用的是服務器 8000，而 react 使用的是 8001。（由於 api 沖突，我無法在兩個端口上放置相同的內容）

所以它必須在不同的端口上。

就像它可能是

https://murmuring-brushlands-80878:8001.herokuapp.com什么的？

包.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.1",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "history": "^4.7.2",
    "http-proxy-middleware": "^0.19.1",
    "jsonwebtoken": "^8.4.0",
    "jwt-decode": "^2.2.0",
    "material-ui-icons": "^1.0.0-beta.36",
    "moment": "^2.24.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "superagent": "^4.1.0"
  },
  "scripts": {
    // PORT 8001
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "react-scripts build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "dotenv": "^6.2.0"
  }
}

快遞包.json

{
  "name": "sequelize-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "cd ./client && npm start ",
    "server": "nodemon app.js",
    "start": "concurrently --kill-others  \"npm run client\" \"npm run server\" ",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "async": "^2.6.1",
    "bcrypt": "^3.0.2",
    "body-parser": "^1.18.3",
    "concurrently": "^4.1.0",
    "cookie-parser": "^1.4.3",
    "cookie-session": "^2.0.0-beta.3",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "dotenv": "^7.0.0",
    "express": "^4.16.4",
    "express-flash": "0.0.2",
    "express-session": "^1.15.6",
    "foreman": "^3.0.1",
    "jsonwebtoken": "^8.4.0",
    "morgan": "^1.9.1",
    "nodemailer": "^5.1.1",
    "nodemon": "^1.18.9",
    "passport": "^0.4.0",
    "passport-github": "^1.1.0",
    "passport-github2": "^0.1.11",
    "passport-jwt": "^4.0.0",
    "passport-local": "^1.0.0",
    "pg": "^7.8.0",
    "pg-hstore": "^2.3.2",
    "sequelize": "^4.42.0"
  },
  "devDependencies": {
    "chai": "^4.2.0",
    "mocha": "^6.1.2"
  }
}

應用程序.js

var express = require('express');
var app = express();
var userRoute = require('./routes/users');
var postRoute  = require('./routes/posts');
var bodyParser = require('body-parser');
var logger = require('morgan');
var session = require('express-session');
var cookieParser = require('cookie-parser') ;
var dotenv = require('dotenv');
var env = dotenv.config();
var cors = require('cors');
var models = require('./models/');
const host = '0.0.0.0';
const PORT = process.env.PORT || 5000;
const passport = require('passport');
const path = require('path');
// const allowOrigin = process.env.ALLOW_ORIGIN || '*'
// CORS Middleware
if (!process.env.PORT) {
  require('dotenv').config()
}

// console.log(process.env.DATABASE_URL);
if (!process.env.PORT) {
  console.log('[api][port] 8000 set as default')
  console.log('[api][header] Access-Control-Allow-Origin: * set as default')
} else {
  console.log('[api][node] Loaded ENV vars from .env file')
  console.log(`[api][port] ${process.env.PORT}`)
  console.log(`[api][header] Access-Control-Allow-Origin: ${process.env.ALLOW_ORIGIN}`)
}
require('./config/passport-github');
require('./config/passport');
app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'build')));
app.use(cookieParser());
app.use(session({
  secret : process.env.JWT_SECRET,
  saveUninitialized: false,
  maxAge: 1000 * 60 * 60 * 84,
  resave: false
}));
app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended:false})); 
const isAuthenticated = function(req, res, next){
  if(req.isAuthenticated()){
    next();
    console.log('this works');
  }else{
   res.redirect('http://127.0.0.1:8001/signIn');
  }
}
// app.use(function(req, res, next) {
//   res.header('Access-Control-Allow-Origin', '*');
//   // res.header('Access-Control-Allow-Credentials',  true);
//   res.header("preflightContinue", false)
//   // res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
//   res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
//   next();
// });
app.use(cors({
    'allowedHeaders': ['Content-Type'], // headers that React is sending to the API
    'exposedHeaders': ['Content-Type'], // headers that you are sending back to React
    'origin': '*',
    'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
    'preflightContinue': false
}));
app.use('/api/users', userRoute );
app.use('/api/posts', isAuthenticated,  postRoute );
app.use(function(req, res, next) {
  res.locals.user = req.user; // This is the important line
  // req.session.user = user
  console.log(res.locals.user);
  next();
});

app.listen(PORT, host, () => {
    console.log(`Server is up and running on port ${PORT}`);
});

Answer 1

看起來 Heroku 只公開端口 80/443（並且對應用程序真正運行的任何端口進行一些請求的內部重新路由）。 您不能從 Heroku 實例公開多個端口。

我假設這個 Heroku 實例將是一個生產環境而不是一個開發環境。 如果是這種情況，最佳實踐是npm build用於生產的 React 應用程序，並讓 Express 服務器為您的服務器提供靜態文件，然后在所有端點前面加上/api/ 。