将角度部署到heroku

Question

我正在尝试按照本教程将我的 angularJs 应用程序部署到 heroku：http://www.sitepoint.com/deploying-yeomanangular-app-heroku/

我已经能够将我的应用程序上传到 heroku，但不幸的是它似乎没有加载我的任何脚本。

https://data-display-prototype.herokuapp.com/

检查页面时出现一堆 404 错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

在本地运行应用程序可以正常工作。不幸的是，我不知道在哪里寻找解决方案。

更新：

这些是页面中的所有错误（我认为是 index.html 中的所有脚本）

Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.css 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/jquery/dist/jquery.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/Chart.js/Chart.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/app.js    
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/main.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/firebase-test.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/chart-test.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/firebase/firebase.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/services/data-services.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/scripts/controllers/sidebar.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angularfire/dist/angularfire.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.js 
Failed to load resource: the server responded with a status of 404 (Not Found) angular.min.js:36 
Uncaught Error: [$injector:modulerr]               http://errors.angularjs.org/1.4.0-beta.2/$injector/modulerr?p0=DataDisplayP…s.com%2Fajax%2Flibs%2Fangularjs%2F1.4.0-beta.2%2Fangular.min.js%3A17%3A350)
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/bower_components/angular-chart.js/dist/angular-chart.css 
Failed to load resource: the server responded with a status of 404 (Not Found) https://data-display-prototype.herokuapp.com/styles/main.css     
Failed to load resource: the server responded with a status of 404 (Not Found)

更新 2：

package.json 文件：

{
  "name": "datadisplayprototype",
  "version": "0.0.0",
  "dependencies": {
    "express": "~4.12.3",
    "gzippo": "~0.2.0",
    "morgan": "~1.5.2"
  },
  "repository": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.0",
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.12.0",
    "grunt-contrib-htmlmin": "^0.4.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.1.2",
    "grunt-google-cdn": "^0.4.3",
    "grunt-newer": "^1.1.0",
    "grunt-ng-annotate": "^0.9.2",
    "grunt-svgmin": "^2.0.0",
    "grunt-usemin": "^3.0.0",
    "grunt-wiredep": "^2.0.0",
    "jshint-stylish": "^1.0.0",
    "load-grunt-tasks": "^3.1.0",
    "time-grunt": "^1.0.0",
    "grunt-karma": "~0.10.1",
    "karma-phantomjs-launcher": "~0.1.4",
    "jasmine-core": "~2.2.0",
    "karma": "~0.12.31",
    "karma-jasmine": "~0.3.5"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

更新 3：已解决！

问题原来是我删除了 grunt 用来生成脚本文件的 index.html 文件中的 cmets。作为一个菜鸟，我并不怀疑 cmets 实际上可以具有功能，只是不假思索地删除了它们。显然 Heroku 知道从 dist 文件夹部署应用程序。由于 dist 文件夹是在没有任何脚本的情况下生成的，所以我得到了错误。

Answer 1

将此添加到 package.json 的底部应该可以解决您的凉亭问题： 如果您检查您的安装日志，您应该会看到它可能甚至没有运行 bower。我不相信 heroku 会检查 .bowerrc。

"scripts": {
    "postinstall": "bower install"
  }

postinstall 告诉 npm 运行额外的脚本或命令。因为 heroku 在找到 package.json 时会运行 npm install，而不是 bower 安装，这让我们在 npm 完成后启动 bower。

我相信你还有另一个问题：

app.use(gzippo.staticGzip("" + __dirname + "/dist"));

这会将您的网站设置为引用 /dist 目录，这不是您的应用所在的位置。或者，如果您真的希望它指向 /dist 目录，请尝试将 ../app/ 附加到您的 html 文件中的所有脚本引用。