节点webpack构建完成，但是在heroku部署中文件返回404
我们正在将Django（后端）应用程序的前端转换为响应，并使用node和webpack来建立依赖关系。所有的前端代码都在应用程序的/ frontend文件夹中。
由于heroku的节点buildpack仅查看应用程序的根目录，因此我添加了一个根package.json以将其引导至正确的构建路径：
DPM actions:
usage: dpm [subcommand] [options]
usage: dpm set-active-admin [ --user <USER_ID> ] <COMPONENT>
usage: dpm set-device-owner <COMPONENT>
usage: dpm set-profile-owner [ --user <USER_ID> ] <COMPONENT>
dpm set-active-admin: Sets the given component as active admin for an existing user.
dpm set-device-owner: Sets the given component as active admin, and its
package as device owner.
dpm set-profile-owner: Sets the given component as active admin and profile owner for an existing user.
然后/ frontend内部是build：production指令和deps：
{
"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"
}
}
当我们部署到heroku时，django应用程序可以很好地构建，并且节点应用程序也可以正常运行（据我所见）：
{
"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"
}
}
所以我可以看到构建了./src/search/Search.js、./src/search/index.js，但是当我们加载应用程序时，所有这些文件都返回404。它们确实存在是因为我可以在该应用程序：
但是当我们在登台服务器上加载应用程序时，它们都会出错：
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 10.0.0
remote: engines.npm (package.json): 6.0.01
remote:
remote: Resolving node version 10.0.0...
remote: Downloading and installing node 10.0.0...
remote: Bootstrapping npm 6.0.01 (replacing 5.6.0)...
remote: npm 6.0.1 installed
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules (not cached - skipping)
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: > undefined postinstall /tmp/build_134371d20a788406819fa473e968f043
remote: > cd frontend && npm install && npm run build:production
remote:
remote:
remote: > styled-components@3.3.2 postinstall /tmp/build_134371d20a788406819fa473e968f043/frontend/node_modules/styled-components
remote: > node ./scripts/postinstall.js || exit 0
remote:
remote: Use styled-components at work? Consider supporting our development efforts at opencollective.com/styled-components
remote: added 1298 packages from 825 contributors in 28.85s
remote: [!] 5 vulnerabilities found [19545 packages audited]
remote: Severity: 1 Low | 4 Moderate
remote: Run `npm audit` for more detail
remote:
remote:
remote: > frontend@1.0.0 build:production /tmp/build_134371d20a788406819fa473e968f043/frontend
remote: > npm run build
remote:
remote:
remote: > frontend@1.0.0 build /tmp/build_134371d20a788406819fa473e968f043/frontend
remote: > webpack --config webpack.config.babel.js
remote:
remote: Failed to load /tmp/build_134371d20a788406819fa473e968f043/.env.
remote: (node:2622) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
remote: Hash: f6f376fa4847f29e688e
remote: Version: webpack 4.12.0
remote: Time: 21391ms
remote: Built at: 2018-06-21 13:44:03
remote: Asset Size Chunks Chunk Names
remote: 0ab54153eeeca0ce03978cc463b257f7.woff2 39.2 KiB [emitted]
remote: 13db00b7a34fee4d819ab7f9838cc428.eot 96.3 KiB [emitted]
remote: c5ebe0b32dc1b5cc449a76c4204d13bb.ttf 96.1 KiB [emitted]
remote: a046592bac8f2fd96e994733faf3858c.woff 62.2 KiB [emitted]
remote: e8c322de9658cbeb8a774b6624167c2c.woff2 53.2 KiB [emitted]
remote: 8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot 104 KiB [emitted]
remote: icons.svg?962a1bf31c081691065fe333d9fa8105 382 KiB [emitted]
remote: b87b9ba532ace76ae9f6edfe9f72ded2.ttf 103 KiB [emitted]
remote: faff92145777a3cbaf8e7367b4807987.woff 49.3 KiB [emitted]
remote: brand-icons.svg?a1a749e89f578a49306ec2b055c073da 496 KiB [emitted]
remote: 701ae6abd4719e9c2ada3535a497b341.eot 30.4 KiB [emitted]
remote: outline-icons.svg?82f60bd0b94a1ed68b1e6e309ce2e8c3 105 KiB [emitted]
remote: ad97afd3337e8cda302d10ff5a4026b8.ttf 30.2 KiB [emitted]
remote: ef60a4f6c25ef7f39f2d25a748dbecfe.woff 14.4 KiB [emitted]
remote: cd6c777f1945164224dee082abaea03a.woff2 12 KiB [emitted]
remote: banner.js 3.09 MiB banner [emitted] banner
remote: search.js 4.07 MiB search [emitted] search
remote: vendor.js 245 KiB vendor [emitted] vendor
remote: semantic_theme.css 945 KiB search [emitted] search
remote: [./node_modules/less-loader/dist/stringifyLoader.js!./semantic_theme/theme.config] 2.17 KiB [built]
remote: [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {banner} {search} [built]
remote: [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {banner} {search} {vendor} [built]
remote: [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {banner} {search} [built]
remote: [./semantic_theme/semantic.less] 41 bytes [built]
remote: [0] multi styled-components 28 bytes {vendor} [built]
remote: [1] multi babel-polyfill ./src/search/index.js 40 bytes {search} [built]
remote: [./src/banner/Banner.js] 11 KiB {banner} [built]
remote: [./src/banner/index.js] 698 bytes {banner} [built]
remote: [./src/search/Result.js] 3.06 KiB {search} [built]
remote: [./src/search/Search.js] 12.3 KiB {search} [built]
remote: [./src/search/index.js] 599 bytes {search} [built]
remote: [./src/theme.js] 160 bytes {banner} {search} [built]
remote: + 1171 hidden modules
remote: Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--5-1!node_modules/less-loader/dist/cjs.js??ref--5-2!semantic_theme/semantic.less:
remote: 15 assets
remote: [./node_modules/css-loader/index.js??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./semantic_theme/semantic.less] ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./semantic_theme/semantic.less 2.77 MiB {0} [built]
remote: [./node_modules/less-loader/dist/stringifyLoader.js!./semantic_theme/theme.config] 2.17 KiB [built]
remote: + 76 hidden modules
remote: up to date in 53.225s
remote: [+] no known vulnerabilities found [0 packages audited]
remote:
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules (nothing to cache)
remote: - bower_components (nothing to cache)
remote:
remote: -----> Pruning devDependencies
remote: Skipping because NPM_CONFIG_PRODUCTION is 'false'
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> celery, web, worker
remote:
remote: -----> Compressing...
remote: Done: 287.9M
remote: -----> Launching...
等
我更习惯于使用django依赖关系，而对节点则不太熟悉，任何人都对这个构建有什么问题有任何指导？我们是否需要找到其他方式来托管和加载这些静态文件？
1 个答案:
答案 0 :(得分：0)
这是一个静态文件问题-模板标记未呈现正确的静态文件路径（我们遵循django-webpack-loader文档，如下所示：https://github.com/owais/django-webpack-loader）。
我们正在使用（每个文档）渲染内置的js：
{% load render_bundle from webpack_loader %}
...
{% render_bundle 'search' %}
{% render_bundle 'banner' %}
一旦我们将其更改为：
{% static 'js/search.js' %}
{% static 'js/banner.js' %}
我们可以正确地请求和加载脚本
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？