本教程 整體開發環境為 nodejs nodejs.org/en/
本教程 涉及到的2個專案的部署採用 pm2 pm2.keymetrics.io/
本教程 涉及到的2個專案的埠代理採用 nginx nginx news
本教程 涉及到的2個專案的 git程式碼託管為 碼雲 碼雲 - 開源中國
本教程 涉及到的mock專案的自動化部署基於的碼雲平臺的webhook回撥, 使用說明在這裡 碼雲平臺幫助文件_V1.2
本教程 含有2個專案, 包括:
1. mock伺服器 涉及到的知識有:
- REST API伺服器 json-servergithub.com/typicode/js…
- 生成隨機資料 mockjsMock.js
- 自動化構建工具 gulpwww.gulpjs.com.cn/
2. mock服務自動化部署指令碼 涉及到的知識有:
- git程式碼自動化部署 webhook 碼雲平臺幫助文件_V1.2
- nodejs child_process模組 (用於執行shell命令)
- nodejs web應用框架 expressexpressjs/express
- express 中介軟體 body-parserexpressjs/body-parser (用於post引數的解析)
本教程 涉及的專案中 依賴庫的安裝均使用淘寶映象代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org複製程式碼一. mock伺服器專案的實現
mock伺服器專案整體目錄
具體流程為:
1. 初始化一個nodejs專案
npm init複製程式碼2. 專案的package.json檔案如下, 在根目錄執行 cnpm install 安裝所有依賴庫
{
"name": "mock-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"mock": "gulp mock"
},
"repository": {
"type": "git",
"url": "git@git.oschina.net:xxx/xxx.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"json-server": "^0.11.2",
"mockjs": "^1.0.1-beta3",
"browser-sync": "^2.18.12",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}
}
複製程式碼3. 在 /mock/ 目錄下 建立以下3個檔案
db.js 資料來源檔案
routes.js 介面路由
server.js json-server服務
# db.js
var Mock = require('mockjs')
var Random = Mock.Random
module.exports = {
userInfo: Mock.mock({
'code': 1,
'data': {
'uid': '582028',
'username': 'sufaith',
'phone': '12345678910'
}
})
}
複製程式碼# routes.js
module.exports = {
'/getUserInfo': '/userInfo'
}
# server.js
const jsonServer = require('json-server')
const db = require('./db.js')
const routes = require('./routes.js')
const port = 3000
const server = jsonServer.create()
const router = jsonServer.router(db)
const middlewares = jsonServer.defaults()
const rewriter = jsonServer.rewriter(routes)
server.use(middlewares)
// 將 POST 請求轉為 GET
server.use((request, res, next) => {
request.method = 'GET'
next()
})
server.use(rewriter) // 注意：rewriter 的設定一定要在 router 設定之前
server.use(router)
server.listen(port, () => {
console.log('open mock server at localhost:' + port)
})
複製程式碼4.本地修改資料時為了實時檢視效果, 使用gulp監聽檔案資料的更新,自動重啟json-server
# gulpfile.js
const path = require('path')
const gulp = require('gulp')
const nodemon = require('gulp-nodemon')
const browserSync = require('browser-sync').create()
const server = path.resolve(__dirname, 'mock')
// browser-sync 配置，配置裡啟動 nodemon 任務
gulp.task('browser-sync', ['nodemon'], function () {
browserSync.init(null, {
proxy: 'http://localhost:3000', // web端本地測試用,這裡的埠和 webpack 的埠一致
port: 3001
})
})
// browser-sync 監聽檔案
gulp.task('mock', ['browser-sync'], function () {
gulp.watch(['./mock/db.js', './mock/**'], ['bs-delay'])
})
// 延時重新整理
gulp.task('bs-delay', function () {
setTimeout(function () {
browserSync.reload()
}, 1000)
})
// 伺服器重啟
gulp.task('nodemon', function (cb) {
// 設個變數來防止重複重啟
var started = false
var stream = nodemon({
script: './mock/server.js',
// 監聽檔案的字尾
ext: 'js',
env: {
'NODE_ENV': 'development'
},
// 監聽的路徑
watch: [
server
]
})
stream.on('start', function () {
if (!started) {
cb()
started = true
}
}).on('crash', function () {
console.error('application has crashed!\n')
stream.emit('restart', 10)
})
})
複製程式碼5. 建立pm2所需的 配置檔案 process.json
#process.json
{
"apps": [
{
"script": "mock/server.js",
"error_file" : "pm2_log/error.log",
"out_file" : "pm2_log/out.log",
"merge_logs" : true,
"log_date_format" : "YYYY-MM-DD HH:mm Z"
}
]
}
複製程式碼6. 上傳至線上伺服器, 進入專案根目錄, 執行pm2執行命令
pm2 start process.json複製程式碼然後在控制檯執行 pm2 list 命令, 如果出現以下,則證明已開啟後臺執行
7. 使用nginx開啟反向代理, 使用域名訪問 (不需要的可以跳過該步奏)
二. mock服務自動化部署指令碼的實現
具體流程為:
1. 新建nodejs專案, 用於接收 webhook回撥
node init複製程式碼2. 專案的package.json檔案如下, 在根目錄執行 cnpm install 安裝所有依賴庫
{
"name": "mock_webhook",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"body-parser": "^1.17.2",
"express": "^4.15.3"
}
}
複製程式碼3. 編寫app.js用於接收webhook回撥地址, 以及自動執行shell命令
// app.js
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
// 衍生一個 shell 並在 shell 上執行命令，當完成時會傳入 stdout 和 stderr 到回撥函式
const exec = require('child_process').exec
// mock伺服器專案地址
const projectPath = '/usr/local/www/mock-server'
// webhook 回撥時攜帶的密碼,防止URL被惡意請求
const webhookPassword = 'test123456'
// 進入到mock伺服器專案, 並執行 git pull的shell命令
const cmd_str_gitPull = `cd ${projectPath} && git pull origin master`
// 重啟mock伺服器的shell命令
const cmd_str_restartJsonServer = `pm2 restart server`
const hostname = '127.0.0.1'
const port = 3001
app.post('/webhook', (req, res) => {
try {
let body = req.body
if(body.hook_name === 'push_hooks') {
if(body.password === webhookPassword) {
exec(cmd_str_gitPull, (error, stdout, stderr) => {
if(error) {
res.send(`exec gitPull error ${error}`)
}else {
exec(cmd_str_restartJsonServer, (error, stdout, stderr) => {
if (error) {
res.send(`exec restartJsonServer error ${error}`)
}else {
res.send('restartJsonServer success')
}
})
}
})
}else {
res.send('hook password error')
}
}else {
res.send('hook_name is not push_hooks')
}
}catch(err) {
res.send(`exception >>>${err}`)
}
})
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}`)
})
複製程式碼4. 將該專案上傳至 和mock服務同一臺線上伺服器中,進入專案目錄, 使用pm2部署
pm2 start app.js複製程式碼然後在控制檯執行 pm2 list 命令, 如果出現以下,則證明已開啟後臺執行
5. 使用nginx開啟反向代理, 使用域名訪問 (不需要的可以跳過該步奏)
6. 在碼雲平臺中, 自己的mock伺服器專案 的webhook管理中,配置自動化部署的post地址及密碼, 點選測試檢視是否響應
