新增前后端自动部署方案文章
This commit is contained in:
江志雄
parent
85fe298c7c
commit
4dbd4a3426
132
source/_posts/node前后端自动部属方案.md
Normal file
132
source/_posts/node前后端自动部属方案.md
Normal file
@ -0,0 +1,132 @@
|
||||
---
|
||||
title: node前后端自动部属方案
|
||||
date: 2018-07-30 11:41:57
|
||||
tags:
|
||||
---
|
||||
# 简介
|
||||
|
||||
前后端分离的概念现在已经应用的比较广了，它使我们的工作更加的高效，也提升了后期代码的可维护性，减少人力成本。
|
||||
|
||||
近年来 nodeJS 的出现，更让 js 提升到了一个新的高度，同时衍生出了很多。grunt、gulp、webpack、parcel这些工具都是建立在 node 的基础上实现的，它们极大的提升了我们的开发的效率。
|
||||
|
||||
在一个公司，开发一般会分为几个阶段：
|
||||
|
||||
> 开发 -> 开发部署 -> 开发测试 -> 测试部署 -> 测试测试 -> 预发布部署 -> 预发布测试 -> 正式上线
|
||||
基本上每次测试之前，我们都有一个部署阶段，而部署阶段，往往都依赖运维。那么问题来了，有没有一种简洁高效的方案，让我们从运维那个层面脱离出来，实现开发到上线，或者是开发至预上线的自动部署？答案是肯定的，在 node 的帮助下，这次我们可以装这波逼...
|
||||
|
||||
## 实现思路
|
||||
|
||||
通过 push git 上的代码，webhooks 向你的 ECS 发送请求，ECS 接收到请求后，重新拉取 git 上的最新数据，实现自动部署。
|
||||
|
||||
## 开发准备
|
||||
|
||||
* 腾讯云 ECS （centOS 7.2 64位）
|
||||
* GitHub 账号
|
||||
* node 基本知识
|
||||
* pm2、git
|
||||
|
||||
## 第一步
|
||||
|
||||
首先，需要有一个服务器来模拟场景，如果是新手，建议新建一个账号，不要直接在 root 权限下运行。然后在服务器上安装：git、pm2 和 node。新建一个项目文件夹，npm 初始化后，在里面创建 app.js 文件，内容如下：
|
||||
|
||||
```js
|
||||
var express = require('express')
|
||||
var app = express()
|
||||
var bodyParser = require('body-parser')
|
||||
var path = require('path')
|
||||
var { exec } = require('child_process')
|
||||
// var fetch = require('node-fetch')
|
||||
|
||||
const PORT = 3008
|
||||
|
||||
app.use(bodyParser.json())
|
||||
|
||||
app.post('/CI', (req, res, next) => {
|
||||
var project = 'travis_demo'
|
||||
let PATH = path.resolve(__dirname, '../' + project)
|
||||
|
||||
var cmd = `cd ${PATH} && git reset --hard && git pull && pm2 restart ${project}`
|
||||
|
||||
// 将你想要运行的命令行代码输出运行
|
||||
exec(cmd, (err, stdout, stderr) => {
|
||||
if (err) {
|
||||
res.writeHead(500)
|
||||
res.end('Server Internal Error.')
|
||||
throw err
|
||||
}
|
||||
console.log(`stdout: ${stdout}`);
|
||||
console.log(`stderr: ${stderr}`);
|
||||
res.writeHead(200)
|
||||
res.end('this is good~')
|
||||
})
|
||||
})
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log('this app is running at port:' + PORT)
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
## 第二步
|
||||
|
||||
给云主机添加 ssh ，具体教程百度，我博客里面也有，好了之后将上面的接口暴露给你想自动部署的项目，位置在该项目下 setting 选项下的 Webhooks，你可以设置它在什么场景下才会调用这个接口。
|
||||
|
||||
|
||||
## 第三步
|
||||
|
||||
将这个项目通过 git clone 拉取到 ECS，安装依赖后，在项目根目录新建一个 bash 脚本（建议以该项目的文件夹名称命名），然后用 pm2 将该项目通过 pm2 start bash.sh 跑起来。
|
||||
|
||||
## 第四步
|
||||
|
||||
到了这一步，基本上已经 OK 了~
|
||||
|
||||
> 但是！！！
|
||||
|
||||
这样逼格还是不够高，不能满足我们的需求。我们捋一捋，一般情况下，项目是否部署成功，需要有个消息推送通知，这样我们可以及时的知道该项目目前的状态。钉钉为我们提供了这个功能，它可以让我们接入自定义的 webhooks。接下来我们将 ECS 的接口内容修改为：
|
||||
|
||||
```js
|
||||
app.post('/CI', (req, res, next) => {
|
||||
var project = 'travis_demo'
|
||||
let PATH = path.resolve(__dirname, '../' + project)
|
||||
|
||||
var cmd = `cd ${PATH} && git reset --hard && git pull && pm2 restart ${project}`
|
||||
|
||||
// 将你想要运行的命令行代码输出运行
|
||||
exec(cmd, (err, stdout, stderr) => {
|
||||
if (err) {
|
||||
res.writeHead(500)
|
||||
res.end('Server Internal Error.')
|
||||
throw err
|
||||
}
|
||||
let mes = {
|
||||
"msgtype": "text",
|
||||
"text": {
|
||||
// 在钉钉上推送的自定义消息
|
||||
"content": `我就是我, @1825718XXXX 是不一样的烟火`
|
||||
}
|
||||
}
|
||||
}
|
||||
// access_token 是创建机器人的那个人才能看见
|
||||
fetch('https://oapi.dingtalk.com/robot/send?access_token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(mes)
|
||||
}
|
||||
).then(response => response.json())
|
||||
.then(json => console.log(json));
|
||||
console.log(`stdout: ${stdout}`);
|
||||
console.log(`stderr: ${stderr}`);
|
||||
res.writeHead(200)
|
||||
res.end('this is good~')
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
现在就是见证奇迹的时刻，当你每次 push 代码到 git 的时候，ECS 会向钉钉推送消息，如下图所示：
|
||||
|
||||
|
||||
|
||||
## 总结
|
||||
|
||||
这篇文章总结的内容还只是从一个中端的角度思考的，对目前这种实现的方法唯一担心的地方就是安全，毕竟一万个人有一万种想法，所以才需要更深入的学习将它的坑位全部填满，待到技术成熟之日，就是抢后端饭碗之时~
|
||||
@ -12,17 +12,17 @@ comment: false
|
||||
## 工作经历
|
||||
|
||||
* 南昌·午逅科技
|
||||
①、H5 活动模块开发。
|
||||
①、H5 活动开发
|
||||
> 2017.06 -- 2017.09
|
||||
|
||||
* 杭州·机蜜
|
||||
①、各大类型平台、活动、协议模块合作开发
|
||||
①、各大类型平台、活动、协议模块的合作开发
|
||||
②、基础组件开发
|
||||
> 2017.10 -- 至今
|
||||
|
||||
## 技术栈
|
||||
|
||||
前端技术框架很多，取其精华，抛弃糟蹋，目前只列出我目前比较青睐，并且会深入研究的个人技术方案。
|
||||
前端技术框架很多，取其精华，目前只列出我目前比较青睐，并且未来会深入研究的技术方案。
|
||||
|
||||
### 前端
|
||||
|
||||
@ -49,7 +49,6 @@ comment: false
|
||||
|
||||
### 自动化工具
|
||||
|
||||
* gulp
|
||||
* webpack
|
||||
* parcel
|
||||
|
||||
@ -80,16 +79,16 @@ comment: false
|
||||
|
||||
> 看书
|
||||
> 健身
|
||||
> 摇滚
|
||||
> 音乐
|
||||
|
||||
## 自我介绍
|
||||
|
||||
介绍这东西大都是虚的，你需要的是和我面对面的交流和长时间的相处。
|
||||
介绍这东西挺虚的，你需要的是和我面对面的交流和长时间的相处。
|
||||
|
||||
## 未来的目标
|
||||
|
||||
* 工作：专注于自己喜欢的领域，然后精通它。
|
||||
* 生活：世界很大，不要只是生活在自己的小小世界里。
|
||||
* 理想：做一件能改变他人、乃至影响世界的事。
|
||||
* 生活：世界很大，不要只生活在自己的小小世界里。
|
||||
* 理想：至少做一件能改变他人、乃至影响世界的事。
|
||||
|
||||
{% aplayer "日落大道" "梁博" "http://orjedzer5.bkt.clouddn.com/blog/song/%E6%A2%81%E5%8D%9A%20%E6%97%A5%E8%90%BD%E5%A4%A7%E9%81%93.mp3" "autoplay" %}
|
||||
|
||||
@ -35,7 +35,7 @@ scheme: Paradox
|
||||
uiux:
|
||||
slogan: "爱音乐！爱生活！"
|
||||
theme_color: "#77546f"
|
||||
theme_sub_color: ""
|
||||
theme_sub_color: "#77546f"
|
||||
hyperlink_color: "#679cc5"
|
||||
button_color: "#1b1d3a"
|
||||
android_chrome_color: "#0097A7"
|
||||
@ -146,8 +146,8 @@ sns_share:
|
||||
# Sidebar Customize
|
||||
sidebar:
|
||||
dropdown:
|
||||
Email Me:
|
||||
link: "710328466@qq.com"
|
||||
我的邮箱:
|
||||
link: "#"
|
||||
icon: email
|
||||
homepage:
|
||||
use: true
|
||||
@ -162,14 +162,14 @@ sidebar:
|
||||
icon: chrome_reader_mode
|
||||
divider: false
|
||||
pages:
|
||||
时间轴:
|
||||
link: "/timeline"
|
||||
icon: schedule
|
||||
divider: true
|
||||
标签:
|
||||
link: "/tags"
|
||||
icon: label
|
||||
divider: false
|
||||
时间轴:
|
||||
link: "/timeline"
|
||||
icon: schedule
|
||||
divider: true
|
||||
图库:
|
||||
link: "/gallery"
|
||||
icon: class
|
||||
@ -177,11 +177,11 @@ sidebar:
|
||||
我的足迹:
|
||||
link: "/footprint"
|
||||
icon: flight_takeoff
|
||||
divider: true
|
||||
About:
|
||||
divider: false
|
||||
关于博主:
|
||||
link: "/about"
|
||||
icon: face
|
||||
divider: false
|
||||
divider: true
|
||||
article_num:
|
||||
use: true
|
||||
divider: false
|
||||
@ -214,6 +214,7 @@ comment:
|
||||
valine_notify: true
|
||||
valine_verify: true
|
||||
valine_placeholder: 说说你的感想~
|
||||
valine_pageSize: 10
|
||||
|
||||
# Search Systems
|
||||
# Available value:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user