如何将一个reveal.js应用部署到Heroku？

Question

我正在尝试将一个reveal.js应用程序部署到Heroku。Reveal.js通过grunt connect命令在node上运行。该应用程序还需要ruby来即时编译资产。在本地，我可以使用grunt serve运行应用程序。

最初，由于compass是grunt watch的依赖项，因此Heroku只检测到Gemfile并假定我正在运行ruby应用程序。我使用了nodejs自定义构建包，强制Heroku将其视为nodejs应用程序。

Procfile包含

web: grunt serve

日志显示

 2013-06-17T13:51:56.187012+00:00 heroku[router]: at=error code=H14 desc="No web processes running"

heroku ps也没有显示任何内容。 我可以成功运行“heroku run grunt serve”，并且我已经修改了默认的Gruntfile.js以接受process.env，即：

connect: {
  server: {
    options: {
      port: process.env.PORT || 8000,
      base: '.'
    } 
  }
}

作为最后一次尝试，我尝试使用Heroku-nodejs-grunt构建包（https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt），它将在部署时运行grunt任务以编译资产。仍然没有成功，heroku logs --tail仍然没有显示任何进程正在运行。通过heroku run进行探索发现grunt可用，并且grunt serve命令成功执行。

当开始使用新的grunt构建包时，我遇到了上面的Gruntfile.js错误，提示“process”未定义。我将端口切换为0。

Web服务器将响应的端口。如果指定的端口已在使用中，则该任务将失败。您可以使用特殊值0或“？”来使用系统分配的端口。

没有效果，尝试使用“？”也没有效果（仍然没有Web进程，heroku restart没有任何作用）

我无法弄清楚如何让Heroku将grunt serve用作我的主要Web服务器进程！

- Tommy Devol

Answer 1

我能够使用NodeJS和ExpressJS使其正常运作。通过遵循Heroku的“入门指南”，我能够获取一个使用ExpressJS的工作Web应用程序，并在web.js中声明它：

var express = require("express");
var app = express();
app.use(express.logger());
app.use("/", express.static(__dirname));

var port = process.env.PORT || 5000;
app.listen(port, function() {
  console.log("Listening on " + port);
});

使用此方法，您可以从 / 静态地提供所有内容。

您可以在这里找到源代码：https://github.com/MichaelBitard/revealjs_heroku，并且这里有一个可工作的示例：http://murmuring-cove-4212.herokuapp.com/

- michael_bitard

---

这个方法非常好，而且在Sitepoint的文章中也有详细介绍。如果你按照Michael的提示操作，只需确保已将Express添加为package.json的依赖项即可。 http://www.sitepoint.com/creating-slick-html-presentations-using-reveal-js/ - AndyBean

Answer 2

你的问题在于默认情况下grunt serve绑定到localhost。为了使其工作，您需要对reveal.js进行一些小的更改：

首先将grunt-cli添加为devDependency：

diff --git a/package.json b/package.json
index 10489bb..4c58442 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "grunt-contrib-connect": "~0.8.0",
     "grunt-autoprefixer": "~1.0.1",
     "grunt-zip": "~0.7.0",
+    "grunt-cli": "~0.1.13",
     "grunt": "~0.4.0",
     "node-sass": "~0.9.3"
   },

然后在 grunt 中添加一个 hostname 参数，用于绑定到 0.0.0.0 而不是 localhost。

diff --git a/Gruntfile.js b/Gruntfile.js
index 3e67b9f..b2bfc47 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,5 +1,6 @@
 /* global module:false */
 module.exports = function(grunt) {
+   var hostname = grunt.option('hostname') || 'localhost';
    var port = grunt.option('port') || 8000;
    // Project configuration
    grunt.initConfig({
@@ -94,6 +95,7 @@ module.exports = function(grunt) {
        connect: {
            server: {
                options: {
+                   hostname: hostname,
                    port: port,
                    base: '.',
                    livereload: true,

现在，您可以创建一个包含以下内容的Procfile文件来部署到Heroku：

web: npm install && node_modules/.bin/grunt serve --hostname 0.0.0.0 --port $PORT

我已经为需要的 reveal.js 更改创建了一个 PR。

- dvim

Answer 3

目前使用 express v~4.13.3，express.logger()已被弃用，并且不包含在 express 包中。为了解决这个问题，我不得不导入 morgan 依赖项。

我的web.js文件最终变成以下内容：

var express = require('express');
var morgan = require('morgan');
var app = express();
var port = process.env.PORT || 5000;

app.use(morgan('combined'));
app.use('/', express.static(__dirname));
app.listen(port, function() {
  console.log('Server started on ' + port);
});

此外，我需要更新我的 package.json 文件以包含 morgan 库。我的文件中的依赖关系如下所示：

...
"dependencies": {
    "express": "~4.13.3",
    "morgan": "~1.7.0",
    "grunt-cli": "~0.1.13",
    "mustache": "~2.2.1",
    "socket.io": "~1.3.7"
},
...

- jshaw3