摘要：经过几次更新后，key-upload这个npm包终于可以完全包含我本地多个项目下的keyUpload中的所有功能了！目前我已经把公司所有项目都跑了个遍，包含：vue2项目、vue3项目、vue2升级到Vite2项目、命令行版的uni-app（vue2版）、命令行版的uni-app（Vite版），每个项目的多环境打包都比较顺利。我也希望这个插件能够帮助到各位需要部署前端代码到服务器上的看官，喜欢的别忘记点个star哈！

一、背景

起因是公司项目太多，且每个项目有4套环境，上线前的分支合并和打包这种琐事儿都是由我亲自经手。为了解决频繁打包、漫长的等待打包完成和手动上传代码到服务器、手动复制正式代码到git仓库并推送，这一系列重复且低效的工作量，于是我开始积极寻找解决方案。试用过deploy-cli-service这个插件，经测试发现跟自己的需求相差较大。无果之下，自己开启造轮子之旅......

断断续续，我记录了3篇笔记，分别是：
《记一次手动配置前端一键自动部署代码到服务器上的经历》、
《前端一键部署代码到服务器并播放音乐》、
《优化前端一键自动部署代码到服务器插件，支持上传到git仓库和备份解压》。

在过去的一年里，每次打包上线，我只需要执行一行代码就解放了双手，简直不要太爽！！！

二、做成npm包的想法

公司的项目复制来复制去，维护每个项目下的keyUpload目录已经浪费了我不少时间。那何不做成npm包呢？这样每当keyUpload有修改或更新，只需要维护npmjs仓库中的包就行了。

说干就干，我又调试几个晚上，key-upload这个库终于能在项目中使用了，耶！

三、已实现的功能

先来看一个这个key-upload包支持的功能吧。

- 一键打包前端代码到Linux服务器(目前支持4个环境，分别是：dev:开发环境, test:测试环境, pre:预上线环境, prod:正式环境)
- 支持密码文件登录（为了避免密码轻易泄露，此处必须是密码文件！就是将密码保存磁盘上的一个txt文件中，这样就降低了在分享仓库时泄露明文密码的风险。）
- 支持密钥登录
- 支持用vue-cli命令行创建的uni-app项目(Vue3/Vite版)打包h5端代码到服务器（0.1.3已支持）
- 支持用vue-cli命令行创建的uni-app项目(Vue2版)打包h5端代码到服务器（0.1.4）
- 支持用vue-cli命令行创建的uni-app项目在H5端自定义打包目录（0.1.5）
- 打包成功后自动连接服务器
- 连接服务器后自动删除服务器上指定目录(js|css|static)（可选）
- 删除完毕后自动上传本地代码到服务器（可选）
- 自动将代码打包成压缩包(dist.tar.gz)后上传到服务器（可选，推荐用压缩包，因为上传速度快！！！）
- 自动以YYYY-MM-DD的形式创建备份目录和解压代码（可选）
- 自动上传本地代码到git仓库（可选）
- 上传成功后自动播放一首随机音乐（可选）

如实说，以上功能完全解决了文章开头提到的痛点，也给我的工作带来了极大的便利！用一行代码解放双手，真香！！！

提醒一下，uni-app项目打包H5端的代码默认生成目录是/dist/build/h5哈，通过设置distPath参数可做到自定义目录。如图：uni-app项目H5端可自定义打包目录.png

四、支持的项目

说完了功能，再来说下支持的项目情况吧。

由于工作环境所限，目前仅测试了 vue2项目(非ts)、vue3项目(非ts)、Vite项目(非ts)，uni-app Vue3/Vite项目(0.1.3),uni-app Vue2项目(0.1.4版本)，其他项目未做测试。理论上是通用的。

五、快速上手

个人感觉，上手无压力。稍微复杂的地方就是要修改本地的配置文件，修改完后，咱们就可以用一行命令进行愉快的玩耍了。

5.1、两种安装方式

npm install key-upload -g // 全局安装
npm install key-upload --save-dev // 项目内安装

5.2、查看帮助

在cmd或Git Bash Here中执行以下命令。

5.2.1、全局安装时

key-upload -V // 查看当前版本号
key-upload -h // 查看可使用的命令

如图：全局安装后使用命令查看帮助.png

5.2.2、项目内安装时，需要在前面加npx

npx key-upload -V // 查看当前版本号
npx key-upload -h // 查看可使用的命令

项目内安装后使用命令查看帮助.png

5.3、创建配置文件 keyUpload.config.js

在项目根目录下打开cmd或Git Bash Here，输入以下命令并回车即可。

key-upload init // 全局安装时
npx key-upload init // 项目内安装时要加npx

/* 若是vue-cli创建的uni-app项目，建议使用下面的命令↓↓↓ */
key-upload initUniH5 // 全局安装时
npx key-upload initUniH5 // 项目内安装时要加npx

如图所示：用命令行创建配置文件.png
当出现“默认配置文件 keyUpload.config.js 已创建成功”字样时，表明创建成功。如果出现“默认配置文件 keyUpload.config.js 已存在”字样时，表明配置文件已存在，此时不需要重新创建。如果想重新创建，删除本地的 keyUpload.config.js 即可。

用Vscode等编辑器打开刚刚创建成功的keyUpload.config.js文件，默认代码如下：

#!/usr/bin/env node
// 公用配置，注释的内容无特殊需求可不用配置
const commonBase = {
  host: 'xx.x.x.x', // 服务器地址
  port: 22, // 服务器端口号
  username: 'root', // 服务器登录用户名
  password: 'D:\\xx\\xx\\xxx.txt', // 服务器登录密码路径，支持相对或绝对地址，优先使用密码
  privateKey: 'D:\\xxx\\xxx\\xxx.pem', // 密钥地址，与密码二选一均可
  // isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
  // autoplayMusic: true, // 项目上传成功后是否自动播放音乐（默认true）
  // deleteWebDirList: ['/css', '/js', '/static'], // 要删除的远程目录（默认为css|js|static）
  // dataBackup: 'dataBackup', // 远程备份目录，如果出现/，则以带/的为主，否则会用 webDir+dataBackup进行拼接（默认dataBackup）
  // nameZip: 'dist', // 打成压缩包后的本地文件名，线上的会为dist{time}（默认dist）
  // zipSuffix: '.tar.gz', // 压缩包后缀（默认为：.tar.gz）
  // gitDistPath: '', // 本地git仓库目录，示例: D:\\xxx\\xxx
}
const config = {
  name: '一键打包前端代码并部署到Linux服务器',
  // musicDir: 'D:\\2021\\music', // 本地音乐目录（项目上传成功后音乐会响起哦~）
  dev: {
    ...commonBase,
    name: '开发环境', // 环境名称
    distPath: '/dist/dev', // 本地打包后生成的目录。（Vue项目要跟outputDir保持一致；Vite项目要跟build.outDir保持一致；uni-app项目H5端默认为：/dist/build/h5）
    webDir: '/data/website/dev', // 服务器部署路径（不可为空或'/'）
    script: 'build:dev', // 打包命令，要在 /package.json 中的 scripts 内事先定义
  },
  test: {
    ...commonBase,
    name: '测试环境', // 环境名称
    distPath: '/dist/test', // 本地打包生成目录
    webDir: '/data/website/test', // 服务器部署路径（不可为空或'/'）
    script: 'build:test', // 打包命令
  },
  pre: {
    ...commonBase,
    name: '预上线环境',
    distPath: '/dist/pre',
    webDir: '/data/website/pre',
    script: 'build:pre',
  },
  prod: {
    ...commonBase,
    host: 'xxx.xxx.xxx.xxx', // 新的服务器地址
    password: '', // 密码为空时，则用密钥来连接服务器
    name: '正式环境', // 环境名称
    distPath: '/dist/prod', // 本地打包生成目录
    webDir: '/data/website/prod', // 服务器部署路径（不可为空或'/'）
    script: 'build:prod', // 打包命令
  },
}

module.exports = config

接下来看官只需要根据自己项目实际情况做一些修改即可。例如：host、password、webDir等

5.4、新增打包命令

用Vscode等编辑器打开项目中的package.json文件，找到scripts，根据项目实际情况添加以下命令。

/* vite项目，复制代码start ↓↓↓ */
"build:dev": "vite build --mode development",// 打包开发环境
"build:test": "vite build --mode test",      // 打包测试环境
"build:pre": "vite build --mode preshopv5",  // 打包预上线环境
"build:prod": "vite build",                  // 打包正式环境
/* vite项目，复制代码end ↑↑↑ */

/* vue2项目，复制代码start ↓↓↓ */
"build:dev": "vue-cli-service build --mode development",   // 打包开发环境
"build:pre": "vue-cli-service build --mode preshopv5",     // 打包测试环境
"build:test": "vue-cli-service build --mode test",         // 打包预上线环境
"build:prod": "vue-cli-service build",                     // 打包正式环境
/* vue2项目，复制代码end ↑↑↑ */

/* cli脚手架搭建的uni-app项目，复制代码start ↓↓↓ */
"build:dev": "vue-cli-service build --mode development",   // 打包开发环境
"build:pre": "vue-cli-service build --mode preshopv5",     // 打包测试环境
"build:test": "vue-cli-service build --mode test",         // 打包预上线环境
"build:prod": "vue-cli-service build",                     // 打包正式环境
/* cli脚手架搭建的uni-app项目，复制代码end ↑↑↑ */

/* 以下命令会正常打包项目并上传到服务器上 */
"key-upload:dev": "cross-env NODE_ENV=dev key-upload",    // 打包开发环境并上传到服务器
"key-upload:test": "cross-env NODE_ENV=test key-upload",  // 打包测试环境并上传到服务器
"key-upload:pre": "cross-env NODE_ENV=pre key-upload",    // 打包预上线环境并上传到服务器
"key-upload:prod": "cross-env NODE_ENV=prod key-upload",  // 打包正式环境并上传到服务器

/* 以下命令会正常打包项目并上传到git仓库上，【可不用配置】 */
"key-upload:prod:git": "cross-env NODE_ENV=prod key-upload git", // 如果想把代码上传到某git仓库，只需要在后面带上 git即可

/* 以下命令会打包成压缩包并上传到服务器上，【可不用配置】 */
"key-upload:dev:zip": "cross-env NODE_ENV=dev key-upload zip",   // 打包开发环境为压缩包并上传到服务器
"key-upload:test:zip": "cross-env NODE_ENV=test key-upload zip", // 打包测试环境为压缩包并上传到服务器
"key-upload:pre:zip": "cross-env NODE_ENV=pre key-upload zip",   // 打包预上线环境为压缩包并上传到服务器
"key-upload:prod:zip": "cross-env NODE_ENV=prod key-upload zip", // 打包正式环境为压缩包并上传到服务器

友情提示：如果觉得配置 git 和 zip 麻烦，可以不用配置，只需要在执行命令时，在最后面加上英文空格 + git或zip即可。

npm run key-upload:dev:git  等同于 npm run key-upload:dev git // 前者需要在packges.json中配置key-upload:dev:git，后者不需要
npm run key-upload:dev:zip  等同于 npm run key-upload:dev zip // 前者需要在packges.json中配置key-upload:dev:zip，后者不需要

5.5、查看连接服务器情况

接下来，我们要先测试下服务器的连接情况。

在项目根目录中打开cmd或Git Bash Here，输入以下命令并回车。

npm run key-upload:dev ssh   // 测试[开发]服务器连接情况
npm run key-upload:prod ssh  // 测试[正式]服务器连接情况

当出现连接服务器成功字样时，表示连接成功。耶！我们离成功越来越近了！如图：成功连接开发服务器.png

5.6、一行命令，打包项目到服务器

刚刚我们已经成功的连接了服务器，接下来就是见证奇迹的时刻：一行代码实现打包项目到服务器，上传成功后自动播放一首随机音乐！

怎么样，听起来是不是很神奇？？？

切换到cmd或Git Bash Here窗口，输入以下命令并回车。

npm run key-upload:dev:zip // 输入后回车（需要在packges.json中配置 key-upload:dev:zip ）
npm run key-upload:dev zip // 或者这样（不需要在packges.json中配置）
npm run key-upload:dev uniH5 // vue-cli创建的uni-app项目(Vue2版)H5端

此时，命令行窗口中会出现一堆信息。如图：一键打包并上传.png
稍等片刻，当音乐响起时，则表示上传成功哦！此时看官可以登录自己的服务器，验证这一奇迹发生。如图：上传成功后自动播放音乐.png

如果音乐没有响起，注意查看命令行窗口中是否有报错，然后再根据报错信息进行对应的修改。一般情况下，上一步能成功连接服务器，基本上这一步都没有问题，但也不排除其他配置有误的情况发生。

六、更新和维护

为了方便维护这个插件，我已经制作成npm包并上传到了www.npmjs.com网站上，源码也上传到了github上。关于文档说明，在npm仓库或github仓库首页都能看的到。如果看官在工作中有需要，欢迎使用哦！

npm库地址：https://www.npmjs.com/package/key-upload
github下载：https://github.com/yilingsj/key-upload

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2022-07-06/key-upload.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。