congyh's blog

从零构建部署Node.js+Express+Bootstrap Web应用

本文将包括以下内容:

  • 创建一个Express应用
  • 使用npm和package.json管理应用依赖
  • 调整Express工程结构到MVC架构
  • Route和Controller概念分离
  • 创建新的Node模块(module)
  • 使用Git在线部署Express应用到Heroku

在进行一切操作之前, 需要先安装好Node.js, 对于*nix用户来说, 直接下载解压, 并添加到环境变量中即可完成安装.

首先从Express着手, Express是构建在Node之上的web应用框架.

使用package.json定义依赖

每个Node应用的根目录都有一个文件叫做package.json, 用来记录Node应用的依赖, 例如:

1
2
3
4
5
6
7
{
...
"depencencies": {
"express": "~4.9.0"
...
}
}

其中”~”表示使用最近的patch版本, 推荐使用.

使用npm安装Node依赖

工程范围的依赖

在和package.json相同的目录层级运行以下指令即可:

1
$ npm install

这会将所有的依赖(包括间接依赖)下载到node_modules文件夹内. 如果后期你想向工程中追加依赖, 只需要运行以下指令:

1
$ npm install <package-name> --save

以上指令完成了两步操作:

  • 将指定package下载到node_modules文件夹;
  • 将依赖条目追加到package.json文件内.

全局范围的依赖

一些通用的依赖需要安装成全局依赖, 例如express generator:

1
$ npm install -g express-generator

依赖会被安装到以下路径: ${NODE_HOME}/lib/node_modules/express-generator

创建并启动一个Express工程

  1. 新建一个文件夹
  2. 在文件夹内运行express
  3. npm install按照package.json的定义安装所有依赖
  4. npm start启动程序, 浏览器访问localhost:3000即可.

Express的用户请求处理逻辑

如下图所示

express-handle-request

重启一个Node应用

如果你修改了服务端的Node代码, 那么需要停止应用运行, 编译并重新启动

重启应用的方法有两种, 一种是从启动应用的控制台ctrl+c, 然后npm start, 另一种方法是使用nodemon, nodemom是Node应用的监控程序, 能够简化Node应用的开发. 安装方法如下:

1
$ npm install -g nodemon

然后使用nodemon指令代替npm start启动应用程序.

如果你只是修改了Jade模板, CSS文件, 或者客户端的js代码, 无需重新启动应用

调整Express工程结构到MVC模式

首先在根目录下新创建一个app_server文件夹, 将根目录下的routesviews文件夹移到里面:

express-project-structure

然后更改app.js文件, 将两者重新定位到新的位置. 具体的来说就是将原来的

1
2
3
app.set('views', path.join(__dirname, 'views'));
var index = require('./routes/index');
var users = require('./routes/users');

变更为

1
2
3
app.set('views', path.join(__dirname, 'app_server', 'views'));
var index = require('./app_server/routes/index');
var users = require('./app_server/routes/users');

Node模块(module)的生成与使用

举个例子, 现在我们有a.jsb.js两个文件, 假设现在它们在同级目录下, 我们想在b.js文件中调用a.js中定义的变量或函数. 下面是a.js文件的内容

1
2
3
module.exports.logThis = function(message) {
console.log(message);
}

上述代码将logThis变量(函数)暴露出来, 供其他模块使用, 经过这样设定后我们就可以在b.js中如下调用

1
2
var myModule = require("./a")
myModule.logThis("It works!")

需要注意的一点是, require()方法并不需要加后缀, 它会自动依以下顺序搜索:

  • 寻找同名js文件
  • 寻找同名文件夹下的index.js文件

Bootstrap安装

  1. 首先下载Bootstrap发行版, 解压并添加到Express工程下的public目录(public目录是用于存放静态资源的目录)下的bootstrap目录(需新建).
  2. 由于Bootstrap依赖jquery, 所以我们还要下载jquery, 从这里下载, 注意下载完整版的, 不要下载slim版的, 点击之后, 会跳出一个代码页面, 直接拷贝全部, 然后保存在public/javascript/jquery-<具体的版本.min.js文件中即可.
  3. 清空Express默认的样式. 具体的来讲, 就是清空public/stylesheet/style.css文件中的内容

安装Bootstrap主题

这里以Amelia主题为例, 从这里下载, 将解压得到的amelia.bootstrap.cssamelia.bootstrap.min.css拷贝到Express工程下的public/bootstrap/css文件夹下.

Jade模板的使用

Jade模板的使用原则是:

设计一系列的模板布局, 然后让其他文件去扩展

这里我们来看一个例子, 下面分别是layout.jadeindex.jade文件的内容:

1
2
3
4
extend layout
block content
h1= title
p Welcome to #{title}

上面代码的意思是index.jade扩展了layout.jade, block contentlayout.jade中声明的一个html填充块, 这里向里面填充了一个<h1>和一个<p>.

下面让我们来看一下layout.jade.

1
2
3
4
5
6
7
8
9
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='/javascript/jquery-3.1.1.min.js')
script(src='/bootstrap/js/bootstrap.min.js')

layout.jade除了用于定义html的模板, 还用来进行css和js脚本的连接, 注意: js脚本放在页面最下面有利于提升网页的加载速度. 此外, 第一行设置的viewport有利于页面能够在移动设备上良好的缩放.

到此, 使用Bootstrap的Amelia主题之后的显示效果如下:

bootstrap-theme-amelia

使用Heroku进行网站的对外在线演示

将网站托管到在线平台上的意义是:

可以便利的进行跨浏览器的测试, 跨设备测试, 并且能够向同事和合作伙伴快速展示与交流开发阶段性进展.

类似的平台服务还有Google Cloud Platform, Nodejitsu, OpenShift等.

安装Heroku

  1. 从这里注册一个免费账号
  2. 下载Heroku toolbelt, 或者直接使用以下指令在Ubuntu中下载

    1
    $ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh
  3. 触发安装

    1
    $ heroku --version
  4. 验证安装成果

    1
    2
    3
    4
    $ heroku --version
    heroku-toolbelt/3.43.15 (x86_64-linux) ruby/1.9.3
    heroku-cli/5.5.6-a9ddee4 (linux-amd64) go1.7.4
    You have no installed plugins.
  5. 登陆(实际上完成了类似ssh密钥对生成并上传公钥的工作)

    1
    $ heroku login

使用Heroku提交Node.js应用

首先需要保证云端的运行环境与本地开发环境一致

具体的是在package.json中添加一个engines配置块, 指明node和npm的版本, 如果不清楚的话, 还是确认一下比较好:

1
2
$ node --version
$ npm --version

下面是示例的package.json文件:

1
2
3
4
5
6
7
8
9
{
"name": "Loc8r"
...
"engines": {
"node": "~4.6.0",
"npm": "~2.15.9"
},
...
}

创建一个云端启动脚本

具体来说就是创建一个启动脚本, 指明我们应用的类型以及启动指令, 对于Node.js应用来说, 需要在应用的根目录下创建一个名为Procfile的文件, 示例内容如下:

1
web: npm start

使用heroku local进行本地验证

heroku local的前身是foreman, 但是现在的heroku toolbelt中已经用前者替换掉了了后者, 详见如下官方通知

heroku local工具是用来在提交应用前进行本地验证的, 使用heroku local启动应用前需要先关闭本地应用, 然后使用以下指令启动:

1
$ heroku local web

程序成功启动后会监听在5000端口, 我们可以通过localhost:5000来访问, 显示效果应与之前本地直接运行相同.

将应用托管到Heroku

首先需要初始化一个git仓库, 添加.gitignore文件, 推荐使用这里自动生成(键入Node即可).

然后在云端创建一个heroku应用容器(隐式完成了本地仓库的关联)

1
2
3
$ heroku create
Creating app... done, ⬢ sheltered-everglades-85543
https://sheltered-everglades-85543.herokuapp.com/ | https://git.heroku.com/sheltered-everglades-85543.git

推送到远程仓库

1
$ git push heroku master

在heroku云端用测试机(dyno)来运行部署的程序

每位用户都会免费获得一个可用的web测试机, 使用如下指令来开启它

1
2
$ heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free

在线浏览部署情况

1
$ heroku open

自动在云端的网址上看到部署的应用的情况

node-app-on-heroku

之后修改了应用代码后, 只需要push到heroku容器的master分支, 就会自动更新并部署.

坚持原创技术分享,您的支持将鼓励我继续创作!

热评文章