Heroku中来自外部文件的角度路由

Posted 2023-03-07

【中文标题】Heroku中来自外部文件的角度路由

【英文标题】：Angular routing in Heroku from external file

【发布时间】：2018-01-12 22:24:30

【问题描述】：

我一直在开发一个相对简单的 MEAN 堆栈应用程序，现在想用 Heroku 托管它。我已经完成了 90% 的工作，但我似乎无法让状态/页面路由正常工作。如果有帮助的话，我正在使用 Yeoman、Gulp 和 Bower。当然，它在本地运行良好，但我找不到有关为 Heroku 指定路由器文件的信息。我有一种感觉，我可能缺少一个简单的“server.use()”语句，但这也可能是我需要在 package.json 中进行的更改。正如许多论坛建议的那样，我已经尝试在存储库中包含 dist/ 文件夹，但无济于事。后端工作正常（使用 mLab 除外），因此 Heroku 应用程序至少在某种程度上配置正确。

这是我的服务器：

// Modules
var gzippo = require("gzippo");
var express = require("express");
var server = express();
var bodyParser = require('body-parser');
var mongo = require('mongodb');
var mongoose = require('mongoose');

// Controllers and Services
var topic = require('./controllers/topic');
var auth = require('./controllers/auth');
var cors = require('./services/cors');

// Middleware
server.use(cors);
server.use(bodyParser.json());
server.use(server.router);
app.use(function(req, res) 
    // Use res.sendfile, as it streams instead of reading the file into memory.
    res.sendfile(__dirname + '/public/index.html');
);

server.get('/', topic.test);

server.get('/topic/:id', function(req, res, next) 
    res.id = req.params.id;
    next();
, topic.get);

server.post('/topic/add', topic.post);

server.post('/topic/:id/:side/reason/add', function(req, res, next) 
    res.id = req.params.id;
    res.side = req.params.side;
    next();
, topic.addReason);

server.get('/user/add', auth.add);

server.post('/user/login', auth.login);

// process.env.MONGOLAB_URI ||
// TODO: Protect mLab login credentials

// Mongo connection
mongoose.connect("<redacted>", function(err, db) 
    // mongoose.connect("mongodb://127.0.0.1:27017", function(err, db) 

    if (!err) 
        console.log("Connected to Mongo");
     else 
        console.log("MONGO ERROR: " + err);
    
)

// Server listener
server.listen(process.env.PORT || 4000, function() 
    server.use(express.static(__dirname));
    // server.use(gzippo.staticGzip("" + __dirname + "/dist"));
    console.log("Server listening on port " + process.env.PORT);
);

// server.listen(4000, function() 
//  console.log("Server listening on port 4000");
// );

package.json:

  "name": "mystance",
  "version": "1.0.0",
  "description": "The world's opinions in three boxes.",
  "main": "/back-end/server.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "ng": "ng",
    "build": "cd front-end && gulp build",
    "postinstall": "cd front-end && bower install"
  ,
  "repository": 
    "type": "git",
    "url": "git+https://github.com/connergillette/mystance.git"
  ,
  "author": "Conner Gillette",
  "license": "MIT",
  "bugs": 
    "url": "https://github.com/connergillette/mystance/issues"
  ,
  "homepage": "https://github.com/connergillette/mystance#readme",
  "engines": 
    "node": "6.10.3"
  ,
  "dependencies": 
    "@angular/cli": "1.0.2",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular-animate": "^1.6.5",
    "async": "^2.5.0",
    "babel-core": "~6.7.4",
    "babel-loader": "~6.2.4",
    "babel-preset-es2015": "~6.6.0",
    "body-parser": "^1.17.2",
    "bower": "^1.8.0",
    "browser-sync": "~2.9.11",
    "browser-sync-spa": "~1.0.3",
    "chalk": "~1.1.1",
    "del": "~2.0.2",
    "eslint-loader": "~1.1.0",
    "eslint-plugin-angular": "~0.12.0",
    "estraverse": "~4.1.0",
    "express": "^4.15.3",
    "gulp": "~3.9.0",
    "gulp-angular-templatecache": "~1.8.0",
    "gulp-autoprefixer": "~3.0.2",
    "gulp-cssnano": "~2.1.1",
    "gulp-eslint": "~1.0.0",
    "gulp-filter": "~3.0.1",
    "gulp-flatten": "~0.2.0",
    "gulp-htmlmin": "~1.3.0",
    "gulp-inject": "~3.0.0",
    "gulp-load-plugins": "~0.10.0",
    "gulp-protractor": "~2.1.0",
    "gulp-rename": "~1.2.2",
    "gulp-replace": "~0.5.4",
    "gulp-rev": "~6.0.1",
    "gulp-rev-replace": "~0.4.2",
    "gulp-sass": "~2.0.4",
    "gulp-size": "~2.0.0",
    "gulp-sourcemaps": "~1.6.0",
    "gulp-uglify": "~1.4.1",
    "gulp-useref": "~3.0.3",
    "gulp-util": "~3.0.6",
    "gzippo": "^0.2.0",
    "http-proxy-middleware": "~0.9.0",
    "jwt-simple": "^0.5.1",
    "karma": "~0.13.10",
    "karma-coverage": "~0.5.2",
    "karma-jasmine": "~0.3.6",
    "karma-ng-html2js-preprocessor": "~0.2.0",
    "karma-phantomjs-launcher": "~0.2.1",
    "karma-phantomjs-shim": "~1.2.0",
    "lodash": "~3.10.1",
    "main-bower-files": "~2.9.0",
    "moment": "^2.18.1",
    "mongoose": "^4.11.0",
    "ng-annotate-loader": "0.0.10",
    "phantomjs": "~1.9.18",
    "uglify-save-license": "~0.4.1",
    "webpack-stream": "~2.1.1",
    "wiredep": "~2.2.2",
    "yo": "^2.0.0"
  

index.route.js：

export function routerConfig($stateProvider, $urlRouterProvider) 
    'ngInject';
    $stateProvider
        .state('home', 
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainController',
            controllerAs: 'main'
        )

        .state('topic-add', 
            url: '/topic/add',
            templateUrl: 'app/topic/topic-add.html',
            controller: 'TopicController',
            controllerAs: 'topic'
        )

        .state('reason-add', 
            url: '/topic/:id/:side/reason/add',
            templateUrl: 'app/topic/reason-add.html',
            controller: 'TopicController',
            controllerAs: 'topic'
        )

        .state('topic', 
            url: '/topic/:id',
            templateUrl: 'app/topic/topic.html',
            controller: 'TopicController',
            controllerAs: 'topic'
        );

    $urlRouterProvider.otherwise('/');

我以前从未部署过 NodeJS 应用程序，所以如果我犯了一些（或许多）愚蠢的错误，我深表歉意。任何帮助表示赞赏。谢谢。

【参考方案1】：

检查这个：https://github.com/heroku/node-js-getting-started

通常我们需要做的就是将以下内容添加到服务器 js 文件中：

app.set('port', (process.env.PORT || 5000));
pp.listen(app.get('port'), function() 
  console.log('Node app is running on port', app.get('port'));
);

【讨论】：

我的服务器已经运行良好 - 这不是问题。让前端路由工作是我正在努力解决的问题。不过感谢您的回复。