我已经为这个部署苦苦挣扎了好几个星期,但没有成功。
为了让我的应用程序在本地运行,我运行 gruntserve
和 node backend/app.js
,但是,我尝试以 way it was deployed here 为例。
我还尝试关注 the instructions here 因为我的应用程序是由 yeoman 生成的。
- 如何运行 node web.js
而不是 node backend/app.js
因为您可以看到 here 该应用程序已链接到网络。 js 文件。
- 如何修改并更正我的 web.js 文件?或运行应用程序所需的任何其他文件。
最后我运行 grunt build ,然后将其部署到heroku,但应用程序无法正常工作,它的运行就像在本地运行一样,而无需运行node backend/app.js
,显然这个文件根本没有运行或包含。例如,当我注册或登录时,什么也没有发生。
这是我的应用程序文件夹结构:
奥 git _a
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/')
后端/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"
]
}
两天内最佳答案将获得最高赏金。 promise
最佳答案
也许这个提示有帮助:要通过凉亭安装东西,你需要添加一个构建包:
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
关于javascript - 部署在heroku上的angularjs应用程序web.js结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39191704/