本文將包括以下內容:

• 建立一個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應用的依賴, 例如:

{
  ...
  "depencencies": {
    "express": "~4.9.0"
    ...
  }
}

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

使用npm安裝Node依賴

工程範圍的依賴

在和package.json相同的目錄層級執行以下指令即可:

$ npm install

這會將所有的依賴(包括間接依賴)下載到node_modules資料夾內. 如果後期你想向工程中追加依賴, 只需要執行以下指令:

$ npm install <package-name> --save
 

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

• 將指定package下載到node_modules資料夾;
• 將依賴條目追加到package.json檔案內.

全域性範圍的依賴

一些通用的依賴需要安裝成全域性依賴, 例如express generator:

$ 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的使用者請求處理邏輯

如下圖所示

重啟一個Node應用

如果你修改了服務端的Node程式碼, 那麼需要停止應用執行, 編譯並重新啟動

重啟應用的方法有兩種, 一種是從啟動應用的控制檯ctrl+c, 然後npm start, 另一種方法是使用nodemon, nodemom是Node應用的監控程式, 能夠簡化Node應用的開發. 安裝方法如下:

$ npm install -g nodemon

然後使用nodemon指令代替npm start啟動應用程式.

如果你只是修改了Jade模板, CSS檔案, 或者客戶端的js程式碼, 無需重新啟動應用

調整Express工程結構到MVC模式

首先在根目錄下新建立一個app_server資料夾, 將根目錄下的routes和views資料夾移到裡面:

然後更改app.js檔案, 將兩者重新定位到新的位置. 具體的來說就是將原來的

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

變更為

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.js和b.js兩個檔案, 假設現在它們在同級目錄下, 我們想在b.js檔案中呼叫a.js中定義的變數或函式. 下面是a.js檔案的內容

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

上述程式碼將logThis變數(函式)暴露出來, 供其他模組使用, 經過這樣設定後我們就可以在b.js中如下呼叫

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.css和amelia.bootstrap.min.css拷貝到Express工程下的public/bootstrap/css資料夾下.

Jade模板的使用

Jade模板的使用原則是:

設計一系列的模板佈局, 然後讓其他檔案去擴充套件

這裡我們來看一個例子, 下面分別是layout.jade和index.jade檔案的內容:

extend layout
block content
  h1= title
  p Welcome to #{title}

上面程式碼的意思是index.jade擴充套件了layout.jade, block content是layout.jade中宣告的一個html填充塊, 這裡向裡面填充了一個<h1>和一個<p>.

下面讓我們來看一下layout.jade.

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主題之後的顯示效果如下:

使用Heroku進行網站的對外線上演示

將網站託管到線上平臺上的意義是:

可以便利的進行跨瀏覽器的測試, 跨裝置測試, 並且能夠向同事和合作夥伴快速展示與交流開發階段性進展.

類似的平臺服務還有Google Cloud Platform, Nodejitsu, OpenShift等.

安裝Heroku

1. 從這裡註冊一個免費賬號
2. 下載Heroku toolbelt, 或者直接使用以下指令在Ubuntu中下載
   bash
$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

3. 觸發安裝
   bash
$ heroku --version

4. 驗證安裝成果
   bash
$ 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金鑰對生成並上傳公鑰的工作)
   bash
$ heroku login


使用Heroku提交Node.js應用

首先需要保證雲端的執行環境與本地開發環境一致

具體的是在package.json中新增一個engines配置塊, 指明node和npm的版本, 如果不清楚的話, 還是確認一下比較好:

$ node --version
$ npm --version

下面是示例的package.json檔案:

{
  "name": "Loc8r"
  ...
  "engines": {
    "node": "~4.6.0",
    "npm": "~2.15.9"
  },
  ...
}

建立一個雲端啟動指令碼

具體來說就是建立一個啟動指令碼, 指明我們應用的型別以及啟動指令, 對於Node.js應用來說, 需要在應用的根目錄下建立一個名為Procfile的檔案, 示例內容如下:

web: npm start

使用heroku local進行本地驗證

heroku local的前身是foreman, 但是現在的heroku toolbelt中已經用前者替換掉了了後者, 詳見如下官方通知

heroku local工具是用來在提交應用前進行本地驗證的, 使用heroku local啟動應用前需要先關閉本地應用, 然後使用以下指令啟動:

$ heroku local web

程式成功啟動後會監聽在5000埠, 我們可以通過localhost:5000來訪問, 顯示效果應與之前本地直接執行相同.

將應用託管到Heroku

首先需要初始化一個git倉庫, 新增.gitignore檔案, 推薦使用這裡自動生成(鍵入Node即可).

然後在雲端建立一個heroku應用容器(隱式完成了本地倉庫的關聯)

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

推送到遠端倉庫

$ git push heroku master

在heroku雲端用測試機(dyno)來執行部署的程式

每位使用者都會免費獲得一個可用的web測試機, 使用如下指令來開啟它

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

線上瀏覽部署情況

$ heroku open

自動在雲端的網址上看到部署的應用的情況

之後修改了應用程式碼後, 只需要push到heroku容器的master分支, 就會自動更新並部署.