一步步教你怎么把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验证类似,并不复杂,如果大家的需要验证的话,就按照他给的提示来做就好了。

  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命令是什么。

  1. 既然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文件夹里面的。

  1. 把我们自己的代码放进这个项目里。
  • 将之前的那个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之后,启动服务器之前。

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

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

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

gir add .

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

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

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

    图片
    图片

    很明显的报错了,我们看到页面的title也是 Appplication Error,服务器如期出错了。

  2. 开始调bug。打开刚开的git 命令行工具,输入命令:heroku logs --tail
    我们可以看到他打印出来很多信息,这里很容易看出来错误在哪里:

    图片
    图片

    找不到cheerio模块;
    图片
    图片

  3. 找到问题了,我们在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的方法,查准问题所在,一步步解决。

推荐阅读更多精彩内容