Heroku 应用程序显示空白页。反应/表达/节点答案

【问题标题】：Heroku app showing blank page. react / express/ nodeHeroku 应用程序显示空白页。反应/表达/节点
【发布时间】：2021-12-02 04:58:57
【问题描述】：

https://peaceful-basin-17224.herokuapp.com/

当然，“它适用于我的机器”。

当我查看网络时，我看到资产是从 index.html 加载的，但没有别的。此外，由于某种原因，npm run build 似乎没有运行。我将heroku bash 输入应用程序，但找不到/frontend/build

从昨晚开始我就一直在搞这个，感觉我没有取得任何进展。任何帮助将不胜感激！

我的 server.js 的一部分

app.use(express.static(path.join(__dirname, '/frontend')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '/frontend/public', 'index.html'));
});

app.use(express.static(__dirname +'frontend'));
//Serve static assests if in production 
if(process.env.NODE_ENV === 'production'){ 
  //Set static folder 
  app.use(express.static('frontend/build'));
  app.get('*', (req, res)=>{ 
    res.sendFile(path.resolve(__dirname, 'frontend', 'public', 'index.html'))   });
}

这是我的 package.json：

 {
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "proxy": "http://localhost:3001",
    "main": "server.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "server": "nodemon server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build"
      },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "@mailchimp/mailchimp_marketing": "^3.0.69",
    "express": "^4.17.1",
    "simple-react-modal": "^0.5.1"
      }
    }

【问题讨论】：

在运行构建之前，您是否为前端安装了必要的依赖项？
我认为这将由我的 heroku-postbuild 中的 npm install --prefix 前端处理。不是这样吗？我的意思不是讽刺，漂亮的初学者
我最近部署了一个相同配置的应用程序，将其用作我的 package.json "start": "concurrently \"npm run install && npm run build\" \"npm run server\"" 中的启动选项，其中安装和构建两个 cd 到我的客户端反应项目中。
刚试过这个，遇到同样的问题，这是错的吗？感谢您这么快回复。 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "concurrently \"npm run install && npm run build\" \"npm run server\"" , "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build" },
该脚本非常适合我的项目，请将其用作参考并构建您自己的脚本。您还可以阅读有关 package.json 脚本 here.

标签： node.js reactjs express heroku web-deployment

【解决方案1】：

我认为你可以删除所有这些代码：

app.use(express.static(path.join(__dirname, '/frontend')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '/frontend/public', 'index.html'));
});

app.use(express.static(__dirname +'frontend'));
//Serve static assests if in production 
if(process.env.NODE_ENV === 'production'){ 
  //Set static folder 
  app.use(express.static('frontend/build'));
  app.get('*', (req, res)=>{ 
    res.sendFile(path.resolve(__dirname, 'frontend', 'public', 'index.html'))   });
}

只写这个：

app.use(express.static(path.join(__dirname, './frontend/build')));

我的 react.js 文件夹名为“frontend”，它与我的 server.js 文件处于同一级别，这就是为什么它是一个点 ./frontend/build。并且不要删除build 名称，也不要将其更改为任何其他名称。

如果这个答案有帮助，请告诉我。

【讨论】：