我之前的那个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验证类似，并不复杂，如果大家的需要验证的话，就按照他给的提示来做就好了。
-
先去官网注册账号注册登录之后，看到这个界面：
图片
可以看大支持的语言还是很多的 ，我们选择Node.js,跳转到这个界面：
图片
-
下载工具：我们点击
I'm ready to start按钮,跳转到这样一个界面，要求我们下载一个Heroku 的CLI 工具，如果你是部署到其他平台，一般也会让你下载一个对应的工具，用于后期的代码提交，这里按照提示下载安装就行了。
图片
-
远程登陆：安装好了之后，打开一个命令行，根据页面上的提示登陆heroku，命令：
heroku login,然后输入heroku的账号和密码。登陆成功会有相关的提示语。
然后点击页面下方的I have installed the Heroku CLI,然后会跳到这个页面：
图片
-
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按钮,然后会进入到一个创建项目教程的页面，按照他给的步骤来做一般是不会出什么问题的，大致走一下这个流程;
-
创建一个应用：
heroku create;
图片
上面紫色的那一串就是应用的名字，这个名字是随机生成的，你也可以指定一个名字:heroku create appName.把https://ancient-forest-54677.herokuapp.com/ 在浏览器打开[也可以使用命令heroku open打开]，看到以下界面，表明这个应用已经创建好了：
图片
-
然后我们把刚才生成代码push到服务器上去，使用命令：
git push heroku master:
图片
看到上面这个界面就表示已经push 完了，然后在命令行输入命令:heroku open，能看到现在界面变成了下面这样：
图片
这表明我们刚才提交的代码已经部署到服务器上了，你看到的这个界面的代码，是生成项目的默认代码。
三、提交自己的代码
关于heroku 的其他一些命令，可以自己看文档，上面教程什么都比较齐全，这里就不再多说了，下来重点说一下怎么把自己的代码部署上去。
-
我们把
node-js-getting-started这个文件夹放到sublime 里打开，先研究一下这个目录结构。
图片
这个结构是很简单的了，
public文件夹里应该放的是一些静态资源文件，文件夹里放的是页面文件，其他的都是一些配置项。 -
看一眼README文件，里面是一些介绍，告诉你怎么在本地运行这个项目，怎么提交代码到服务器等等操作，略过；
-
看一下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命令是什么。
- 既然
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文件夹里面的。
- 把我们自己的代码放进这个项目里。
-
将之前的那个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之后，启动服务器之前。
- 然后我们将代码push到服务器(这样肯定是会出错的，我只是想演示一下出bug了怎么调试)：
这个怎么push代码应该大家都会的，就和在github上push代码一样的，好吧，我还是再说一下吧：
在node-js-getting-started目录下打开git 命令行工具，然后依次输入以下三个命令：
gir add .
git commit -m '这里是你自己添加的提交的信息'
git push heroku master，输入完这个命令后，会看到一个上传进度，直到看到下面这个界面，就表示上传完成了。
图片
-
然后我们打开我们的主页看一下：
命令行输入命令heroku open,浏览器自动打开我们的主页，但是我们看到的是这样的 界面：
图片
很明显的报错了，我们看到页面的title也是Appplication Error,服务器如期出错了。 -
开始调bug。打开刚开的git 命令行工具，输入命令：
heroku logs --tail
我们可以看到他打印出来很多信息，这里很容易看出来错误在哪里：
图片
找不到cheerio模块；
图片
-
找到问题了，我们在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文件很重要。
四、总结
做一个小总结：
-
我之前那个在线的例子是部署在openshift上的，比这个复杂，我觉得在Heroku上部署项目如果难度是两星的话，那在openshift上部署项目难度就是四星了，部署在openshift上还会涉及到使用PuTTY 生成公钥私钥，配置要更多一些，所以有兴趣的朋友不妨先用Heroku做个练习；
-
这种在云平台部署项目都是大同小异的，不同的平台会有一些差别，但是基本步骤就是这样的，最多是换个不同的命令，但是思路都是这样的；
-
找准启动服务器的文件，搞清楚目录结构，就可以随意修改了；
-
一定要记得把你的依赖项加到package.json文件里；
-
出错了不要慌，各个平台应该都会有自己的查看log的方法，查准问题所在，一步步解决。
网友评论