我之前的那个demo 手把手教你用Vue2+webpack+node开发一个H5 app是部署到openshift上的，本来想以在openshift上部署为例的，但是突然发现openshift 2版本的好像不再支持注册了，升级到3版本的好像要money了，虽然也可以申请免费的账号，但是要审核，而且貌似审核通过了只能免费试用一个月。我的账号是很久很久之前申请的，所以现在还可以用的。

小科普：openshift,是红帽的云开发平台即服务（PaaS）,支持多种语言，如java、PHP、Python、Node、Ruby等，openshift 2版本的每个账号可以免费创建三个项目，所以拿来练习还是很不错的。唯一的缺点就是服务器在国外，速度和稳定性相对较差。官方网址：https://www.openshift.com/

既然openshift不那么好申请账号了，那就用heroku为例吧(heroku 也可以免费创建一个服务)，官方网站：https://dashboard.heroku.com/，这个是要搭梯子的，要搭梯子的，要搭梯子，重要的事情说三遍。

我下文提到的那个Vue项目在这里手把手教你用Vue2+webpack+node开发一个H5 app，项目的线上预览地址,这是一个H5 app项目，所以请在chrome下调成手机模式预览，也可以扫描下方的二维码用手机体验：

源码放在了github，欢迎star,没有现成vue项目的童鞋也可以把这个项目clone下来再根据下面的教程部署一次。

一、准备工作

按理说应该会需要SSH验证的，但是Heroku我之前也使用过，所以可能SSH已经验证过了。所以这个验证的步骤下面没有写。这个验证应该跟github的SSH验证类似，并不复杂，如果大家的需要验证的话，就按照他给的提示来做就好了。

1. 先去官网注册账号注册登录之后，看到这个界面：
   
   可以看大支持的语言还是很多的 ，我们选择Node.js,跳转到这个界面：
   

2. 下载工具：我们点击I'm ready to start按钮,跳转到这样一个界面，要求我们下载一个Heroku 的CLI 工具，如果你是部署到其他平台，一般也会让你下载一个对应的工具，用于后期的代码提交，这里按照提示下载安装就行了。
   

3. 远程登陆：安装好了之后，打开一个命令行，根据页面上的提示登陆heroku，命令：heroku login,然后输入heroku的账号和密码。登陆成功会有相关的提示语。
   然后点击页面下方的 I have installed the Heroku CLI,然后会跳到这个页面：
   

4. clone代码：按照页面提示，先进入到一个你要存放代码的文件夹，然后把他的代码克隆下来：git clone https://github.com/heroku/node-js-getting-started.git.

clone完了之后，我们可以看到这个文件夹下多了一个node-js-getting-started文件，进入这个文件夹：cd node-js-getting-started;

二、创建项目

然后点击页面上的I cloned the app source code按钮,然后会进入到一个创建项目教程的页面，按照他给的步骤来做一般是不会出什么问题的，大致走一下这个流程;

1. 创建一个应用：heroku create;
   
   ​ 上面紫色的那一串就是应用的名字，这个名字是随机生成的，你也可以指定一个名字:heroku create appName.把https://ancient-forest-54677.herokuapp.com/ 在浏览器打开[也可以使用命令heroku open打开]，看到以下界面，表明这个应用已经创建好了：
   

2. 然后我们把刚才生成代码push到服务器上去，使用命令：git push heroku master:
   
   ​
   ​ 看到上面这个界面就表示已经push 完了，然后在命令行输入命令:heroku open，能看到现在界面变成了下面这样：

​ 这表明我们刚才提交的代码已经部署到服务器上了，你看到的这个界面的代码，是生成项目的默认代码。

三、提交自己的代码

​ 关于heroku 的其他一些命令，可以自己看文档，上面教程什么都比较齐全，这里就不再多说了，下来重点说一下怎么把自己的代码部署上去。

1. 我们把node-js-getting-started这个文件夹放到sublime 里打开，先研究一下这个目录结构。
   

   这个结构是很简单的了，public文件夹里应该放的是一些静态资源文件，文件夹里放的是页面文件，其他的都是一些配置项。

2. 看一眼README文件，里面是一些介绍，告诉你怎么在本地运行这个项目，怎么提交代码到服务器等等操作，略过；

3. 看一下package.json文件：

 {
   "name": "node-js-getting-started",
  "version": "0.2.6",
  "description": "A sample Node.js app using Express 4",
  "engines": {
    "node": "6.11.1"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "ejs": "2.5.6",
    "express": "4.15.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-getting-started"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "license": "MIT"
}

也很简单，没有什么其他的依赖，重点看一下这句：

   "scripts": {
      "start": "node index.js"
 },

这表示启动整体服务器的最关键的文件就是 index.js文件了，同样，对于其他的部署，代码clone 下来之后，重点先看一下start命令是什么。
4. 既然index.js很重要，就看一下这个文件：

   var express = require('express');
   var app = express();

   app.set('port', (process.env.PORT || 5000));           //设置端口
   app.use(express.static(__dirname + '/public'));        //设置静态文件目录

   // views is directory for all template files   
   app.set('views', __dirname + '/views');                 //设置页面文件目录
   app.set('view engine', 'ejs');                          //设置模板引擎为ejs

   app.get('/', function(request, response) {
     response.render('pages/index');
   });

   app.listen(app.get('port'), function() {             //启动服务器，监听上面设置的端口
     console.log('Node app is running on port', app.get('port'));
   });

这个也很简单了，熟悉node和express的童鞋应该很容易就看懂了，我在上面也加了简单的注释。
但是我们发现，这整个文件没有单独的路由，只是在index.js文件里有一个配置：

app.get('/', function(request, response) {
    response.render('pages/index');  //对应views文件夹下的 pages/index.ejs
});

我们自己的页面肯定也是放在views文件夹里面的。
5. 把我们自己的代码放进这个项目里。

• 将之前的那个vue 项目先打包，生成一个dist文件，dist文件里一个index.html文件，这就是我们的视图文件，还有一个static文件，里面放的是就是静态资源文件。

• 删除views/pages/下的index.ejs文件,将dist文件里的 index.html文件放进pages文件夹里，并把后缀名改成.ejs，将static整个文件夹放进public文件夹里(这一步非常重要)；

• 我们之前那个vue项目有一个写着后台接口的文件，就是server/router.js文件，我们为了区分，在node-js-getting-started文件夹下新建一个routers文件夹，然后将router.js文件放进去；

• 然后我们在index.js文件里将这个路由引入使用，代码如下：

    var router = require("./routers/router");
     app.use(router);

注：这个代码要写在生成`app`之后，启动服务器之前。

6. 然后我们将代码push到服务器(这样肯定是会出错的，我只是想演示一下出bug了怎么调试)：

这个怎么push代码应该大家都会的，就和在github上push代码一样的，好吧，我还是再说一下吧：

在node-js-getting-started目录下打开git 命令行工具，然后依次输入以下三个命令：

gir add .

git commit -m '这里是你自己添加的提交的信息'

git push heroku master，输入完这个命令后，会看到一个上传进度，直到看到下面这个界面，就表示上传完成了。

7. 然后我们打开我们的主页看一下：
命令行输入命令heroku open,浏览器自动打开我们的主页，但是我们看到的是这样的 界面：

很明显的报错了，我们看到页面的title也是 Appplication Error,服务器如期出错了。
8. 开始调bug。打开刚开的git 命令行工具，输入命令：heroku logs --tail
我们可以看到他打印出来很多信息，这里很容易看出来错误在哪里：

找不到cheerio模块；

9. 找到问题了，我们在router.js文件里引用了cheerio模块，而服务器上试没有这个模块的，所以怎么解决呢？在package.json文件里加入cheerio的依赖就好了.先看一下vue项目的package.json文件的cheerio的版本：

我们将这句复制到node-js-getting-started文件夹下的package.json文件里，如下：

"dependencies": {
    "ejs": "2.5.6",
    "express": "4.15.2",
    "cheerio": "^1.0.0-rc.1"
},

然后再提交代码，代码提交成功之后，再使用命令heroku open打开，这时，我么就能看到正确的页面了：

注：可能有人会问，问什么只需要在package.json里载入依赖就可以了？其实这个push代码的过程，也包含一个类似于你本地项目npm install的过程，服务器环境会根据package.json文件来安装依赖项的，所以package.json文件很重要。

四、总结

做一个小总结：

1. 我之前那个在线的例子是部署在openshift上的，比这个复杂，我觉得在Heroku上部署项目如果难度是两星的话，那在openshift上部署项目难度就是四星了，部署在openshift上还会涉及到使用PuTTY 生成公钥私钥，配置要更多一些，所以有兴趣的朋友不妨先用Heroku做个练习；

2. 这种在云平台部署项目都是大同小异的，不同的平台会有一些差别，但是基本步骤就是这样的，最多是换个不同的命令，但是思路都是这样的；

3. 找准启动服务器的文件，搞清楚目录结构，就可以随意修改了；

4. 一定要记得把你的依赖项加到package.json文件里；

5. 出错了不要慌，各个平台应该都会有自己的查看log的方法，查准问题所在，一步步解决。

​