正文 

当前位置： 首页 > java > java教程

前端自动化部署的深度实践(代码片段)

wenbinjiang wenbinjiang     2023-04-22     533

关键词：

年前我也在自动化部署这方面下了点功夫，将自己的学习所得在自动化部署的一小步，前端搬砖的一大步这篇博客中做了分享。感谢两位网友@_shanks和@TomCzHen的意见，让我有了继续优化部署流程的动力。本文主要是在自动化部署流程中，对版本管理和流程合理性等方面做了一些改进，配合规范的工作流，使用体验更佳！

更新日志自动生成

之前我都是手动修改CHANGELOG.md，用来记录更新日志，感觉操作起来有点心累，也不是很规范。好在已有前人种树，于是我就考虑利用conventional-changelog-cli自动生成和更新CHANGELOG.md，真的好用！

技术图片

什么是conventional-changelog

Generate a changelog from git metadata

根据git元数据生成更新日志，而conventional-changelog-cli则是相关的命令行工具。

安装conventional-changelog-cli

npm install -g conventional-changelog-cli

初始化生成CHANGELOG.md

cd my-project
conventional-changelog -p angular -i CHANGELOG.md -s

以上命令是基于最后一次的Feature, Fix, Performance Improvement or Breaking Changes等类型的commit记录生成或更新CHANGELOG.md。如果你希望根据之前所有的commit记录生成完整的CHANGELOG.md，那么可以试试下面这条命令：

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

工作流

代码添加到暂存区

这一步没有什么特殊，日常撸代码，然后将工作区的内容添加到暂存区。

git add .

规范commit message

一个规范的commit message一般分为三个部分Header，Body 和 Footer。Header包含type, scope, subject等部分，分别用于描述commit类型，影响范围，commit简述。Body则是详细描述，可以分多行写。Footer主要用于描述不兼容改动（Breaking Change）或者关闭issue（Closes #issue）。

格式如下：

<type>(<scope>): <subject>

<body>

<footer>

举个栗子：

feat(支持自动部署): 结合conventional-changelog，配合部署脚本完成部署任务

conventional-changelog是一个很好的工具，用于自动生成changelog，再配上自定义的部署脚本，整个部署流程就显得更规范了

Breaking Change: 比较大的更新
Closes #315

其中，Header是必需的，Body和Footer可以省略。

大致了解规范后，就可以上工具了，这里我们用到的是commitizen。

npm install -g commitizen

接着在项目根目录运行以下命令：

commitizen init cz-conventional-changelog --save --save-exact

运行成功后，package.json会新增如下内容：

"devDependencies": 
  "cz-conventional-changelog": "^3.1.0"
,
"config": 
  "commitizen": 
    "path": "./node_modules/cz-conventional-changelog"

git commit这一步用git cz替代，cz就是指commitizen，通过交互式命令行完成commit操作。

PS D:
obinfrontendspa-blog-frontend> git cz
cz-cli@4.0.3, cz-conventional-changelog@3.1.0

? Select the type of change that you're committing: feat:     A new feature
? What is the scope of this change (e.g. component or file name): (press enter to skip) 支持自动部署
? Write a short, imperative tense description of the change (max 86 chars):
 (37) 结合conventional-changelog，配合部署脚本完成部署任务
? Provide a longer description of the change: (press enter to skip)

? Are there any breaking changes? No
? Does this change affect any open issues? No
[master ee41f35] feat(支持自动部署): 结合conventional-changelog，配合部署脚本完成部署任务
 3 files changed, 15 insertions(+), 3 deletions(-)

处理版本号，更新CHANGELOG

接着我们要更新npm包的版本号，结合npm version和conventional-changelog使用，可以同时更新CHANGELOG.md。

好的，我们先准备好脚本：

"scripts": 
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "node deploy",
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    "postversion": "npm run deploy"

根据实际版本情况选择更新patch/minor/major版本。假设我们更新的是minor版本号，那么操作命令如下：

npm version minor -m '特性版本更新'

执行这条命令会更新package.json中的version字段，

同时会执行conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md，更新CHANGELOG.md。

执行完这条命令后，可以看到CHANGELOG.md已经被修改了。

技术图片

npm钩子触发部署脚本

通过postversion钩子触发部署脚本node deploy，开始进行部署工作。deploy.js文件内容如下：

const  execFile  = require('child_process');

const version = process.env.npm_package_version;

execFile('deploy.sh', [version],  shell: true , (err, stdout, stderr) => 
    if (err) 
        throw err;
    
    console.log(stdout);
);

这里利用了nodejs的 child_process模块执行子进程，调用了execFile执行了 deploy.sh，并将npm包版本号作为参数传递给了deploy.sh。

deploy.sh文件内容如下：

#!/bin/bash
npm run build
htmldir="/usr/share/nginx/html"
uploadbasedir="$htmldir/upgrade_blog_vue_ts"
appenddir=$1
uploaddir="$uploadbasedir/$appenddir"
projectdir="/usr/share/nginx/html/blog_vue_ts"
scp -r ./dist/. txcloud:$uploaddir
ssh txcloud > /dev/null 2>&1 << eeooff
ln -snf $uploaddir $projectdir
exit
eeooff
echo done

以上命令主要做的事情是：

  • npm run build执行构建任务
  • 将构建得到的dist文件夹中的内容通过scp传输到服务器，通过版本号区分各个版本。
  • nginx配置的是监听80端口，指向/usr/share/nginx/html/blog_vue_ts，而我通过软连接将blog_vue_ts再次指向到upgrade_blog_vue_ts下的版本目录，如upgrade_blog_vue_ts/0.5.4。每次发布版本时，以上脚本会修改软连接，指向目标版本，如upgrade_blog_vue_ts/0.6.0，完成版本过渡。

我这里使用了软连接改进了之前的部署脚本，既可以在服务器保留各个历史版本文件夹，也不用考虑处理index.html与静态资源分离的问题。

强烈建议结合自动化部署的一小步，前端搬砖的一大步这篇文章一起看。

lrwxrwxrwx 1 root root   47 Feb  3 21:35 blog_vue_ts -> /usr/share/nginx/html/upgrade_blog_vue_ts/0.6.0

技术图片

如果要回退版本，也可以通过修改软连接的方式实现，还是比较方便的。

推送到remote

最后别忘了把代码push到远程仓库。

git push

更新日志changelog查看也变得很方便了，修改了什么内容一目了然，并且可以直接跳转到commit历史，issue等。

技术图片

番外

可以看到，我是通过deploy.js调用了deploy.sh。之前本想直接在npm scripts中调用deploy.sh并传入版本号参数的，但是试了几种写法都不行，这里也记录一下。

"deploy": "deploy.sh npm_package_version"
"deploy": "deploy.sh $npm_package_version"

看起来在npm scripts中调用sh脚本时，只能写字面量参数，传变量作为参数好像行不通。

下面这种字面量参数写法是可以的，但是就有点呆呆的感觉了，而且与自动化部署的主题不符。

"deploy": "deploy.sh 0.6.0"

所以我目前还是选择通过deploy.js作为中间者来调用deploy.sh的。

结语

需要承认的是，我以上所述的部署流程是以我的个人项目为例说明，可能不是很规范，但是也算是通过自己的理解和摸索，完整地搞了一套部署流程，并没有借用jenkins等工具。有了这段自动化部署的学习经历后，相信学习和使用jenkins会变得更轻松。接下来我会继续优化和规范自己的部署流程，jenkins理所当然会出现在我的计划表中。

我是Tusi，一个创业公司前端小leader，每天依然为写不完的业务代码烦恼，在打磨产品道路上沉淀技术，探索成长路线。如果你与我一样，正在思考自己的技术成长与价值，欢迎加我微信交流探讨，微信号ice_lloly。我会在公众号猿出道和小程序Tusi博客同步博客内容，快来撩我！

技术图片

自动化部署实践(代码片段)

...统1、规划2、实现3、总结和扩展4、在生产环境中应用1.2.1自动化部署环境1、开发环境开发者本地有 查看详情

自动化运维ansible实践(代码片段)

上篇提到了ansible基本安装、配置及命令行使用，这篇分享下ansible的高级用法即playbook，在生产环境如果需要完成负责任务，如大批量服务安装配置等，可以采用playbook方式来完成，高效且易于维护。第1章Playbook基本使用使用Playbo... 查看详情

自动化部署的一次实践(代码片段)

...。问题1：需要每次手动triggerbuild。解决1：在Bamboo上设置自动化的buildschedule。问题2：需要手动下载并解压build好的tar包。解决2：写一个downloadpackage的脚本。至此，上述的问题已经得到解决。解决Fix1:Configurebuildschedule->BambooBamboo... 查看详情

jenkinspipeline部署实践及重点问题分析(代码片段)

...自由风格或者maven风格来创建jenkinsitem，虽然也能实现自动化部署，但是面对相对复杂的构建需求时可能就不太好实现。一般正式的项目，除了基本的拉取代码、编译代码、运行junit、打包、启动或者重启外，可能... 查看详情

docker+jenkins+gitlab+django应用部署实践(代码片段)

...解决方案，应用好CI/CD可以大大的方便我们的日常工作，自动化快速的持续集成/持续交付为我们带来了应用开放的更快速度、更好的稳定性和更强的可靠性。二、拓扑环境2.1架构拓扑如上图实例，简单花了下流程拓扑：当研发pus... 查看详情

人工智能之华为云modelarts的深度使用体验与aigallery应用开发实践(代码片段)

...I开发者的一站式开发平台，提供海量数据预处理及半自动化标注、大规模分布式训练、自动化模型生成及端-边-云模型按需部署能力，帮助用户快速创建和部署模型，管理全周期AI工作流。“一站式”是指AI开发的各... 查看详情

前端vue+后端django项目创建以及自动部署流程(代码片段)

...运维的同学部署到测试和生产环境。DevOps可以让整个流程自动化，开发的同学只需要稍微会一些工具就可以完成部署的工作。前端Vue项目创建+自动部署准备工作：本地安装了Node、npm本地安装了WebStorm࿰ 查看详情

前端vue+后端django项目创建以及自动部署流程(代码片段)

...运维的同学部署到测试和生产环境。DevOps可以让整个流程自动化，开发的同学只需要稍微会一些工具就可以完成部署的工作。前端Vue项目创建+自动部署准备工作：本地安装了Node、npm本地安装了WebStorm࿰ 查看详情

前端团队代码规范最佳实践，个人成长必备！(代码片段)

...码规范，代码检查，代码格式化，以及编辑器自动化实现的方向，介绍代码规范统一在我们团队的实践应用。大纲预览本文介绍的内容包括以下方面：认识代码规范制 查看详情

vue.js前端项目容器化部署实践极简教程(代码片段)

大概一周前，在某个「微雨燕双飞」的下午，我正穿梭于熙熙攘攘的车流人海当中，而被雨水濯洗过的天空略显灰白，傍晚亮起的路灯恍惚中有种朝阳初升的错觉，内心更是涌现出一种「一蓑烟雨任平生」的... 查看详情

vue.js前端项目容器化部署实践极简教程(代码片段)

大概一周前，在某个「微雨燕双飞」的下午，我正穿梭于熙熙攘攘的车流人海当中，而被雨水濯洗过的天空略显灰白，傍晚亮起的路灯恍惚中有种朝阳初升的错觉，内心更是涌现出一种「一蓑烟雨任平生」的... 查看详情

git+jenkins学习之路（十四）之自动化脚本部署实践(代码片段)

一、环境说明和准备1、环境说明主机名IP地址角色系统deploy-server192.168.56.12发布Centos7.4web192.168.56.13web服务器，nfs服务器Centos7.42、服务器准备工作（1）发布机前期准备a.增加普通用户并配置密码[[email protected]~]#useraddwww[[email... 查看详情

jenkins部署前端项目(代码片段)

...前端项目在使用Jenkins部署前端项目时需要搭建好JenKins的自动化部署环境。1）Linux服务器上安装好了JDK或者OpenJDK软件，并配好了环境变量2）Linux服务器上安装好Jenkins软件，并安装了JenKins推荐安装的插件3）Linux... 查看详情

前端工程化(代码片段)

...并到主干。3、模块管理：为模块化或者组件化开发。4、自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。5、构建：主干更新以后，自动将代码编译为最终的目标格式... 查看详情

持续集成指南：gitlabci/cd自动部署前端项目(代码片段)

...成了，尝到甜头之后，现在前端的项目也要加入自动化部署，所以经过一番折腾，有了本文~前文回顾：GitLab的安装、配置、使用持续集成指南：GitLab的CI/CD工具配置与使用跟 查看详情

深度学习实战——卷积神经网络/cnn实践(lenetresnet)(代码片段)

...系我）。第一章  深度学习实战——不同方式的模型部署（CNN、Yolo）_如何部署cnn_@李忆如的博客第二章 深度学习实战——卷积神经网络实践目录系列文章目录一、实验综述1.实验工具及内容2.实验数据3.实验目标4... 查看详情

前端工程化实战：react模块化开发性能优化和组件化实践(代码片段)

...量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开... 查看详情

一文解答，亲自实践|计算机视觉mlops自动化pipeline工具链(代码片段)

...;和DevOps的推进，机器学习等的模型训练、部署全流程自动化技术、容器化技术的推广，逐渐可以做到计算机视觉MLOps。今天分享的文章就是介绍这样的一个工具链，帮助你完成模型训练、调参、monitor、部署的全流程... 查看详情