时间戳

首页 > 解决方案 > Heroku 应用显示空白页。反应/表达/节点

node.js - Heroku 应用显示空白页。反应/表达/节点

问题描述

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"
      }
    }

标签： node.jsreactjsexpressherokuweb-deployment

解决方案

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

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名称，也不要将其更改为任何其他名称。

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

推荐阅读