工具使用

阿里云oss私有桶图片处理

月盾
针对OSS内存储的图片文件(Object),您可以在GetObject请求中携带图片处理参数对图片文件进行处理。例如添加图片水印、转换格式等。详情见:官方文档 对于允许公共读写的文件可以直接在图片URL后面拼接参数的方式进行图片处理,格式:https://bucketname.endpoint/objectname?x-oss-process=image/action,parame_value 对于不允许匿名访问的私有图片文件,不支持通过文件URL直接添加参数的方式处理图片,您需要通过SDK的方式将图片处理操作加入签名URL中。 重要: 通过文件URL访问图片时,默认是下载行为。如需确保通过文件URL访问图片时是预览行为,您需要绑定自定义域名并添加CNAME记录。具体操作,请参见绑定自定义域名。 所以,私有桶的图片是不能直接添加参数处理,否则会返回错误信息: SignatureDoesNotMatch The request signature we calculated does not match the signature you provided. Check your key and signing method. SDK处理方法,以go版本为例: package main import ( "fmt" "os" "github.com/aliyun/aliyun-oss-go-sdk/oss" ) func HandleError(err error) { fmt.Println("Error:", err) os.Exit(-1) } func main() { // 创建OSSClient实例。 // yourEndpoint填写Bucket对应的Endpoint,以华东1(杭州)为例,填写为https://oss-cn-hangzhou.aliyuncs.com。其它Region请按实际情况填写。 // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。 client, err := oss.New("yourEndpoint", "yourAccessKeyId", "yourAccessKeySecret") if err != nil { HandleError(err) } // 指定图片所在Bucket的名称,例如examplebucket。 bucketName := "examplebucket" bucket, err := client.
jenkins代替品

jenkins代替品

月盾
如果你打算搭建一套发布系统,你可能会考虑jenkins,或者其他。 我要介绍的则是一些现成的,使用更简单的工具。没用特殊环境要求的情况下则完全可以代替jenkins。 GitHub Actions gitlab ci 阿里云流水线 coding持续部署 上面只是列举了四类,实际上你会发现市面上的云服务商和代码仓库都提供了类似的工具,虽然有些是收费的,但是也有不少免费的,对于个人来说其实大多数都是够用了。

chrome开发者工具显示接口完整路径

月盾
chrome浏览器的开发者工具是前端开发必不可少的工具,其中接口查看是最常用的功能之一。默认情况下显示如下: 主要是红框内的接口显示只有很短的名称,并没有完整的显示出整个接口,这对于一些最后名称一样的接口就不能知晓是哪个接口了,只能点击查看详情。我们希望的当然是能够显示完整的接口,实际上也是能做到的。 在名称栏上右击: 可以显示很多选项,其中路径和网址就是我们先要的,点击以后就可以显示完整的接口路径了。

postman header中自动添加cookie

月盾
使用postman进行接口测试时,经常需要使用到cookie参数。我们会先调用登陆接口,得到sessionid,然后使用sessionID来调用其他需要登陆的接口。 但是有些情况下,cookie不会自动添加到header中,总是需要手动添加cookie。或许又发现有的接口却能自动添加上cookie,为什么会区别对待呢? 其实这是postman根据登陆接口返回的cookie来操作的,如果cookie的path指定来某个路径,那么所有在这个路径下的接口都会自动加上cookie。

Chrome插件hook Ajax

月盾
如何Hook Ajax请求 现在很多网站都使用Ajax作为数据接口,这样其实也方便爬虫爬取数据,但是,如果站点对IP,访问频率做 了限制,或者网站定位就是搜索类,无法遍历完所有页面,或者是数据实时变化,无法预期的。这样就可能需要 直接在浏览器中模拟人的行为,对于这样的网站(使用Ajax作数据接口,有一定防范措施) ,如果我们可以通过hook得到Ajax请求,就可以搞定它的数据了。 单页面Web应用 对于单页面的Web应用,在console中使用如下代码,就能在浏览器进行Ajax请求时候,得到返回内容, 然后在post给存储接口就好了: (function() { var origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function() { // console.log('request started!'); this.addEventListener('load', function() { console.log(this.responseText); // 得到Ajax的返回内容 }); origOpen.apply(this, arguments); }; })(); 比如百度图片: 我们可以看到请求图片的路径,这段代码 直接使用了一个匿名函数,重写了Ajax请求的open方法,给load事件加上一个事件监听器,从而把内容得到: 对于单页面的Web应用,基本可以满足需求,但是如果翻页的话,每次翻页上一页的代码就失效了, 不可能每页都把这段代码复制进console中,还是需要使用类似Chrome插件的方式才能实现。 翻页Web应用 有了上面的代码,如果我们把它直接丢到Chrome插件的JS文件里面(官方叫Content Scripts),发现是无法执行的,XMLHttpRequest.prototype.open 还是浏览器自身的代码。 这样看来,就无法实现自动翻页,自动获取ajax请求内容了。 Chrome官方说法如下: Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page.
七牛在线管理图片预览chrome插件

七牛在线管理图片预览chrome插件

月盾
七牛云图片存储有10G的免费额度,对于个人来说足够使用了。使用七牛图片存储涉及到图片上传,查看,管理的问题。为了能提高使用效率,我们可以利用好一些工具。 vscode插件上传图片到七牛 vsocode扩展市场有很多上传到七牛的插件,大家可以根据需要自己选择。 上传的图片多了以后,有时需要找一些已经上传的图片来使用,目前我所知道的方法还仅限于登录的七牛后台上查看。 可以看到,七牛的管理后台做的不能说很差,可以说是很气人。要预览图片必须点击“详情”,当你关掉预览窗口时却不知道查看的是哪张图片,也没有个高亮聚焦。而且也没有时间排序,只有名称排序,真的是很难用。 为了能够直观的看到图片,决定开发一款chrome插件,将图片直接显示出来,而不用再点击查看。 关于chrome插件开发的细节本文暂不细说,直接上代码。 代码展示 manifest.json { "manifest_version": 2, "name": "chome-plugin", "version": "0.0.1", "description": "chrome示例插件", "icons": { "16": "images/icon-16x16.png", "48": "images/icon-48x48.png", "128": "images/icon-128x128.png" }, "page_action": { "default_icon": { "48": "images/icon-48x48.png" }, "default_popup": "html/popup.html", "default_title": "Hello yuedun" }, "author": "yuedun", "background": { "scripts": [ "scripts/jquery.min.js", "scripts/background.js" ] }, "devtools_page": "html/devtools-page.html", "content_scripts": [ { "js": [ "scripts/jquery.min.js", "scripts/content.js" ], "css": [ "styles/yuedun-insert.css" ], "matches": [ "https://portal.qiniu.com/kodo/bucket/resource?bucketName=*" ], "run_at": "document_start" } ], "permissions": [ "cookies", "*://*/*", "webRequest" ], "homepage_url": "https://www.
vscode正则查找替换

vscode正则查找替换

月盾
查找某一类型字符串: 正则表达式onclick=.*" 会查找到所有: onclick="_msq.push(['trackEvent', '210074305d6b0409-09c7759e04e98528', ''pcpid', '']);" onclick=是固定一样的字符, .代表除\r和\n之外的任意字符,等价于[^\r\n] *代表匹配前面的模式 0或多次 {0,} "这是字符串最后一个字符 在vscode中的效果如下: 至于要替换成什么就看自己需求了,如果要给选中的字符串包裹字符串则需要修改成这样: 查找替换 查找:(onclick=.*") 替换:aaa($1) 结果: 替换字符串两头,保留中间 两部分文字交换位置 相同模式的文字交换位置。 查找:(\(\d{4}-\d{1,2}-\d{2}\)) (\[.*\)) 替换:$2 $1 结果: vscode中一对括号()代表一个变量。 第一组正则 (\(\d{4}-\d{1,2}-\d{2}\)) 对应 $1, 第二组正则 (\[.*\))对应 $2,以此类推。 所以,可以查找多组数据,在替换部分将两个对应变量交换位置即可。

typescript不检查node_moduls

月盾
tsconfig.json 中 exclude node_modules,但 tsc 还是报错。 node_modules/connect-mongo/src/types.d.ts:113:66 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 113 get: (sid: string, callback: (err: any, session: Express.SessionData | null) => void) => void; ~~~~~~~~~~~ node_modules/connect-mongo/src/types.d.ts:114:45 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 114 set: (sid: string, session: Express.SessionData, callback?: (err: any) => void) => void; ~~~~~~~~~~~ node_modules/connect-mongo/src/types.d.ts:118:47 - error TS2694: Namespace 'global.Express' has no exported member 'SessionData'. 118 touch: (sid: string, session: Express.
朱雀发布系统支持scp(rsync)发布

朱雀发布系统支持scp(rsync)发布

月盾
去年花了三天时间开发了一个简易版的nodejs发布系统,它是基于pm2自带的deploy机制开发的,主要原理就是在两台装有pm2的机器直接通信,并执行相应的命令。再往简单了说就是在发布机上远程执行命令,而朱雀发布系统提供了一个图形界面而已。 当时把这个系统定位为nodejs专用发布系统,因为它依赖了pm2,而pm2则是nodejs专用的进程管理工具,其他语言用不到。这个系统的上线也算是解决了我司一直以来没有合适的nodejs发布系统的空缺。 经过9个月的使用,也算比较稳定。但是也存在问题,最大的问题是部署应用方面比较繁琐。 基本流程如下: 发布机和应用服务器设置ssh通信配置。 应用服务器安装git(有自带,但是版本太旧)。 配置git用户名,邮箱。 生成ssh公钥。 把应用服务器的公钥配置到git代码服务器上。以便能拉代码。 发布机远程执行git pull来代码操作,各应用服务把代码拉取下来。 执行编译打包操作。 执行重启服务操作。 部署一次系统还是比较麻烦的,如果应用服务器有多台,可能还要重复这样的操作多次,实在比较麻烦。 使用scp同步代码的方式会比较简单一些,但是像nodejs这样的项目,node_module占了很大比重,如果每次都打包的话会拖慢同步速度,而scp又不具备排除文件夹的能力。 最后找到了rsync命令可以满足需求。然后就是基于rsync实现了一版。不用再依赖pm2,应用服务器也不用强制使用git了。 朱雀和Jenkins对比如何? 要说Jenkins那绝对是持续集成领域的老大哥,自然是功能强大。但是每个团队和产品有其特殊性,Jenkins并不完全适用。而朱雀也有其优势。 朱雀本身部署简单,使用go开发,不依赖运行时,无需安装,开箱即用。 目前支持和测试过的数据库有sqlite3(目前用的,不需要繁琐的安装过程)和mysql。 配置简单。 部署发布一键完成,不需要单独的部署过程。 并行发布。 审批,通知,权限。 开源,可定制开发。 项目地址:朱雀发布系统

easy-monitor qps监控

月盾
Easy-Monitor是一款轻量级的Node性能监控工具,仅仅需要项目入口 require 一次,就可以非常便捷地展示出进程的状态细节。 Easy-Monitor主要提供以下的功能: 找出执行时长耗费最久的5个或者更多的函数 找出那些执行时间超出预期的函数 找出v8引擎无法优化的函数 Easy-Monitor的特点: 轻量级:非传统C/S物理分离模式,require 后即可使用,没有额外的监控server/agent部署成本。 运行时:针对的是运行时的函数性能以及内存细节进行处理展示,可用于线上生产环境项目。 无状态:永远展示的是开发者访问时的业务进程状态 关于监控qps,作者在文档中并没有提到qps这样的关键字,很多人也不知道怎么监控qps。 不过在监控界面中有这样的指标数据: 所以我从源码入手,找到了该数据指标的源头是这样的: const data = { osCpu: Number((used_cpu * 100).toFixed(2)), osMem: Number((used_memory_percent * 100).toFixed(2)), maxDisk: max_disk_usage, disks: disks_json, load1: Number(load1.toFixed(2)), load5: Number(load5.toFixed(2)), load15: Number(load15.toFixed(2)), nodeCount: node_count, scavengeTotal: total_scavange_duration, scavengeAverage: scavange_duration_last_record, marksweepTotal: total_marksweep_duration, marksweepAverage: marksweep_duration_last_record, qps: Number((http_response_sent / 60).toFixed(2)), rtExpired: http_patch_timeout, rtAverage: http_rt, }; 这是接口返回的数据,包含了qps数据,那么qps实际上就是http_response_sent,所以监控中就可以这样设置qps了: @http_response_sent/60 > 10