Heroku中的多重构建包无法找到bundle或s

Question

问题摘要：

在向Heroku部署flask/react应用程序时，我无法同时运行两个构建包并使应用程序正常运行。我通常会遇到2个问题中的1个，这取决于我如何设置项目。在

1. 如果我让Heroku包.json安装后脚本，我的捆绑包.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我会看到应用程序正确构建，并尝试在服务器端口上侦听。然而，最终终端超时，似乎从未完成？在

下面是它在终端中朝向最后一个命令的外观：

^{pr2}$

终点站仍停在这里。在

---

在这两种情况下，我都可以访问应用程序的python端。问题是让客户端（react/redux）呈现。在任何一个版本中本地运行这一切时，它的功能都非常好。没有组件错误，服务器立即启动。顺便说一下，有人告诉我Heroku需要包.json以帮助它运行安装程序。结果，我现在有2个包.json文件夹。一个是根目录，一个是静态文件。根目录中的一个只是帮助它下载node/npm并将其推送到另一个节点包.json文件（我想？）。在

为了进一步调试问题，我可以给出一些细节：

在-- 程序文件：

web: gunicorn main:app

在-- Heroku上的BuildPack：

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

在--包.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"
  }
}

在-- 包.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

这是我的服务器.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变成static，然后做npm start。在

我很失望让heroku为这个多构建包工作。任何帮助都将不胜感激！即使这是一个教程，我可以学到更多，并开始剖析问题，或者可能我处理这个生产设置不正确？在

Answer 1

不应在安装后脚本中使用npm start。你想让你的节点.js服务器每次你的网络动态重新启动，而不是每次你的应用程序安装。在

此外，对于Heroku，您应该在Heroku后期构建脚本中而不是在安装后脚本中运行“静态”组件的构建。在

除此之外，您需要使任何构建依赖项（如webpack等）对Heroku可用，方法是将config var NPM_config_PRODUCTION设置为false，或者将它们从“devDependencies”移到“dependencies”。在

有关详细信息，请参阅here。在