部署到 heroku 时出现错误“无法加载资源 404”bundle.js

Posted 2023-03-08

【中文标题】部署到 heroku 时出现错误“无法加载资源 404”bundle.js

【英文标题】：Getting an error when deploying to heroku "faliled to load resource 404 " bundle.js

【发布时间】：2016-06-26 15:59:26

【问题描述】：

我正在尝试将我的应用程序部署到 heroku，但它抛出了我在标题中列出的这个错误。我正在使用 webpack 将文件捆绑到文件 bundle.js 我只是不确定如何将它部署到 heroku 以便 bundle.js 可用。你如何协调 webpack 和 heroku？我将附上我的 db.js 文件和 package.json 文件。

db.js

var Sequelize = require('sequelize');
var env = process.env.NODE_ENV || 'development';
var sequelize;

if (env === 'production') 
    sequelize = new Sequelize(process.env.DATABASE_URL, 
        dialect: 'postgres'
    ); // This if statement should execute if the app is run on Heroku
 else 
    sequelize = new Sequelize(undefined, undefined, undefined, 
        'dialect': 'sqlite',
        'storage': __dirname + '/data/practice-todo-api.sqlite'
    );




var db = ;

db.todo = sequelize.import(__dirname + '/models/todo.js');
db.user = sequelize.import(__dirname + '/models/user.js');
db.token = sequelize.import(__dirname + '/models/token.js');
db.sequelize = sequelize;
db.Sequelize = Sequelize;

db.todo.belongsTo(db.user);
db.user.hasMany(db.todo);

module.exports = db;

package.json

  "name": "practice-todo-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "start": "node server.js"
  ,
  "author": "",
  "license": "ISC",
  "dependencies": 
    "axios": "^0.9.1",
    "bcrypt": "^0.8.5",
    "body-parser": "^1.13.3",
    "crypto-js": "^3.1.5",
    "express": "^4.13.3",
    "jsonwebtoken": "^5.0.5",
    "lodash": "^3.10.1",
    "moment": "^2.11.2",
    "pg": "^4.4.1",
    "pg-hstore": "^2.3.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.0.0",
    "react-router": "^2.0.0-rc5",
    "redux": "^3.0.4",
    "redux-form": "^4.1.3",
    "redux-promise": "^0.5.1",
    "request": "^2.60.0",
    "sequelize": "^3.17.1",
    "sqlite3": "^3.1.1",
    "underscore": "^1.8.3"
  ,
  "devDependencies": 
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "file-loader": "^0.8.5",
    "webpack": "^1.12.13"
  

【问题讨论】：

您的应用是否在本地主机上进行开发？

【参考方案1】：

Heroku 将名为 postinstall 的脚本识别为部署生命周期的一部分，它在运行 npm install 后执行该脚本。在postinstall 脚本中，指定用于转换bundle.js 文件的命令。

例如：

...
"scripts": 
  "build": "webpack --config ./config/webpack.config.js --progress --colors",
  "start": "node server.js",
  "postinstall": "npm run build" // referencing the "build" script above
,
...

一些有用的资源：

http://ditrospecta.com/javascript/react/es6/webpack/heroku/2015/08/08/deploying-react-webpack-heroku.html https://github.com/alanbsmith/react-node-example/ https://github.com/data-creative/express-on-rails-starter-app/tree/mongo-deploy-react

【讨论】：

这很有帮助，我为此苦苦挣扎...问题是缺少转换 js 的“postinstall”脚本：D 我的脚本：“prepublish”：“npm i”， “开始”：“节点 index.js”，“安装后”：“./node_modules/.bin/webpack”