angularjs app web.js 结构部署在heroku上

Question

我已经为此部署苦苦挣扎了数周，但没有成功。 为了让我的应用程序在本地运行，我运行 grunt serve 和 node backend/app.js ，但是，我试图以 way it was deployed here 为例。 我也尝试关注the instructions here，因为我的应用程序是由 yeoman 生成的。
- 怎么可能运行 node web.js 而不是 node backend/app.js，因为您可以看到 here 应用程序链接到 web.js 文件。

• 如何修改和更正我的 web.js 文件？或运行该应用所需的任何其他文件。

最后，我运行 grunt build，然后将其部署到 heroku，但该应用程序无法运行，它就像在本地运行一样运行，而没有运行 node backend/app.js，显然这个文件没有运行或包含一点也不。例如，当我注册或登录时，什么也没有发生。

这是我的应用程序文件夹结构：

app/app.js

'use strict';  
var myApp = angular.module('myApp', ['ui.router', 'ngAnimate', 'satellizer']);
myApp.config(function($urlRouterProvider, $stateProvider, $httpProvider, $authProvider, API_URL){

  $urlRouterProvider.otherwise('/');

  $stateProvider

    .state('main', {
      url: '/',
      templateUrl: '/views/main.html'
    })
    .state('register', {
      url: '/register',
      templateUrl: '/views/register.html',
      controller: 'RegisterCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: '/views/login.html',
      controller: 'LoginCtrl'
    })
    .state('projectlist', {
      url: '/projectlist',
      templateUrl: '/views/projectlist.html',
      controller: 'ProjectlistCtrl'
    })
    .state('logout', {
      url: '/logout',
      controller: 'LogoutCtrl'
    });
  $authProvider.loginUrl = API_URL + 'login'
  $authProvider.signupUrl = API_URL + 'register'
  $httpProvider.interceptors.push('authInterceptor')
})
  .constant('API_URL', 'http://localhost:3000/')

backend/app.js

var express = require ('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var jwt = require('jwt-simple');
var passport = require('passport');
var LocalStrategy = require('./services/localStrategy.js');
var projectlist = require('./services/projectlist.js');
var createSendToken = require('./services/jwt.js');
var emailVerification = require('./services/emailVerification.js');

var app = express();

app.use(bodyParser.json());
app.use(passport.initialize());
passport.serializeUser(function (user, done) {
  done(null, user.id);
});

app.use(function (req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

passport.use('local-register', LocalStrategy.register);
passport.use('local-login', LocalStrategy.login);


app.post('/register', passport.authenticate('local-register'), function (req, res) {
  emailVerification.send(req.user.email);
  createSendToken(req.user, res);
});
app.get('/auth/verifyEmail', emailVerification.handler);


//using passport
app.post('/login', passport.authenticate('local-login'), function (req, res) {
  createSendToken(req.user, res);
});

app.get('/projectlist', projectlist);

var server = app.listen(process.env.PORT || 3000, function () {
  console.log('api listening on', server.address().port);
});

mongoose.connect('mongodb://username:password@ds123456.mlab.com:53845/myapp');

./web.js

var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var app = express();

app.use(morgan('dev'));

var apiFiles = './backend';
var wwwFiles = './app';

app.use(gzippo.staticGzip("" + __dirname + "/dist"));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use(express.static(__dirname));

app.get('/backend', function(req, res) {
  res.sendfile('/api')
});

var server = app.listen(process.env.PORT || 3000, function () {
  console.log('api listening on', server.address().port);
});

procfile

web: node web.js

package.json

{
  "name": "potsdamapplication",
  "private": true,
  "devDependencies": {
    "autoprefixer-core": "^5.2.1",
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.7",
 .... (all other grunt dependencies)
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "description": "This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) version 0.15.1.",
  "version": "1.0.0",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.15.2",
     .... (all other dependencies)
  },
  "scripts": {
    "start": "nf start",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

bower.json

{
  "name": "mytestapplication",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap": "^3.2.0",
    "angular-ui-router": "^0.3.1",
    "animate.css": "^3.5.2",
    "angular-animate": "^1.5.8",
    "satellizer": "^0.15.4",
    "moment": "^2.14.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "test2App",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  },
  "homepage": "https://github.com/myusername/myapp",
  "description": "my application",
  "main": "app/index.html",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

这里是gruntfile.js file link。

两天内给出最佳答案的最高赏金。承诺

Answer 1

也许这个提示会有所帮助：要通过 bower 安装东西，您需要添加一个 buildpack：

heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'

我曾经为一个带有 AngularJS 演示应用的 Ruby on Rails 做过一次，在这里可以找到完整的故事：https://github.com/stiebitzhofer/rails-angular-bower-heroku