使用 NodeJs + TypeScript 开发一个自动化部署程序

• 前端工程化已经很普遍了，让我们来开发一个自动化部署程序。

什么时候使用自动化部署

• 当你需要节省时间时
  • 自动化部署主要可以节省你打包和上传服务器的时间。
  • 如果你想节省上线时间，则不需要自动化部署，因为自动化部署不一定有你本地上传快。
• 当你需要节省服务器的内存时
  • 自动化部署势必会占用你服务器的内存和 CPU 使用率。

自动化部署原理

• 当你在提交代码后，Git 仓库通过 Webhooks 发送一个 POST 请求到你的服务器。
• 当你的服务器程序接受到 Webhooks 的请求会执行如下操作：
  • 查看是否存在项目：
    • 存在：在服务器指定目录拉取项目。
    • 不存在：克隆项目到服务器指定目录。
  • 安装依赖。
  • 执行打包命令。
  • 打包完成。
• 自动化部署成功。

提示

至于如何配置 Webhooks，请看我的上一篇博文的下面

自动化部署流程图

start=>start: 开始
submitCode=>operation: 提交代码
webhooksRequest=>operation: Webhooks 发送 POST 请求
serverReceive=>operation: 服务器程序接收请求
isExist=>condition: 是否存在项目？
existed=>operation: 在服务器指定目录拉取项目
nonexist=>operation: 克隆项目到服务器指定目录
install=>operation: 安装项目依赖
installFinish=>inputoutput: 项目依赖安装完成
build=>operation: 执行打包命令
buildFinish=>inputoutput: 打包完成
success=>inputoutput: 自动化部署成功
end=>end: 结束

start->submitCode->webhooksRequest->serverReceive->isExist
isExist(yes)->existed->install
isExist(no)->nonexist->install
install->installFinish->build->buildFinish->success->end

开始开发

搭建整体架子

初始化项目

tsc --init
npm init -y

安装项目依赖

• execa：让 NodeJs 执行 Shell 命令。
• express：NodeJs 的框架。
• module-alias：使用 alias 引入文件。
• multiparty：接收 post 请求参数。
• yamljs：识别 YAML 文件。
• @types/node：在 NodeJs 里识别 TypeScript。
• clean-webpack-plugin：清理打包目录。
• nodemon：本地执行 node 程序。
• webpack：webpack。
• webpack-cli：webpack 脚手架。

npm i -S execa express module-alias multiparty yamljs
npm i -D @types/node clean-webpack-plugin nodemon webpack webpack-cli

配置 webpack

点击查看 webpack.config.js

const { resolve } = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const config = {
  mode: 'production',
  entry: resolve(__dirname, './temporary/index.js'),
  output: {
    path: resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './temporary')
    }
  },
  target: 'node',
  externals: {},
  plugins: [new CleanWebpackPlugin()]
}
module.exports = config

配置 script 命令

{
  "scripts": {
    "start": "start cmd /k npm run dev:nm & npm run dev:ts",
    "dev:ts": "tsc -p tsconfig.json -w",
    "dev:nm": "nodemon temporary -w",
    "serve": "pm2 start dist -n automated",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

NodeJs 执行 shell 命令

;(async () => {
  // clone 项目到本地
  // output：项目 clone 指定目录
  await execa('git', ['clone', 'clone地址'], {
    cwd: output,
    stdio: 'inherit'
  })
})()

提示

经过一段时间的开发，开发完成

服务器部署

• 服务器部署文档

项目地址

• 自动化部署程序