使用Heroku+mLab 部署Node应用

问题背景

最近尝试了一下node.js,迷迷糊糊,不太懂,所以干脆找一个基于node.js平台的小项目做一下,我大概扫了一眼javascript的基础和node.js的介绍,然后在GitHub上找到了一个非常详实的项目:nswbmw/N-blog,根据他的讲解,一步一步实现了多人博客的基础雏形,之后我使用Bootstrap进行了美化,做了一个关于行尸走肉的多人博客网页,利用标签的特性,实现了各个频道的检索。

N-Blog-WalkingDeading_01.jpg

真打算布置到nswbmw所使用的Heroku和MongoHQ,但是MongoHQ目前好像已经不能使用了,于是在网上找到了他的替代品mLab,看了下相关的教程几乎和已经消失的MongoHQ的使用步骤是一致的,但是网上教程大多使用的Ubuntu系统,我这里使用的Windows,并且多数使用mongoose来进行MongoDB数据库操作,看的我云里雾里,正好刚刚部署成功。这里简单介绍下,使用mLabHeroku分别进行MongoDB和node部署的过程。
这里还是参照nswbmw/N-blog的wiki上的例子的顺序,首先将本地MongoDB切换到mLab上。

使用mLab

mLab登陆.jpg

SignUp注册,我使用的是网易126邮箱,可以进行申请,申请后需要发送一个确认的邮件,进入你的邮件去找到,然后访问返回的连接。

注册.jpg

注意注册时,这里分别有Account name和Username,一定要注意了,一会Log In登陆的时候,使用的Username。


登陆后.jpg

我因为已经注册了,直接进入时这个样子,选择MongoDB Deployments(数据库部署)下的Create New,创建新的数据库。


选择数据库大小.jpg

这里选择你需要的云服务商和区域,本来打算选择新加坡的服务区域,但是在Region中选择Amazon's Asia Pacific(Singapore)Region(ap-southeast-1),会发现没有免费的,大概看了下,只有美国区选择Plan中的Single—node,才可以选择免费的0.5GB的Sandbox。
选择已经建好的数据库.jpg

选择已经建好的进入数据库,需要新建使用数据库的用户名和密码,然后是非常关键的问题,就是如下:
新建数据库使用者用户.jpg

提示你了,如何切换数据库到mLab,我这里使用的To connect using a driver via the standard MongoDB URI (what's this?):这个选项

直接点击what's this?进入帮助文档,然后向下找到下面的MongoDB driver(可以Ctrl+F)选择其中的 driver examples in many of the major languages

MongoDB driver

In order to provide your application a means to communicate with your MongoDB database, you will need a driver in a language appropriate to your application.

You can go to MongoDB, Inc.’s site to read about the official MongoDB drivers, but we also provide driver examples in many of the major languages: C#, Java, Node.js, PHP, Python, Ruby, etc.. These examples should run out-of-the-box after you install the appropriate driver(s) and update your MongoDB URI.

You may find our troubleshooting guide helpful if you continue to experience problems trying to connect to your deployment using a compatible driver.

之后进入语言中心,这里的语言中心不是指设置中英文,而是指的是编程语言

Language Center

Node.js

The officially supported Node.js Native driver for MongoDB:

CRUD example
Mongoose, an Object Document Mapper (ODM) for MongoDB:

Mongoose CRUD example
Mongoose Tips & Tricks (from mLab’s blog)

点击链接CRUD example,就可以看到node.js如何连接数据库了,下边就是CRUD example点击后的全部文档,讲了如何在node中使用mLab数据库作为外部数据库的方法:

/*
 * Copyright (c) 2016 ObjectLabs Corporation
 * Distributed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Written with: mongodb@2.1.3
 * Documentation: http://mongodb.github.io/node-mongodb-native/
 * A Node script connecting to a MongoDB database given a MongoDB Connection URI.
*/

var mongodb = require('mongodb');

// Create seed data

var seedData = [
  {
    decade: '1970s',
    artist: 'Debby Boone',
    song: 'You Light Up My Life',
    weeksAtOne: 10
  },
  {
    decade: '1980s',
    artist: 'Olivia Newton-John',
    song: 'Physical',
    weeksAtOne: 10
  },
  {
    decade: '1990s',
    artist: 'Mariah Carey',
    song: 'One Sweet Day',
    weeksAtOne: 16
  }
];

// Standard URI format: mongodb://[dbuser:dbpassword@]host:port/dbname

var uri = 'mongodb://user:pass@host:port/db';

mongodb.MongoClient.connect(uri, function(err, db) {
  
  if(err) throw err;
  
  /*
   * First we'll add a few songs. Nothing is required to create the 
   * songs collection; it is created automatically when we insert.
   */

  var songs = db.collection('songs');

   // Note that the insert method can take either an array or a dict.

  songs.insert(seedData, function(err, result) {
    
    if(err) throw err;

    /*
     * Then we need to give Boyz II Men credit for their contribution
     * to the hit "One Sweet Day".
     */

    songs.update(
      { song: 'One Sweet Day' }, 
      { $set: { artist: 'Mariah Carey ft. Boyz II Men' } },
      function (err, result) {
        
        if(err) throw err;

        /*
         * Finally we run a query which returns all the hits that spend 10 or
         * more weeks at number 1.
         */

        songs.find({ weeksAtOne : { $gte: 10 } }).sort({ decade: 1 }).toArray(function (err, docs) {

          if(err) throw err;

          docs.forEach(function (doc) {
            console.log(
              'In the ' + doc['decade'] + ', ' + doc['song'] + ' by ' + doc['artist'] + 
              ' topped the charts for ' + doc['weeksAtOne'] + ' straight weeks.'
            );
          });
         
          // Since this is an example, we'll clean up after ourselves.
          songs.drop(function (err) {
            if(err) throw err;
           
            // Only close the connection when your app is terminating.
            db.close(function (err) {
              if(err) throw err;
            });
          });
        });
      }
    );
  });
});

我们主要使用的是如何连接数据库,所以下边的这个尤其重要:

var uri = 'mongodb://user:pass@host:port/db';
mongodb.MongoClient.connect(uri, function(err, db) {
……
}

这里开始就不再与nswbmw/部署到Heroku的wiki上一致,其余参照nswbmw/部署到Heroku
修改 settings.js 为:
module.exports = {
cookieSecret: 'myblog',
url: 'your_Mongo_URI'
};
将 your_Mongo_URI 替换为你自己创建的数据库的 URL ,将 <user> 和 <password> 分别替换为刚才添加的用户的名字和密码。
我的是

module.exports = {
    cookieSecret: 'myblog',
    url: 'mongodb://54wallis_a_good_man:haha@ds015869.mlab.com:15869/walkingdead'
};

需要注意

mongodb://<dbuser>:<dbpassword>@ds015869.mlab.com:15869/walkingdead

这里的两个<>都是要去掉的。
nswbmw/N-blog讲的如下:
打开 app.js ,将 app.use(express.session(...)); 修改为:
app.use(express.session({
secret: settings.cookieSecret,
cookie: {maxAge: 1000 * 60 * 60 * 24 * 30},//30 days
url: settings.url
}));
删除 db.js ,打开 post.js 、 user.js 和 comment.js ,均作以下修改:
将 mongodb = require('./db') 修改为 mongodb = require('mongodb').Db
添加 var settings = require('../settings');
将所有 mongodb.open(function (err, db) { 修改为 mongodb.connect(settings.url, function (err, db) {
将所有 mongodb.close(); 修改为 db.close();

这里不能完全参照改教程了,需要按最新的mLab要求进行修改,
将 上边所有的mongodb = require('./db') 修改为 mongodb = require('mongodb');
就是将所有 mongodb.open(function (err, db) { 修改为 mongodb.MongoClient.connect(settings.url, function (err, db) {
其余同nswbmw/N-blog,这里就可以完成了。
现在,无需启动你的mongo本地数据库,直接启动你的多人博客或者其他node应用,会比较慢,就可以看到了,像一起一样可以增加修改,而在mlab可以看到你的数据库。


mLab数据库.jpg

部署到 Heroku

Heroku 支持很多语言的部署,下面使用 Heroku 部署我们的博客。我这里完全没有安装Heroku Toolbelt,也没有用到git bash,直接全部在网页中执行。过程与nswbmw/N-blog稍有不同。

使用Webstorm的提醒

我行为是直接使用Webstorm新建Express项目,所以特别需要注意,Webstorm直接运行的是bin文件夹中的www文件,打开www文件,可以看到下边一段代码:

/* Get port from environment and store in Express.*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

这里相当于指定了监听接口,所以在app.js文件中就不能出现接口设置的代码了:

/*增加app.set('port', process.env.PORT || 3000);
可以直接使用node app.js启动网页了,但是在webStorm中就会报错*//
//app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(flash());

但是如果部署在Heroku或者直接在所在项目中直接node app.js 运行项目的话,就必须在app.js中进行注册端口,所以必须有app.set('port', process.env.PORT || 3000);
否则无法node直接运行,或者部署在Heroku时,log的报错日志如下

2016-11-17T20:58:30.039234+00:00 app[web.1]: Thu, 17 Nov 2016 20:58:30 GMT express-session deprecated undefined resave option; provide resave option at app.js:16:9
2016-11-17T20:58:30.040264+00:00 app[web.1]: Thu, 17 Nov 2016 20:58:30 GMT express-session deprecated undefined saveUninitialized option; provide saveUninitialized option at app.js:16:9
2016-11-17T20:58:30.043619+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2016-11-17T20:58:30.043621+00:00 app[web.1]: designed for a production environment, as it will leak
2016-11-17T20:58:30.043621+00:00 app[web.1]: memory, and will not scale past a single process.
2016-11-17T20:58:30.094090+00:00 app[web.1]: Express server listening on port undefined
2016-11-17T20:59:28.281373+00:00 heroku[web.1]: State changed from starting to crashed
2016-11-17T20:59:28.161847+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2016-11-17T20:59:28.161908+00:00 heroku[web.1]: Stopping process with SIGKILL
2016-11-17T20:59:28.248754+00:00 heroku[web.1]: Process exited with status 137
2016-11-18T01:14:59.966727+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=walkingdead4android.herokuapp.com request_id=b6b28364-627c-4d08-a497-fdbceb890289 fwd="211.157.146.5" dyno= connect= service= status=503 bytes=

其中可以注意到:2016-11-17T20:58:30.094090+00:00 app[web.1]: Express server listening on port undefined,就是端口未定义。

新建Procfile

在工程的根目录下新建一个 Procfile 文件,添加如下内容:

    web: node app.js

Procfile 文件告诉了服务器该使用什么命令启动一个 web 服务,这里通过 node app.js 执行 Node 脚本。

上传到github

上传项目到github上,注意在硬盘上的node完整项目的目录如下:


项目结构.jpg

注意图中上边的文件夹时完整的,只需要上传下边的,上传到github时把bin和node_modules这两个文件夹除外,这两文件较大,不需要上传,bin是运行node时生成的,而node_modules则是运行node应用时下载的依赖。

注册Heroku

heroku首页.jpg

进入Heroku,注册注意我的126不能通过,qq倒是可以。

创建一个应用

注册成功后,就进入了控制面板页面,如图所示:

heroku新建app.jpg

点击 New ,填写独一无二的应用名称后,点击 Create App 即创建成功 。

heroku新建app2.jpg

点击你的新建的这个app,然后选择deploy(部署)这一项,会遇到下边的

heroku新建app3.jpg

因为项目已经上传到GitHub上,所以,直接选择GitHub,会进行相应的授权操作,然后在你的账户中选择你要部署的项目所在的GitHub路径,我这里是我的N-blog-WalkingDead

下边仅跟着的就是两种部署方式:

heroku新建app7自动部署和一般部署.jpg

Automatic deploys 就是自动部署,部署放生在更新你的GitHub,Heroku就会自动部署,但是现在点击它不会立刻马上部署,可能会过几分钟之后,Manual deploy 就是一般性部署,点击图中的Deploy to Heroku就会立刻马上部署。
这里在Manual deploy中进行直接部署,点击Show build log,就可以看到构建的日志了,若果node项目(我这里是多人博客项目)没有问题,就可以你就可以访问 http://yourAppName.herokuapp.com/ 进行查看了。
我的项目结果如下:

N-Blog-WalkingDeading_02.jpg

手机端:
N-Blog-WalkingDeading_03.jpg

参考

利用heroku+mongoLab 部署Node 运用
nswbmw/N-blog:番外篇之——部署到 Heroku
其余自行百度或谷歌。

广告

鲤鱼日语一个简单背日语的APP,欢迎下载,期待Star。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容