如何在heroku上使用express部署创建反应应用程序？

Question

我几天来一直在尝试在 heroku 上部署我的初学者应用程序，但没有成功，我遵循了很多关于如何做到这一点的指南和答案，但它没有用，这是我的代码：

服务器

const dotenv = require('dotenv')
dotenv.config()
const express = require("express");
 //const PORT = 5000; got a binding error on heroku logs so i commented this 
const app = express();
const path = require("path")
const fetch = require("node-fetch")
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
const cors = require ('cors') ;
app.use(cors());

if  (process.env.NODE_ENV === 'production')
    {app.use(express.static(path.resolve(__dirname, '../build')));
     app.get('*', (req, res) => {
     res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
        }); }

app.listen(5000, () => {
 // console.log(`Server listening on ${PORT}`);
});

const url = "https://api.themoviedb.org/3/movie/"
const API_TMDB = process.env.API_TMDB

app.get('/api/moviesPopular' , async (req,res)=>{
  ---  // rest of code with similar get routes

package.json - 服务器

{
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "node index.js" ,
    "build": "cd .. && npm install && npm run build"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^14.3.2",
    "express": "^4.17.2",
    "node-fetch": "2",
    "nodemon": "^2.0.15"
  },
  "engines": {
    "node": "14.15.0"
  }
}

应用代码

export const getPopular = () =>
  fetch(`/api/moviesPopular`)               
    --- more functions like this  

文件夹结构如下所示

root
├── server
│      
├── src
└── public

我在 src 文件夹中创建了 setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
};

package.json 应用程序

{
  "name": "movie",
  "version": "0.1.0",
  "private": true,
 
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mantine/core": "^3.6.2",
    "@mantine/hooks": "^3.6.2",
    "@mui/material": "^5.2.7",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "baseui": "^10.7.1",
    "bootstrap": "5.1.3",
    "dotenv": "^10.0.0",
    "global": "^4.4.0",
    "gulp": "^4.0.2",
    "http-proxy-middleware": "^2.0.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-slick": "^0.28.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.4",
    "styletron-engine-atomic": "^1.4.8",
    "styletron-react": "^6.0.2",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}  

我从 heroku 仪表板的日志中得到这个

2022-02-09T00:49:14.963015+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=moviedbx.herokuapp.com request_id=74d2e5a4-b7f1-45fc-bd3d-13914adcbb55 fwd="197.48.32.48" dyno= connect= service= status=503 bytes= protocol=https
2022-02-09T00:49:15.378141+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=moviedbx.herokuapp.com request_id=487a1c6a-850d-4e05-a9ff-6a325c4fa731 fwd="197.48.32.48" dyno= connect= service= status=503 bytes= protocol=https

api 密钥在 heroku 上的 (Config Vars) 中。
从应用程序的 package.json 中删除（“代理”：“http://localhost:5000”）后，该应用程序无法在本地运行
我该怎么做才能在heroku上部署？这样做之后，该应用程序仍然可以在本地运行吗？

Answer 1

https://devcenter.heroku.com/articles/deploying-nodejs#specifying-a-start-script

文档提到端口设置为环境变量。您正在硬编码您的端口。

改变你的听法：

app.listen(process.env.PORT || 5000, () => {
  console.log(`Server listening on ${app.address().port}`);
});

看看会带你去哪里。