Heroku 中的部署 React/Node 应用程序失败答案

【问题标题】：Deployment React/Node App in Heroku failsHeroku 中的部署 React/Node 应用程序失败
【发布时间】：2023-03-06 07:48:01
【问题描述】：

我不知道怎么回事，请帮忙！

-----> 检测到 Node.js 应用程序 -----> 创建运行环境

NPM_CONFIG_LOGLEVEL=错误 NODE_VERBOSE=假 NODE_ENV=生产 NODE_MODULES_CACHE=真 -----> 安装二进制文件 engine.node（package.json）：未指定 engine.npm (package.json): 未指定（使用默认）

正在解析节点版本 8.x... 正在下载并安装节点 8.11.4... 使用默认 npm 版本：5.6.0 -----> 恢复缓存从 cacheDirectories 加载 2（默认）：
- node_modules
- bower_components（未缓存 - 跳过） -----> 建立依赖关系安装节点模块（package.json + package-lock）在 5.321 秒内更新 -----> 缓存构建清除上一个节点缓存保存 2 个缓存目录（默认）：
- node_modules
- bower_components（没有缓存） -----> 修剪 devDependencies 跳过，因为 npm 5.6.0 在运行“npm prune”时有时会因已知问题而失败 https://github.com/npm/npm/issues/19356
  
  您可以通过在 package.json 中更新到至少 npm 5.7.1 来消除此警告 https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version -----> 构建成功！ -----> 发现进程类型 Procfile 声明类型->（无） buildpack -> web 的默认类型 -----> 压缩... 完成：33.9M -----> 正在启动... 发布 v36 https://space-hangman.herokuapp.com/ 部署到 Heroku

这是我的 package.json：

{
  "name": "github-fetcher-fullstack-v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "react-dev": "webpack -d --watch",
    "start": "nodemon server/index.js"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "angular": "^1.6.3",
    "animate.css": "^3.7.0",
    "bluebird": "^3.5.1",
    "body-parser": "^1.17.2",
    "bootstrap": "^4.1.3",
    "express": "^4.15.0",
    "jquery": "^3.1.1",
    "moment": "^2.22.2",
    "mongoose": "^4.8.6",
    "mysql": "^2.13.0",
    "popper.js": "^1.14.4",
    "react": "^15.4.2",
    "react-animated-css": "^1.0.4",
    "react-dom": "^15.4.2",
    "react-router-dom": "^4.3.1",
    "react-simple-popover": "^0.2.4",
    "request": "^2.88.0",
    "unirest": "^0.5.1"
  }
}

【问题讨论】：

你能分享你的回购网址吗？
github.com/begonaguereca/hangman :)
对不起，我睡着了，我收到Error: Cannot find module './keys/config.js'，您已将config.js 添加到.gitignores

标签： reactjs heroku deployment

【解决方案1】：

您可以使用express.js 在heroku 下轻松运行您的项目。你所有的依赖必须在dependencies下

package.json

  "scripts": {
    "build": "Add yours",
    "postinstall": "Same with build",
    "start": "node server.js" // Heroku looks for this
  },
  "dependencies": {
     Add all your dependencies here
  }

在根目录下创建server.js文件

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Your dist folder
app.use(express.static(__dirname + '/react-client/dist/'));

app.get('/*', function(req,res) {
  res.sendFile(path.join(__dirname+'/react-client/dist/index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

SynonymFinder.js

.header("X-Mashape-Key", process.env.SYNONYMKEY) // You can use Environment Variables for API Key

将您的 API 密钥添加到 Heroku 项目设置页面下的 Config Vars

【讨论】：

【解决方案2】：

尝试将engines 中的 Node 和 npm 版本指定为对象；

package.json:

{
"name": "github-fetcher-fullstack-v2", 
  ...

//starts here 

 "engines": {    
    "node": "10.x"  
    "npm": ""       
  }

 //ends here

如果您的网站是静态的，您可能还需要服务器，请查看this link

【讨论】：