一步步教你怎么把vue项目部署到Node服务器上

我之前的那个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[/code]. 


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"
},
"dependenci
4000
es": {
"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
文件很重要。

四、总结
做一个小总结：

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

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

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

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

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

​