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

Posted 2023-03-07

【中文标题】angularjs app web.js 结构部署在heroku上

【英文标题】：angularjs app web.js structure to deploy on heroku

【发布时间】：2017-01-04 15:01:38

【问题描述】：

我已经为此部署苦苦挣扎了数周，但没有成功。 为了让我的应用程序在本地运行，我运行 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:[e-mail]: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。

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

【参考方案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