Gitlab ci 调试笔记 (一)

Gitlab ci 调试笔记 (一)

通常情况下,我们对ci的认识都停留在构建工具这一层面,对于许多使用方面的细节并不关注,所以我想写一下近段时间修改ci文件的一些细节。

1.release分支的问题

build_prod:
  stage: build_prod
  only:
    - /^release-.+/

通常我们会这样写线上的构建条件,但如果某些情况下,有一个分支被命名为release-xxx,就会错误的触发线上环境构建。

我们可以这样修改:

build_prod:
  stage: build_prod
  only:
    variables:
      - $CI_COMMIT_TAG =~ /^release-.+/

如果构建分支有tag,则ci会自动设置”CI_COMMIT_TAG”这个环境变量,在only中使用环境变量去判断,从而确保只有release-xxx的tag会触发构建。

2.手动操作

ci作为一款自动化工具,通常情况下所有的操作都由某些事件的触发而自动执行和完成,但有时,我们希望能受控的执行一些操作

deploy_prod:
  when: manual
  only:
    variables:
      - $CI_BUILD_TAG =~ /^release-.+/

只需要添加”when: manual”即可达到我们的期望,满足条件时,在ci/cd面板上会显示执行按钮,点击该按钮来执行我们期望的操作。

3.使用ssh密钥

ci能执行shell,那么,能不能ssh连接其他服务器,执行一些操作呢,显然是可以的,只需要配置一下。

使用ssh有一些前提,比如ssh密钥,同时还需要信任服务器(这一步我们在本地通常都是随手输入y信任)

我们将ssh密钥预先生成好,并放置到环境变量里待用,同时将KNOWN_HOSTS也放置到环境变量里。

publish:
  before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts

似乎有点长,我们来解读一下。

首先判断一下ssh-agent是否存在,不存在则安装一下,
安装完成后运行ssh-agent,并将密钥和HOSTS添加进来,就完成了配置工作,接下来做什么就自行发挥了,帮你commit & push代码也是可以的。


本期内容不多,等下期再完善一下

Palfish JSBridge Chrome extension技术方案

Palfish JSBridge Chrome extension是一款为辅助前端开发调试而编写的chrome插件。

通常我们的开发环境中不能或者说很难调试一些依赖客户端的操作,不利于编码和排查问题。
Palfish JSBridge Chrome extension能够模拟客户端的一些基本操作,方便开发调试。
该插件无需更改任何代码即可直接使用,开启注入功能后,将自动注入PalfishBridgeAndroid全局变量,可实现客户端的登录、HTTP请求等功能。

chrome插件的5种运行环境

chrome插件有5种运行环境,分别为inject/content/popup/background/devtools,下面分别介绍一下这5种环境
1.inject js即注入到页面里的js,和我们开发时写的js没啥区别
2.content script与inject功能相似,但和inject js运行在不同的上下文里,即不能访问页面中的js变量方法等,但可以操作dom元素,可以通过PostMessage与页面通信,通过runtime和popup/backgound通信
3.popup js是我们点击浏览器的插件图标弹出的页面中的js,不能操作页面中的dom,但可以无限制跨域等
4.background js与popup的功能类似,但没有页面,而且生命周期比较长
5.devtools js常见的功能类似于在调试窗口增加一些标签等

总结一下
js类型 功能 访问DOM 访问页面js 跨域
inject 和页面普通js一样 ×
content 和页面js运行在隔离环境里,功能类似 × ×
popup 弹出框中的js × ×
background 与其他js通信,跨域请求等 × ×
devtool 在devtool面板增加功能页面 ×

chrome插件的通信方法

js类型 通信方法
inject 只能通过postMessage和content通信
content 通过runtime与popup/background通信,通过postMessage与content通信
popup 通过tabs与content通信,通过getBackgroundPage与background通信
background 通过tabs与content通信,通过getViews与popup通信
devtool 通过runtime与popup/background通信,通过inspectedWindow.eval与inject通信
本插件的消息传递流程

本插件通过inject js(PalfishBridgeAndroid变量)发送postMessage到content,再由content转发至background,background收到消息后执行相关操作(http请求等),并将执行结果返回到content,由content PostMessage到inject,从而完成模拟

本插件的技术难点

1.如何在页面添加变量
插件实际上是不能直接操作页面(inject)js的,也就没法直接添加变量和方法,但插件可以操作dom,故我们通过增加script标签的方式将一段js代码注入到页面中,从而实现添加变量。
2.页面如何与background通信
显然页面js是不能直接用runtime与background通信的,但由于inject与content共享dom,故我们可以使用addEventListener和postMessage来实现inject与content通信,再由content将数据转发给background

具体代码可以看这儿

https://gitlab.pri.ibanyu.com/front/picturebook/palfish-jsbridge-extension

如何定制方法/参与开发

本插件目前只实现了core.info和http.post方法,其他方法可以在mock标签自行添加,返回值必须是json格式,如果有比较通用的方法,可以提mr到项目,增加方法只需要修改src/background.js的methodTable变量即可

在使用过程中发现问题或者需求,可以与我联系,有时间尽量给予支持