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

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

什么时候使用自动化部署

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

自动化部署原理

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

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

自动化部署流程图

开始开发

搭建整体架子

初始化项目

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"
  });
})()

::: tip 提示
经过一段时间的开发，开发完成
:::

服务器部署

服务器部署文档

项目地址

自动化部署程序