专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

工具

  • 使用letsencrypt自动生成和续期HTTPS证书

    / 分类: 工具,实践 / No Comments

    相信一些同学注意到了, 本站启用了https, 域名改成了xhl.me, 服务也早就全都改用docker了.
    顺带介绍下之前搞的两个个docker项目: alpine-tengine, docker-backup.

    *本文主要介绍letsencrypt证书的创建和通配符HTTPS证书生成, 还有基于letsencrypt docker镜像实现证书自动续期.

    Let's Encrypt 是一个自动签发免费HTTPS证书的非营利机构, 生成的证书有3个月有效期, 到期可以免费续期.
    Certbot 是 Let's Encrypt 官方推荐的生成证书的客户端工具, 文档.

    使用letsencrypt-dns生成证书(支持通配符域名证书), 并自动续期

    letsencrypt-dns 集成了: certbot(证书生成命令行工具), Lexicon(DNS记录修改工具, 主流DNS服务商都支持).
    另外还自带了crontab 定时任务, 只要服务启动, 就会自动续期域名了.

    1. 创建, /etc/letsencrypt/domains.conf, 内容类似这样:
    *.domnain1.com domnain1.com
    *.domnain2.com domnain2.com
    2. 根据DNS PROVIDER信息验证, 并自动创建和续期证书

    下面的例子是拿dnspod举例. LEXICON支持主流的DNS服务, 所有支持的列表.

    docker run -it --rm --name letsencrypt2 \
        -v /etc/letsencrypt:/etc/letsencrypt \
        -v /var/run/docker.sock:/var/run/docker.sock \
        -e 'LETSENCRYPT_USER_MAIL=yourmail@gmail.com' \
        -e 'LEXICON_PROVIDER=dnspod' -e 'LEXICON_DNSPOD_USERNAME={dnspod_api_id}' -e 'LEXICON_DNSPOD_TOKEN={dnspod_api_token}' \
        adferrand/letsencrypt-dns

    如果是域名在godaddy或cloudflare, 可以这样:

    • godaddy API:
      -e 'LEXICON_PROVIDER=godaddy' -e 'LEXICON_GODADDY_KEY={{godaddy_key}}' -e 'LEXICON_GODADDY_SECRET={{godaddy_secret}}'
    • Cloudflare API:
      -e 'LEXICON_PROVIDER=cloudflare' -e 'LEXICON_CLOUDFLARE_USERNAME={{cloudflare_email}}' -e 'LEXICON_CLOUDFLARE_TOKEN={{cloudflare_api_key}}'
    3. 进阶: 续期后执行其他命令(比如重启Nginx)

    /etc/letsencrypt/domains.conf, 每行末尾可以加autocmd命令, 在续期后执行某个容器的shell命令, 比如:
    *.domnain1.com domnain1.com autocmd-containers=nginx:nginx -s reload
    续期后, 在容器名为nginx的容器中会执行: nginx -s reload
    另外, domains.conf最好保持最后一行有个换行(空行), 有时发现最后一行的域名没读到.

    查看全文 »

  • 由linode改为搬瓦工

    / 分类: 工具,生活 / No Comments

    Linode jp2虽然ping值不错(白天), 但测试油管速度很不理想. 看到搬瓦工的CN2和香港机房信息, 入手测试了下, 速度好太多(下面有对比).
    感觉性价比不错的几款:

    SPECIAL 20G KVM PROMO V3 - LOS ANGELES - CN2

    内存: 1024 MB; CPU: 1核; 硬盘: 20GB SSD; 流量: 1000 GB/月; 带宽: 1Gbps;
    半年付: $29.99(35RMB/月), CN2(电信/联通直连)
    比起linode低配$5/月, 同样配置和价格, 线路更好

    [推荐] SPECIAL 20G KVM PROMO V3 - LOS ANGELES - CN2 GIA

    内存: 1024 MB; CPU: 2核; 硬盘: 20GB SSD; 流量: 1000 GB/月; 带宽: 1Gbps;
    季付: $25.99(60RMB/月), CN2 GIA(电信/联通/移动直连)

    SPECIAL 20G KVM PROMO V3 - HONG KONG

    内存: 1024 MB; CPU: 1核; 硬盘: 20GB SSD; 流量: 100 GB/月; 带宽: 1Gbps;
    月付: $9.99(68RMB/月), 香港机房(电信/联通直连; 移动偶尔会绕美国/欧洲)
    香港机房的$9.99和$19.99, 已经售罄下架了

    如果暂未补货/售空, 可以点这里查看所有的类型
    付款使用优惠码: BWH26FXH3HIQ 省6.2%. 支持支付宝/PayPal付款.
    *PS. 价格能接受尽早入手, 热门的很容易被抢光~
    *续费不会涨价, 热门的基本后面会涨价的
    性价比CN2 GIA > CN 2 > 香港

    油管测试(* 长沙电信20M, 都装了bbr)

    6K-7W Kbps # GCE 台湾(最近一直受干扰, 不太稳)
    3.5W-4.5W Kbps # 搬瓦工 CN2 GIA (比较稳, 和CN2类似)
    6W-8W Kbps # 搬瓦工 香港 (比较稳, 比CN2更快些)
    2K-4K Kbps # Linode JP2

    不影响体验, 一般至少要1w+的Kbps, CN2 GIA/香港/CN2线路都不错.

  • webpack

    / 分类: 工具 / No Comments

    因为杂事比较多, 很久没写blog了. 深知坚持写下去, 自己的收货也是很大的, 所以和同事打赌每周写一篇blog, 如果做不到就请喝coffee(每周一篇质量不能保证, 只能做到1个月1-2篇~).
    "时间挤一挤总会有的"这句话都听过, 但是做起来不一定那么容易. 可能很多人也经常抱怨自己没时间做某某事, 因为惰性, 一个想法过了1年/2年没有去做, 后面就荒废了.
    改变自己是最难的, 很多改变也是被逼出来的. 2016, 希望效率能更高, 能把零碎的时间也都利用好.

    webpack应该一年以前就研究了, 当时还准备有机会在w3cteach长沙分享的, 那时介绍react/webpack应该极少, 现在已经很多了.
    说了些题外话, 开始入正题了.

    webpack的作用

    总结为: 打包,优化,编译.
    打包: 就是可以把模块打包, 处理依赖, 用过requirejs应该很好理解.
    优化: 比如图片可以转成base64, 可以最大限度减少http请求.
    编译: 这个很重要, 如果一个旧项目, 页面引入了a.js...n.js, 还在思考用gulp/grunt用最普通的方式把*.js压缩合并到一起, 那么理解起来会有点痛苦, 也发现不了webpack的优势, 最好是先通过一个简单的demo或新项目去理解. 需要某个模块的时候, 只要放心大胆的require就好了(webpack里面任何的静态资源都可以当做模块), 最终代码成什么样子webpack已经替你处理好了.

    webpack的常用配置参数

    //webpack.config.js
    module.exports = {
        context: __dirname + '/src', // requre('a.js')的时候从哪个路径查找
        entry: { // 打包成2个文件index.js, about.js
            index: ['./a.js', './a.css', './b.js', './b.css'], // css和js打包到一起(一个js文件), 用<style>添加到页面
            about: ['./a.js', './a.css', './c.js', './c.css'],
        },
        output: { // 打包后的输出目录
            path: './build', // 打包后的文件路径
            publicPath: 'build/', // 打包文件内用到的URL路径, 比如背景图等(可以设成http的地址, 比如: http://cdn.my.com)
            filename: '[name].js' // 打包后生成文件的命名规则, 这里是: index.js, about.js
        },
        externals: { // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过<script>引入了, 就无需都打包到一起了 
            jquery: 'jQuery',
        },
        module: {
            loaders: [
                { test: /\.css$/, loader: 'style-loader!css-loader' }, // 针对.css文件用2个加载器预处理(!号隔开多个加载器)
            ]
        },
    };

    加载模块

    // 1. 同步加载一个模块(像不像nodejs?)
    var a = require('./a.js');
    a.show();
    
    // 2. 异步按需加载模块(像不像requrejs?)
    require(['./a.js'], function(module){
        module.show();
        var c = require('./c.js').show(); // webpack的优化: 最终c.js会和a.js打包成一个模块
    });

    可以看到, 无论AMD/CMD标准的代码webpack都可以支持. 模块依赖/互相调用的问题, 轻松就解决了, 不需要自己开发或或引用第三方模块加载器了.

    上面提到, 任何资源都可以作为模块, 图片/html/json等, 都是可以require的, 只要配置好webpack配置的loaders里面的规则就OK了.

    优化打包

    什么时候css不打包成JS, 让css也打包成独立的css文件?
    打包后的文件名想用带哈希的文件名, 避免缓存?
    所有的页面都引用了common.js, lib.js, 希望最终打包的时候, 自动把公共的代码打包成一个独立的common.js?
    base64后, 图片的确减少了请求, 但是大图base64得到的字符串太长, 只希望小图片才转base64?
    这些都可以做到, 下面的PPT里面有写. 同时还有autoprefixer的介绍, scss/less/图片加载的例子, 通过css-sprite优化sprite.
    还有, debug的代码上线时, 不需要手动注释, 可以让webpack自动移除.

    旧项目如何改造

    AMD/CMD什么的还是要改造旧代码, 旧项目很多lib都是注册变量到window对象下面的, 怎么解?
    webpack提供Shim支持, 因为加载模块的逻辑都是loader来处理规则的, 所以imports,exports,expose这三个loader完全可以搞定旧lib.

    webpack-dev-server

    启动webpack-dev-server后, 本地调试代码时, 页面只需引入<script src="http://localhost:8080/webpack-dev-server.js"></script>, 在改版静态资源经过webpack编译好后, 页面会自动更新.

    和gulp结合使用

    webpack和gulp并不是敌人, 他们可以搭配使用, 只是我们的惯性思维, 还是停留在用gulp去做打包的动作. 当然单独用webpack基本大部分项目已经足够, 如果项目复杂, 任务较多, 或者需要使用不同的webpack实例, 那么他们结合起来用是没有任何问题的. gulp只负责好任务就OK了.

    links

    1. demo, 包括了webpack/gulp/css-sprite各自的例子以及组合使用的例子.
    2. webpack介绍PPT, 快一年了, 带批判性的看吧.
  • 自托管的git服务对比

    / 分类: 工具 / 4 Comments

    收集和对比了下一些自托管的git服务, 应该算比较全了; 同样在寻找比较好的方案的同学, 或许可以参考下, 少走一些弯路.

    收费

    • GitHub Enterprise: 按年付费,价格较贵(20人以内:$5000/每年),不提供源代码(只提供整套镜像:VMware的OVA镜像,和AWS的AMI镜像名),因为是一整套的镜像, 应该不能二次开发(stash没有这些限制).
    • Atlassian Stash: 语言:java, 按网上的评论应该是好于gitlab, 毕竟是收费的. 不需按年付费, 比Enterprise还是算便宜了(10人以内很便宜,只要$10).

    免费

    • gitlab: 语言:ruby, 应该免费的里面功能最完善的, 按官方文档安装容易卡住, 可以用这个一键安装包.
    • Gitorious: 也是ruby, 也有一键安装包, 评论基本都是安装/使用的体验比gitlab弱一些.
    • gitprep: 语言:Perl, 好像是个人开发的, 官网有demo可以看.
    • Gogs: 语言:Go, 感觉不错, 国人开发的, 更新较快(目前,没看到新建分支/pull-request功能). - gitbucket: 语言:Scala, 看界面和功能介绍貌似还不错.
    • Douban CODE: 语言:Python, github上的代码只提供一些基础功能(据说, 现在没人维护了, 有些可惜).

    Ps: 没发现一个nodejs/php的(还在维护并且功能完善的). 另外, 一些功能比较弱, 不支持权限/hook/pull-request就不在这里列出了.

    gitlab功能的确比较完善, 但是性能太差, 重启服务要等很久. 个人感觉Gogs/gitbucket应该可以尝试下.

  • chrome 插件 User-Agent Switcher +

    / 分类: 工具 / 9 Comments

    之前用的插件User-Agent Switcher for Chrome在开发版的chrome不能用了, 所以索性自己开发了一个.
    当然, 功能要比它更强大, 除了自动匹配域名使用不同的user-agent外, 还可以:

    • 根据关键词搜索User-Agent;
    • User-Agent列表可以tab切换焦点enter直接切换;
    • 快速添加/编辑/删除User-Agent和domain规则;
    • 备份/导入设置;

    User-Agent Switcher

    Ps: chrome插件开发者帐号要付款$5认证, 没法付款, 所以暂时还不能发布到chrome extensions.

    安装: https://raw.githubusercontent.com/kairyou/user-agent-switcher/master/build.crx

    下载到本地, 打开chrome://extensions/ 拖放到列表安装.

    源码: https://github.com/kairyou/user-agent-switcher