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

Question

1. 我不知道什么是错的，请帮忙！ ----->检测到Node.js app ----->创建运行时环境 NPM_CONFIG_LOGLEVEL =错误NODE_VERBOSE = false NODE_ENV =生产NODE_MODULES_CACHE = true ----->安装二进制文件engines.node（package.json）：unspecified engines.npm（package.json）：unspecified（默认使用） 解析节点版本8.x ...下载并安装节点8.11.4 ...使用默认npm版本：5.6.0 ----->从cacheDirectories恢复缓存加载2（默认）： node_modules bower_components（未缓存 - 跳过）----->构建依赖关系在5.321s中安装节点模块（package.json + package-lock）----->缓存构建清除以前的节点缓存保存2个cacheDirectories（默认）： node_modules bower_components（无需缓存）----->修剪devDependencies跳过因为已知问题https://github.com/npm/npm/issues/19356运行'npm prune'时npm 5.6.0有时会失败 您可以通过更新至package.json https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version中的至少npm 5.7.1来使此警告静音----->构建成功！ ----->发现进程类型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"
  }
}

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

在root下创建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

在Heroku项目设置页面下将API密钥添加到配置变量