前端命令部署包至服务器

背景

由于电建二期子应用较多，且子应用并未配置jenkins，每次部署都需要手动打包，手动部署上去，非常麻烦。所以做了前端一键自动部署，来减少部署项目所带来的时间浪费。

deploy cli

项目安装方式

deploy-cli-service 可以通过全局安装或本地安装两种方式进行安装。

1、全局安装

npm install deploy-cli-service -g

2、项目本地安装

npm install deploy-cli-service --save-dev

3、验证安装，查看版本号

deploy-cli-service -v

注：执行 deploy-cli-service -v 命令可能会出现以下情况

image.png

解决办法：

3.1、以管理员身份运行PowerShell

3.2、执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的

3.3、执行：set-ExecutionPolicy RemoteSigned

3.4、再次执行：get-ExecutionPolicy，显示 RemoteSigned 则表示可以了

3.5、再次执行deploy-cli-service -v，可显示版本号

image.png

4、本地项目安装验证

npx deploy-cli-service -v

image.png

初始化配置文件

1、在项目根目录执行 deploy-cli-service init 进行初始化

deploy-cli-service init

image.png

deploy-cli-service init命令执行后项目目录下会出现一个名为deploy.config的文件，文件内部的配置可修改

注：如果电脑没有找到本地私钥地址或文件，打开Git Bash，在控制台中输入以下命令进行生成

$ ssh-keygen -t rsa -C "youremail@example.com"

image.png

注：由于配置文件中privateKey指的是本地私钥地址，该文件位置会有差异，避免重复提交，代码冲突，此文件git不做监控

image.png

配置部署命令

把 "deploy:test": "deploy-cli-service deploy --mode test"," 写入到 package.json中的script里

image.png

控制台执行命令则会自动进行打包部署

注：配置文件中区分环境打包，--mode xxx，比如此处命令执行内容"deploy:test": "deploy-cli-service deploy --mode test"，--mode test是以测试环境为准，会找到配置文件中test模块

image.png

更新前端包

控制台输入 npm run deploy:test

image.png

集群部署

deploy-cli-service deploy 或者使用 deploy-cli-service d

注意：集群配置需要在 deploy-cli-service 中配置 cluster 字段（如：cluster: ['test']）

image.png

更新验证

通过打包时间和功能验证，发现前端包已经更新完成。

image.png

优点

多环境配置：支持针对开发、测试、生产等多个环境的差异化部署设置。

一键初始化配置：通过命令快速生成部署配置文件deploy-config.js，极大减轻配置负担。

智能部署：自动化执行打包、上传、替换等部署步骤，支持SSH连接进行安全传输。

集群部署：允许配置集群部署策略，一键同步至多个服务器。

安全性：提供选项避免密码明文存储，部署时动态输入，增加安全性。

灵活性：用户可以自定义脚本、是否删除远端及本地文件等细节。