前端项目添加 打包脚本 部署脚本 生成改动日志脚本

打包脚本

在 package.json 添加

// ..
"zip": "zip -r dist-$(git rev-parse --abbrev-ref HEAD)-$npm_package_name-$npm_package_version-$(date +'%Y_%m_%d').zip dist/ && open .",
"bz": "npm run build && npm run zip"

然后运行 npm run bz 就能直接打开打包好的zip包目录

部署脚本

首先需要目标服务器运行sshd服务，然后添加部署脚本来执行

类unix系统安装sshd服务

懂得都懂 不懂Google

对于Windows需要安装、启动sshd服务，参考这个: 安装适用于 Windows 的 OpenSSH，安装截图

设置-系统-可选功能 搜索ssh 添加 openssh服务器

然后启动服务

测试一下 ssh 用户名@ip 能连上就好了

在 package.json 添加

"bscp": "npm run build && scp -r dist rst@10.50.16.81:\\E:/LMS/nginx/html/admin",

把 服务器的 用户@地址:路径 修改一下就可以了

运行 npm run bscp 就会打包 上传文件夹到对应服务器 可能需要输入服务器密码

PS:首次连接输入yes就好了

# ..
The authenticity of host '10.50.16.22 (10.50.16.22)' can't be established.
ED25519 key fingerprint is SHA256:OMzihK7EXGWy2Kj6nek+YzaN3xyOR7jE+OWsAk6muiw.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
# ..

对于Windows服务器 jenkins的部分自动化部署

安装配置完Jenkins后自动添加一步部署dist文件夹到Windows服务器上

Jenkins的docker需要一个sshpass的工具，可以docker（ubuntu）宿主机（ubuntu）安装了拷进去 参考这个 How to pass password to scp?

添加部署脚本运行:

pipeline {
    agent any
    tools {nodejs "nodejs18.10.0"}
    parameters {
        gitParameter branchFilter: 'origin/(.*)',defaultValue: 'master',name: 'branch',type: 'PT_BRANCH'
    }
    stages {
        stage('拉取代码') {
            steps {
                echo '拉取代码'
                git branch: "${params.branch}", credentialsId: 'xxxx-yyyy-zzzz', url: 'https://codeup.aliyun.com/xxxx/node/pepper.git'
            }
        }
        stage('编译构建') {
            steps {
                sh "node -v && npm -v"
                sh "rm -rf dist"
                echo "${params.cmd}"
                script {
                    if (params.env == 'vue3') {
                        sh "${params.cmd}"
                    }else {
                        sh "npm install && npm run ${params.action}:${params.app}"
                    }
                    manager.addShortText("${params.branch}")
                }
            }
        }
      // 添加这个
        stage('部署') {
            steps {
                echo "${params.server}"
                sh "cd packages/admin && sshpass -p '<改成你的服务器密码>' scp -r dist <改成你的服务器用户名>@${params.server}"
            }
        }
      // 。
    }
}

params.server作为Choice Parameter，参数参考：

10.50.16.81:E:/XXX/nginx/html/admin
10.50.16.22:C:/YYY/nginx/html/admin

不用sshpass，别的思路就是用公钥和私钥，在Windows上 C:\Users\<用户名>\.ssh\authorized_keys文件里追加docker中的公钥文件内容，需要进Jenkins docker生成，一般会在/root/.ssh/id_rsa.pub这样，但是docker重启会销毁，不过sshpass也是

当然Windows的ssh公钥还有一个需要注意就是在C:\ProgramData\ssh\sshd_config中删除最后2行，参考这个SSH免密登录（公钥登录）到win10（解决authorized_keys无效的问题）:

Match Group administrators
       AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys

然后重启ssh服务

生成改动日志脚本

前端项目根据git提交记录自动生成 CHANGELOG.md

自动打包压缩重命名,简化项目开发流程

配置

首先需要全局安装conventional-changelog-cli 安装指令:

npm install -g conventional-changelog-cli

配置 package.json:

"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"zip": "zip -r dist-$(git rev-parse --abbrev-ref HEAD)-$npm_package_name-$npm_package_version-$(date +'%Y_%m_%d').zip dist/ && open .",
"bz": "npm run build && npm run zip"

工作流程

1. 提交更改
2. 修改 package.json 文件中的 version 值
3. 执行 package.json 文件中的 changelog 脚本
4. 提交 package.json 和 CHANGELOG.md 文件
5. 打标签
6. push到远程仓库

使用脚本

执行 npm run changelog, 会在根目录生成或者追加更改日志到 CHANGELOG.md 文件

执行 bz, 会执行build并打包为zip压缩包路径 压缩包命名为 dist-<分支名>-<包名>-<包版本>-<年_月_日>.zip

注意⚠️ Mac自带 open 指令来打开文件夹其他系统自己想办法

参考

GitHub仓库 conventional-changelog

changelog推荐工作流程文档

Angular约定式提交规范

<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

基于 Angular 约定中推荐的commit类型:
fix:、 feat:、build:、chore:、 ci:、docs:、style:、refactor:、perf:、test:

fix: 类型 为 fix 的提交表示在代码库中修复了一个 bug（这和语义化版本中的 PATCH 相对应）。
feat: 类型 为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。
build: 用于修改项目构建系统，例如修改依赖库、外部接口或者升级 Node 版本等；
chore: 用于对非业务性代码进行修改，例如修改构建流程或者工具配置等；
ci: 用于修改持续集成流程，例如修改 Travis、Jenkins 等工作流配置；
docs: 用于修改文档，例如修改 README 文件、API 文档等；
style: 用于修改代码的样式，例如调整缩进、空格、空行等；
refactor: 用于重构代码，例如修改代码结构、变量名、函数名等但不修改功能逻辑；
perf: 用于优化性能，例如提升代码的性能、减少内存占用等；
test: 用于修改测试用例，例如添加、删除、修改代码的测试用例等。

SemVer 语义化版本 2.0.0

主版本号.次版本号.修订号-先行版本号或版本编译信息

前端 CHANGELOG 生成指南

适用于 Windows 的 OpenSSH 入门 | Microsoft Learn

scp from Linux to Windows [closed]