分类 技术学习 下的文章

腾讯云 COS webpack 插件开源

今天想把一个老的 Yii2 项目改成比较时髦的前后端分离的开发模式,于是试用了 webpack,感觉还不错。

项目线上我是想直接把编译后的文件传到带 cdn 的对象存储上,因为服务器用的是腾讯云的 cvm,所以对象存储就顺便选择了 cos。

Github 上搜了下没有现成的 webpack 插件,不过有几个现成的七牛的,比较了一下发现 https://github.com/lyfeyaj/qn-webpack 这个项目的代码最简洁清晰,于是就在这个项目的基础上自己改出了一个 cos 的 webpack 插件并开源了出来:https://github.com/takashiki/cos-webpack

npm 发布包的步骤参考:手把手教你用npm发布一个包

下面是该插件的安装和使用方式:

前提

需要 Node 版本在 v4.0 以上,COS V4 以上(APPID 为 125 开头)

安装

npm i -D cos-webpack

使用方法

支持的配置项:

  • secretId COS SecretId
  • secretKey COS SecretKey
  • bucket COS 存储对象名称,格式为对象名称加应用 ID,如:bucket-1250000000
  • region COS 存储地域,参见官方文档
  • path 存储路径, 默认为 [hash],也可以指定 hash 长度,如: [hash:8]
  • exclude 可选,排除特定文件,正则表达式,如: /index\.html$/
  • include 可选,指定要上传的文件,正则表达式,如: /app\.js$/
  • batch 可选,批量上传文件并发数,默认 20

注: Webpack 的 output.publicPath 要指向 COS(或自定义的)域名地址

// 引入
const CosPlugin = require('cos-webpack');

// 配置 Plugin
const cosPlugin = new CosPlugin({
  secretId: 'my-secret-id',
  secretKey: 'my-secret-key',
  bucket: 'my-125000000',
  region: 'ap-chengdu',
  path: '[hash]/'
});

// Webpack 的配置
module.exports = {
 output: {
    // 此处为 COS 访问域名(bucket-1250000000.file.myqcloud.com) 加上 path([hash]/)
    publicPath: "http://bucket-1250000000.file.myqcloud.com/[hash]/"
    // ...
 },
 plugins: [
   cosPlugin
   // ...
 ]
 // ...
}

Ajax 跨域解决方案

document.domain

该方案只能适用于跨子域的情况,无法跨不同二级域名。

jsonp

比较常见的一种跨域解决方案,利用 <script> 标签可以跨域的特性实现 ajax 请求跨域。

服务端设置 CORS 头

这种方式多见于上传文件的服务器,比如图床、云存储等。

代理请求

一般前端开发人员使用 node 进行代理比较方便,也可以用 php 等,也可以直接用 nginx 做反代。

postMessage

这个 html5 中新增的 api 非常强大,不仅可以用作跨域,最重要的是还能实现跨窗口消息传递,现在很多 h5 游戏平台都是用这个 api 来实现自己的 js sdk 来和 cp 进行对接的。

参考文档:

ajax跨域,这应该是最全的解决方案了

SSH 客户端中 zsh/vim 主题显示乱码的解决办法

zsh 和 vim 之类的工具有很多比较漂亮的主题,但是这些里面用到了一些比较特殊的字体,需要字体支持 powerline 才行,比如 zsh 的 agnoster,windows 上用 xshell 或者 mobaxterm 连接时均有不同程度的乱码。

解决方案就是安装支持 powerline 的字体,字体下载可以到 https://github.com/powerline/fonts

参考链接:

http://pdalinis.blogspot.tw/2013/08/putty-powerline.html

https://morecomputerstuff.wordpress.com/2017/04/30/oh-my-zsh-agnoster-theme-windows-10-client/

使用 Docker 部署 Upsource

Upsource 是 Jetbrains 推出的一款用于 Code Review 的基于 Web 的系统,功能十分强大,最重要的是和 IDE 全家桶无缝集成,可以直接在 IDE 里进行 Code Review。

在选择 Upsource 之前我也调研了 Gerrit 和 Phabricator,觉得不太适合当前的团队。这两个工具更适用于强制 Code Review 并且把其作为 CI 的一环的团队使用,这自然是有好处,不过稍微有些繁琐。这两者的具体区别可以参考 https://stackoverflow.com/questions/10545480/gerrit-phabricator-review

使用 Docker 部署

使用 Docker 部署 Upsource 可以参考官方的文档 https://www.jetbrains.com/upsource/download/#section=docker

有几个注意点:

  • docker pull 的时候必须指定镜像版本号(也就是 .,见https://hub.docker.com/r/jetbrains/upsource/tags/),不然找不到
  • 在跑容器之前,记得把映射的那几个目录按照教程上 chown 一下
  • 配置 base url 时可以先按照能检测通过的配,后面可以通过修改 conf/internal/bundle.properties 来修改
  • 如果提示某个目录不为空,无法下一步的话,可以进目录看看有没有隐藏文件,如果有就全删了

不出意外的话应该就能正常跑起来了。

使用 nginx 配置反代

由于 Upsource 使用了 websocket,所以常规的反代配置可能有问题,直接参考官方文档就 ok 了,见 https://www.jetbrains.com/help/upsource/proxy-configuration.html#NginxConfiguration

server {
         listen  2222;
         server_name  localhost;
         location  / {
            proxy_set_header X-Forwarded-Host $http_host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_http_version 1.1;

            # to proxy WebSockets in nginx
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_pass http://upsourcemachine.domain.local:1111;
            proxy_pass_header Sec-Websocket-Extensions;
         }
      }

与 IDE 的整合

安装 Upsource Integration 插件即可,首先 Upsource 上先连接号该项目的 Git,然后本地打开的项目右下角点击 Upsource 图标就可以进行关联。

参考链接

http://blog.csdn.net/nikobelic8/article/details/54897314

使用 Docker 搭建 Gitlab + Jenkins + SonarQube 的 PHP 持续集成环境

对于开源 PHP 项目,现在比较成熟的一套持续集成方案是使用 Github + TravisCI + StyleCI + Scrutinizer + coveralls,不过这套方案如果想要用于私有项目的话就抓狂了,个个要买套餐,其中很多还不便宜。而且对于公司内使用的项目来说,内部搭建的 Gitlab 方案更为常见,对于这种情况,我们可以使用 Gitlab + Jenkins + SonarQube 来进行代替。

安装 SonarQube

$ docker pull postgres

$ docker run --name db -e POSTGRES_USER=sonar -e POSTGRES_PASSWORD=sonar -d postgres

$ docker pull sonarqube

$ docker run --name sq --link db -e SONARQUBE_JDBC_URL=jdbc:postgresql://db:5432/sonar -p 9000:9000 -d sonarqube

执行完毕上面的命令后通过浏览器进入 SonarQube,默认用户名和密码都是 admin,进去后会有一段引导,里面会让你生成一个 access token,这个后面的配置 Jenkins 时会用到。

如果没有记下来的话,可以点右上角的用户头像里面的 My Account > Security 标签中可以生成一个新的。

配置 Jenkins

Jenkins 需要在全局的 系统设置 里面添加 SonarQube Server,填下对应的访问地址和上一步获取的 access token 即可。服务器地址填写 localhost 可能会有问题,填 ip 会比较好些。

然后需要在 系统管理 的 Global Tool Configuration 菜单中配置 SonarQube Scanner 安装,这个直接选择自动安装就好了,十分方便。

这两步配好之后就到对应的项目配置中添加构建步骤,下拉选择 Execute SonarQube Scanner,然后对于 2.1 版本以上的 SonarQube Scanner 就只需要配置 Analysis properties 这一项就可以了,比较常用的参数包括 sonar.projectKey (用来确定 该项目在 SonarQube 中叫什么名字) 和 sonar.sources=(用来指定需要扫描的目录)。

配完之后选择构建即可,可以去当前构建的 Console Output 里面查看有没有报错,正常执行完成的话,在 SonarQube 项目面板中就可以看到一个新增的命名为配置的 sonar.projectKey 的 项目了。

注意点:

  • SonarPHP 自定义检查规则需要用 java 来写扩展,比较新的版本内置了 psr2 的规则基本够用,内置的 Quality Profiles 是可以复制一个出来进行自定义的
  • Sonar 嗅探出的一些问题可能实际上并没有什么影响,比如变量名中含有 ‘pwd’ 等,如果原本使用方式确实合理则可适当忽略

参考链接: