Node.js 节点网页包生成完成，但文件在heroku部署时返回404

我们正在将django（后端）应用程序的前端转换为react，并使用node和webpack构建依赖项。所有前端代码都位于应用程序的/frontend文件夹中

因为heroku的节点buildpack只查看app root，所以我添加了一个root package.json来引导它找到正确的构建路径：

{
  "description": "help heroku find path for frontend node app",
  "scripts": {
    "postinstall": "cd frontend && npm install && npm run build:production"
  },
  "engines":{
    "node":"10.0.0",
    "npm":"6.0.01"
  }
}

然后，内部/前端是build:production指令和deps:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.babel.js",
    "build:watch": "webpack --config webpack.config.babel.js --watch",
    "build:production": "npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "dotenv": "^5.0.1",
    "lodash": "^4.17.10",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-less": "^2.3.1",
    "semantic-ui-react": "^0.81.1",
    "style-loader": "^0.21.0",
    "styled-components": "^3.2.6",
    "webpack": "^4.8.3",
    "webpack-bundle-tracker": "^0.3.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^0.28.11",
    "dotenv-webpack": "^1.5.5",
    "eslint": "^4.19.1",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.8.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "less": "2.7.3",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "svg-inline-loader": "^0.8.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2"
  }
}

当我们部署到heroku时，django应用程序构建得很好，node应用程序看起来也很好（从我所看到的）：

所以我可以看到，./src/search/search.js，./src/search/index.js构建，但是当我们加载应用程序时，所有这些文件都返回404。它们确实存在，因为我可以在应用程序中看到它们：

但当我们在临时服务器上加载应用程序时，它们都会出错：

Loading failed for the <script> with source “https://test.foo.com/static/js/search.js”.

为具有源的加载失败”https://test.foo.com/static/js/search.js”.

等等

---

我更习惯于使用django依赖项，而不太熟悉node，有人对这个构建的错误有什么指导吗？我们是否需要找到一种不同的方式来托管和加载这些静态文件？

这是一个静态文件问题-模板标记没有呈现正确的静态文件路径（我们遵循django webpack loader文档，如下所示：）

我们使用（每个文档）呈现构建的js：

一旦我们将其更改为：

{% static 'js/search.js' %}
{% static 'js/banner.js' %}

我们可以正确地请求和加载脚本

{% load render_bundle from webpack_loader %}

...

{% render_bundle 'search' %}
{% render_bundle 'banner' %}

{% static 'js/search.js' %}
{% static 'js/banner.js' %}