Heroku中的多个构建包无法找到包或服务器

Question

问题摘要：

在向Heroku部署一个烧瓶/ function应用程序时，我在同时运行两个buildpack并执行应用程序功能时遇到了困难。我通常会遇到两个问题中的一个，这取决于我如何设置项目。

1. 如果我在cd static && npm --dev install && npm run build:production postinstall脚本中指示Heroku使用package.json，则无法找到我的bundle.js文件，并且据报道我的所有组件都无法访问：

下面是我在成功构建后从终端中的Heroku获得的一个示例错误：

ERROR in ./src/containers/HomeContainer/index.js
remote: Module not found: Error: Cannot resolve 'file' or 'directory'      ../../components/IntroSection in /tmp/build_d95bc1f5e53719f4bd91a1a3/static/src/containers/HomeContainer
remote: resolve file

1. 如果我指示Heroku到cd static && npm --dev install && npm run build:production && npm start，我会看到应用程序正确构建并尝试在服务器端口上侦听。然而，终点站终于超时了，似乎永远也没有结束？

下面是在终端中对最后一个命令的看法：

remote:        > node bin/server.js
remote:        
remote:        Listening on: {"address":"::","family":"IPv6","port":8080}
remote:        webpack built e95b297d680022fe in 23191ms

终点站仍然停在这里。

在这两种情况下，我都可以访问应用程序的python端。问题是使客户端(react/redux)呈现。在这两个版本中都在本地运行时，它的功能非常好。没有组件错误，服务器立即启动。顺便说一句，我被告知Heroku需要根中的package.json来帮助它运行设置。因此，我现在有了两个package.json文件。一个在根中，一个在静态中。根目录中的一个只是帮助它下载节点/npm并将其推送到另一个package.json文件(我认为？)。

，以下是我可以给出的进一步调试问题的一些细节：

-诉讼档案：

web: gunicorn main:app

-在Heroku建造包装：

heroku buildpacks:set heroku/python
heroku buildpacks:add heroku/nodejs

-Package.json词根：

{
  "name": "something",
  "version": "0.0.1",
  "engines": { "node": "6.11.1", "npm": "3.10.10" },
  "scripts": {
    "postinstall": "cd static && npm --dev install && npm run build:production && npm start"
  }
}

-静态Package.json：

{
  "name": "redux-easy-boilerplate",
  "version": "1.3.3",
  "description": "",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "start": "node bin/server.js",
    "test": "karma start"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "https://github.com/anorudes, https://github.com/keske",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "6.5.3",
    "axios": "^0.15.3",
    "babel-core": "^6.4.5",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.1",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.1",
    "babel-preset-stage-0": "^6.3.13",
    "bootstrap": "^3.3.5",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "classnames": "^2.2.3",
    "css-loader": "^0.26.4",
    "csswring": "^5.1.0",
    "deep-equal": "^1.0.1",
    "eslint": "^3.4.0",
    "eslint-config-airbnb": "13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.1",
    "eslint-plugin-react": "^6.1.2",
    "expect": "^1.13.4",
    "exports-loader": "^0.6.2",
    "expose-loader": "^0.7.1",
    "express": "^4.13.4",
    "express-open-in-editor": "^1.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gapi": "0.0.3",
    "history": "^4.4.1",
    "http-proxy": "^1.12.0",
    "imports-loader": "^0.6.5",
    "jasmine-core": "^2.4.1",
    "jquery": "^3.1.0",
    "jwt-decode": "^2.1.0",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.1.1",
    "karma-webpack": "^1.7.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "lodash": "^4.5.1",
    "material-ui": "^0.16.4",
    "mocha": "^3.0.2",
    "morgan": "^1.6.1",
    "node-sass": "^3.4.2",
    "postcss-import": "^9.0.0",
    "postcss-loader": "^1.1.1",
    "q": "^1.4.1",
    "qs": "^6.1.0",
    "rc-datepicker": "^4.0.1",
    "react": "^15.3.1",
    "react-addons-css-transition-group": "^15.3.1",
    "react-bootstrap": "^0.31.0",
    "react-calendar-component": "^1.0.0",
    "react-date-picker": "^5.3.28",
    "react-datepicker": "^0.37.0",
    "react-document-meta": "^2.0.0-rc2",
    "react-dom": "^15.1.0",
    "react-forms": "^2.0.0-beta33",
    "react-hot-loader": "^1.3.0",
    "react-loading-order-with-animation": "^1.0.0",
    "react-onclickoutside": "^5.3.3",
    "react-redux": "^4.3.0",
    "react-router": "3.0.0",
    "react-router-redux": "^4.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-transform-hmr": "^1.0.1",
    "redux": "^3.2.1",
    "redux-form": "^6.0.1",
    "redux-logger": "2.7.4",
    "redux-thunk": "^2.1.0",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.11",
    "webpack-dev-middleware": "^1.5.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^1.0.2",
    "yargs": "^6.5.0"
  },
  "dependencies": {
    "ant-design-pro": "^0.3.1",
    "antd": "^3.0.0",
    "lodash": "^4.17.4",
    "prop-types": "^15.6.0",
    "react-bootstrap": "^0.31.0",
    "redux-devtools-extension": "^2.13.2"
  }
}

下面是我当前的设置，这样您就可以了解构建是如何执行的。

ROOT
├──/application
│   ├── models.py
│   ├── app.py
├──/static
│   ├──/bin
│   ├──/dist
│   │   ├──bundle.js
│   ├──/node_modules
│   ├──/src
│   │   ├──/actions
│   │   ├──/components
│   │   │   ├──/examplecomponenthere
│   │   │   │   ├──index.js (for example component)
│   │   ├──/constants
│   │   ├──/containers
│   │   ├──/reducers
│   │   ├──/store
│   │   ├──/webpack
│   ├──index.html
│   ├──package.json (the true one)
│   ├──server.js
├──/tests
├──config.py
├──index.py
├──main.py
├──package.json (one to help heroku start)
├──procfile
├──requirements.txt.
├──setup.py
├──tests.py

以下是我的server.js文件(不确定是否需要此文件)：

const http = require('http');
const express = require('express');
const httpProxy = require('http-proxy');
const path = require('path');

const proxy = httpProxy.createProxyServer({});

const app = express();

app.use(require('morgan')('short'));

(function initWebpack() {
    const webpack = require('webpack');
    const webpackConfig = require('./webpack/common.config');

    const compiler = webpack(webpackConfig);

    app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true, publicPath: webpackConfig.output.publicPath,
    }));

    app.use(require('webpack-hot-middleware')(compiler, {
        log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000,
    }));

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

app.all(/^\/api\/(.*)/, (req, res) => {
    proxy.web(req, res, { target: 'http://0.0.0.0:8081' });
});

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


const server = http.createServer(app);
server.listen(process.env.PORT || 8080, () => {
    const address = server.address();
    console.log('Listening on: %j', address);
    console.log(' -> that probably means: http://0.0.0.0:%d', address.port);
});

结论最后一个注意事项，在本地，我通常用一个manage.py runserver脚本启动python。然后我打开另一个终端，cd变成静态，然后做npm start。

我很沮丧试图让heroku在这里为这个多重构建包工作。任何帮助都是非常感谢的！即使这是一个教程，我可以学到更多，并开始剖析问题，或者也许我是不正确地接近这个生产设置？

Answer 1

不应该让npm在postinstall脚本中启动。您希望在每次web dyno重新启动时运行您的node.js服务器，而不仅仅是每次安装应用程序时。

此外，对于Heroku，您应该在heroku-postbuild脚本中运行“静态”组件的构建，而不是在postinstall脚本中运行。

除此之外，您还需要建立任何构建依赖关系(例如webpack等)。Heroku可用，方法是将配置变量NPM_CONFIG_PRODUCTION设置为false，或者将它们从"devDependencies“移动到”依赖关系“。

有关更多信息，请参见here。