DevOps on Time Friend

持续集成 - 代码质量扫描

Sun, 15 Dec 2019 23:15:00 +0000

为了方便管理公司的代码质量,让代码质量扫描跟持续集成结合到一起是重要的一步. 目前公司比较年轻,但是在短短的一年时间里,也有了接近300个前端项目.

这么多的前端项目,我们如何保证代码质量就成了一个很重要的事情.

代码项目太多,codereview是必要的.但是人肉codereview不能保证效率. 因为个人水平的差距,与公司规范的熟悉程度.不能保证所有项目的规范一致性. 还有一些潜在的bug也有可能会被漏掉.

我们公司是基于Gitlab CI/CD,所以以下说明是基于Gitlab的方式.但是思路的运用是相通的,有需要的人可以借鉴思路.

修改.gitlab-ci.yml

为了方便每一个项目接入,我们对配置做了很小的改动. 并且每一个项目的配置的修改都是一样的,就是为了方便无脑的复制粘贴.

我们还做了一个cli工具,里面包含代码扫描的一切功能.安装在runner的机器上.

image: node:11.10.0

stages:
 - codereview # 添加一个codereview的stage

codereview:
 stage: codereview
 script:
 - cli codereview # cli工具触发codereview
 tags:
 - fe #runner的tag,根据自己的情况自行修改

cli 触发代码扫描做什么?

执行SonarQube扫描

关于SonarQube的安装,网上有很多教程请自行搜索.

在执行runner的机器上安装 sonar-scanner

npm i sonar-scanner -g

利用自研的cli工具,在项目根目录生成sonar 扫描的配置文件.


// 获取gitlab 注入ci的环境变量
const {
 CI_PROJECT_NAME,
 CI_PROJECT_ID,
} = process.env;

// 基于gitlab的项目id生成一个sonar的projectKey
const projectBuffer = Buffer.from('sonar' + CI_PROJECT_ID);
const projectKey = projectBuffer.toString('hex');

// 检测代码目录
// 一般来说 src都是前端项目业务代码的目录
//因为公司的nodejs项目是基于egg框架的,也有可能是app
const existsSrc = fs.existsSync(`${process.cwd()}/src/`);



// sonar配置文件模板
const sonarProject = `
sonar.projectKey=${projectKey} 

sonar.projectName=${CI_PROJECT_NAME}

sonar.projectVersion=1.0

sonar.sources=${existsSrc ? 'src' : 'app'}

sonar.binaries=bin

sonar.host.url=http://xxx.你部署sonar的服务地址.com 

sonar.login=admin

sonar.password=admin

sonar.sourceEncoding=UTF-8
`;
 // 生成一个路径
 const sPath = path.resolve(process.cwd(), 'sonar-project.properties');

 // 写入sonar的配置
 fs.writeFileSync(sPath, sonarProject);

 // 执行sonar的代码扫描,并且上传代码质量报告
 shelljs.exec('sonar-scanner');

执行jscpd分析代码重复率

尽管sonar已经提供了代码重复率的报告,但是并不是很容易看懂,到底代码哪里重复. 我们使用jscpd来分析项目的重复率.并且输出友好的报告.

持续集成 - 使用Gilab CI进行前端项目的持续集成

Fri, 20 Sep 2019 23:15:00 +0000

市面上的持续集成平台有很多,今天介绍Gitlab的CI.

从Gitlab 8.0开始,Gitlab CI 就集成在了Gitlab中.

使用方法非常简单,只要我们在项目的根目录创建一个 .gitlab-ci.yml文件,添加一个Runner,就直接接入了Gitlab CI.

接入方式非常的简单便捷.目前我们在前端脚手架中放一个.gitlab-ci.yml文件,后续每一个前端项目都可以按照标准直接接入Gitlab CI.

GitLab Runner

所有的Gitlab任务都会放在Gitlab Runner中执行.

GitLab Runner的安装环境,根据你的需求而定,一个gitlab 可以注册的Runner是没有限制的.

普通的前端项目直接安装在Linux中就可以了,如果是小程序或者RN这种项目,目前我是直接找了一台mac mini来安装Runner.

GitLab Runner安装

安装Runner 非常简单, 这里晒出Gitlab的官方安装教程,你可以根据你的系统环境自行下载.

安装Gitlab Runner 官方文档

注册Runner

Runner安装好之后,想要关联到你的Gitlab,需要注册Runner.

这里给大家介绍群组的runner注册方式,个人项目的runner方式注册基本一致

注册Gitlab Runner 官方文档

大致流程为:

打开Gitlab网站,选择群组-> 设置-> CI/CD -> 展开Runner -> 你会看到注册Runner的Token与Url
安装好Runner的机器上,运行 sudo gitlab-runner register
输入你Gitlab的 URL
输入 Token
输入 Runner 的名字
选择 Runner 的类型,没有特殊需求直接选shell
完成

配置Runner

Runner的配置文件会以执行的用户身份不同而不同

当GitLab Runner以root身份执行时 /etc/gitlab-runner/config.toml
当GitLab Runner以非root身份执行时 ~/.gitlab-runner/config.toml

Runner的全局配置

这里我只说关键的两点

concurrent 配置会限制整个GitLab Runner能并发处理job的数量,如果你发现你的runner当前时间全局只能执行一个job的时候, 可以检查concurrent是否默认配置为1.不然多个job同一时段并发的时候,会造成job排队的现象.

一个两年前.gitattributes文件导致的bug

Thu, 24 Jan 2019 19:33:33 +0000

起因

一时兴起,我打开了我两年前写的一个前端项目开始代码审查. 这个项目我一个人写了两年,大概十几万行代码的样子.

发现这个项目的git居然把所有的代码文件都识别成了二进制文件. 这个问题,之前困扰了我很久,却一直找不到原因.导致我的代码没有对比记录.

再顽固的问题也有水落石出的一天

说巧不巧,今天偏偏找到了问题的源头.

.gitattributes

最后发现是因为.gitattributes文件有一行配置因为换行问题.导致所有text的文件都识别成了二进制文件.

.gitattributes的作用

.gitattributes文件是一个简单的text文本文件，它的作用是重新定义指定文件的属性, 指定非文本文件的对比合并方式

编写规则

pattern attr1 attr2 ...

示例

*.ttf binary
*.woff binary
*.eot binary
*.otf binary
* text=auto

上面这段代码表示,将一些字体文件指定为二进制文件,当提交代码的时候git不会diff这些文件的变动详情. 他只会告诉你,文件变动了,但是不会告诉你具体哪里变了.

Git大小写不敏感导致的烦人问题

Wed, 09 Jan 2019 19:33:33 +0000

因为同事把一个文件夹的小写改成了大写,导致我本地的提交不能直接push rebase 等一些列操作.恼的很~

error: The following untracked working tree files would be overwritten by checkout:
 xxx.js
Please move or remove them before you can switch branches.
Aborting

解决办法

设置为大小写敏感(问题解决后,一定要还原配置)

git config core.ignorecase false

尽管设置大小写敏感之后,始终会影响其他分支的代码,所以不建议一直使用这个配置,当问题解决之后,还是要改回去.

改回默认

git config core.ignorecase true
# or
git config --unset core.ignorecase

尾巴

平时编码的时候,还是千万不要直接重命名大小写,自己本地看起来没有什么问题.在别人问题上却是大问题.

如果发生了类似问题的,应该在源头解决(谁机器上重命名的,谁改回去).如果不解决的,应该拖出去打~~

使用Travis CI自动化部署你的Hugo,Hexo博客

Tue, 20 Nov 2018 16:14:25 +0000

Travis CI 是什么?

Travis CI 是在线托管的 CI 服务，用 Travis 来进行持续集成，不需要自己搭服务器。最重要的是，它对开源项目是免费的。如果公司是用的是 gitlab,也有提供相应的持续集成服务.这里就过多赘述.

Travis CI 配置文件

Travis 要求项目的根目录下面，必须有一个.travis.yml文件。

当你的仓库有提交的时候,travis 会自动执行你下面配置的行为.

Travis CI 的钩子与生命周期

Travis 的钩子

Travis 有不同的阶段,他提供了 7 个钩子。

before_install：install 阶段之前执行
before_script：script 阶段之前执行
after_failure：script 阶段失败时执行
after_success：script 阶段成功时执行
before_deploy：deploy 步骤之前执行
after_deploy：deploy 步骤之后执行
after_script：script 阶段之后执行

生命周期

before_install
install
before_script
script
aftersuccess or afterfailure
[OPTIONAL] before_deploy
[OPTIONAL] deploy
[OPTIONAL] after_deploy
after_script

.travis.yml

下面是我的博客部署配置,也是我项目.travis.yml文件的内容.

hugo

这是我的 hugo 部署配置,仅供参考

language: node_js
node_js: 10.13.0
install:
 - wget https://github.com/gohugoio/hugo/releases/download/v0.51/hugo_0.51_Linux-64bit.deb
 - sudo dpkg -i hugo*.deb
 - hugo version
 - rm -rf public
 - npm install

script:
 - hugo --buildFuture
 - gulp
 - echo 'Build done!'
after_success:
 - git config --global user.name "Fan"
 - git config --global user.email "你的邮箱"
 - git clone https://${ACCESS_TOKEN}@github.com/Num142857/alili.tech.git container
 - rm -rf container/*
 - cp -r public/* container
 - cd container
 - git add .
 - git commit -m 'Travis upate blog'
 - git push -u origin gh-pages -f

Hexo

这是我的 hexo 部署配置,仅供参考.

Git删除所有提交记录解决方案

Tue, 30 Oct 2018 19:33:33 +0000

如果你之前的项目提交了一些敏感数据,或者要清除以前提交的记录,给出下面解决方案.

# 1. 检出一个新的分支
git checkout --orphan latest_branch

# 2. 暂存所有文件
git add -A

# 3. 提交刚刚暂存的文件
git commit -am "commit message"


# 4. 删除最原始的分支
git branch -D master

# 5. 重命名当的第分支
git branch -m master

# 6. 提交你的记录到远程仓库
git push -f origin master

Git push卡住解决办法

Mon, 09 Apr 2018 19:33:33 +0000

博客的每天英语是直接爬的扇贝英语,为了不直接请求代理接口(会相对比较慢). 所以每天我的程序每天会生成相应的数据文件,前端直接ajax获取就好了. 博客内容也会每天自动发布,达到每天更新名言名句的效果. 好久没管,发现很多git提交的内容没有push.手动直接push之后发现有800多个修改地方没有push.

手动push的时候直接卡住了. 就像这样:

[master 9447645] 
1 file changed, 1 insertion(+)
Counting objects: 20, done.
Compressing objects: 100% (876/876), done.
Writing objects: 100% (876/876)

网上找了个方法,解决了这个问题: 添加sendpack.sideband属性并置为false

# 全局的：
git config –global sendpack.sideband false

# 仓库的：
git config –local sendpack.sideband false

我只在我的本地仓库设置一下,然后再执行 git push就成功了

Git系列之关于add命令的一些事

Sun, 10 Sep 2017 19:33:33 +0000

基本用法

通常是通过git add 的形式把添加到索引库中，

可以是文件也可以是目录:

git add <path>

如果有很多改动,可以用以下命令来一次添加所有改变的文件:

 git add -A .

将所有修改添加到暂存区,包括添加新文件和编辑过的文件不包括删除的文件:

$ git add .

表示添加所有内容:

git add -A

表示添加编辑或者删除的文件，不包括新添加的文件:

git add -u

如果不小心执行了以下命令:

git add * -f(force) //添加被忽略的文件。

可以吃一个后悔药:

git reset HEAD

自动化部署前端代码 - grunt-ftp-deploy的使用

Sun, 14 Jun 2015 23:36:00 +0000

每一次修改完代码之后,要部署到远程的服务器,我的操作步骤是:

修改代码 –> grunt build –> 打开FileZilla –>登录ftp服务器 –>找到本地文件夹 –> 找到远程服务器目标文件夹 –>全选本地文件 –> 上传

因为部署代码,在某个时候会特别频繁.每一次都要重复上面的八个操作.表示要做点什么,改变一下.

今天我们的主角:grunt-ftp-deploy

如果是sftp可以使用grunt-sftp-deploy

安装:

npm install grunt-ftp-deploy --save-dev

or

npm install grunt-sftp-deploy --save-dev

在与Gruntfile文件同一目录,我们新建一个".ftppass"的文件, 里面是ftp的授权信息, 内容如下:

{
 "key1": {
 "username": "username",
 "password": "password"
 }
}

Gruntfile配置代码:

//ftp-deploy
 grunt.initConfig({
 'ftp-deploy': {
 build: {
 auth: {
 host: '192.168.1.245', //ftp服务器的ip地址
 port: 21,//服务器端口
 authKey: 'key1'//.ftppass文件里,key1的授权信息
 },
 src: 'path/to/source/folder',//本地文件夹
 dest: '/path/to/destination/folder',//服务器的目标文件夹
 exclusions: ['path/to/source/folder/**/.DS_Store']//不上传的文件
 }
 }
 })

//sftp-deploy
 grunt.initConfig({
 'sftp-deploy': {
 build: {
 auth: {
 host: '192.168.1.245', //ftp服务器的ip地址
 port: 21,//服务器端口
 authKey: 'key1'//.ftppass文件里,key1的授权信息
 },
 cache: 'false',
 src: 'path/to/source/folder', //本地文件夹
 dest: '/path/to/destination/folder', //服务器的目标文件夹
 serverSep: '/',//服务器的相对路径
 localSep: '/',//本地的相对路径
 concurrency: 20,//每次上传多少个文件
 progress: true //是否显示进度条
 }
 }
 })

加载task

烦人的AngularJS注解 - grunt-ng-annotate的使用

Fri, 12 Jun 2015 23:15:00 +0000

angular加入了依赖注入

编写代码的时候,大致的写法如下

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

可是这样的代码,压缩后会造成一个问题. 函数的参数:$scope, $http, $state, $timeout会变成: a,b,c,d

导致这个函数找不到需要注入的服务,因为每个参数的命名都是严格规定的.

如下:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

为了解决这个问题,angular支持如下写法:

 app.controller('tempController', ["$scope", "$http", "$state", "$timeout", function($scope, $http, $state, $timeout) {



 }])

那么问题来了:

每一次添加一个服务的时候,都需要写两遍. 每一次删除一个服务的时候,都需要删两遍.

表示大大降低了变成的愉悦.

那么我们怎么解决这个问题呢?

今天的主角来了,那就是grunt-ng-annotate

这是一个grunt的插件,当然在glup上也有.因为我的项目主要是用grunt写的. 那么这次主要讲grunt版本的ng-annotate.

首先我们需要安装ng-annotate:

npm install grunt-ng-annotate --save-dev

在你的Gruntfile里运行这个插件:

grunt.loadNpmTasks('grunt-ng-annotate');

配置代码:

grunt.initConfig({
 ngAnnotate: {
 dist: {
 files: [{
 expand: true,
 cwd: '<%= yeoman.dist %>', //相对路径
 src: '**/*Controller.js', //需要匹配的文件
 dest: '<%= yeoman.dist %>' //文件输出的路径
 }]
 }
 }
})

js代码在函数里加入 “ngInject”: