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

工具

  • npm包 CDN 收集

    / 分类: 工具 / No Comments

    jsDelivr(支持 combine)
    `https://cdn.jsdelivr.net/npm/:package@:version/:file`
    # https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
    unpkg
    `https://unpkg.com/:package@:version/:file`
    # https://unpkg.com/[email protected]/dist/jquery.min.js
    饿了么
    `https://npm.elemecdn.com/:package@:version/:file`
    # https://npm.elemecdn.com/[email protected]/dist/jquery.min.js
    知乎
    `https://unpkg.zhimg.com/:package@:version/:file`
    # https://unpkg.zhimg.com/[email protected]/dist/jquery.min.js
    百度
    `https://code.bdstatic.com/npm/:package@:version/:file`
    # https://code.bdstatic.com/npm/[email protected]/dist/jquery.min.js

    jsDelivr国内可能部分网络有问题, 但仅jsDelivr才支持combine(多个文件合并).
    使用CDN引入, 可以独立公共资源, 省去webpack打包. 当然, 也有人用来做图床.

  • Mac自签名ssl证书, 绑定域名启用https

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

    生成root CA(仅需一次)

    自签名证书, IOS 13/macOS 10.15有了新规定, 所以需要按如下方式生成.

    # 多个域名都可以用root CA签名
    mkdir ~/.ssl; cd ~/.ssl;
    openssl genrsa -out rootca.key 2048;
    openssl req -new -key rootca.key -out rootca.csr -sha256 -subj "/CN=Dev Root CA"
    echo "basicConstraints=CA:true" > rootca.cnf;
    openssl x509 -req -in rootca.csr -signkey rootca.key -out rootca.crt -extfile rootca.cnf -sha256 -days 825;
    open rootca.crt; # Mac钥匙串 打开(或, 双击文件名)
    # 钥匙串: 搜索 Dev Root CA, 双击证书, 设置始终信任 (Trust - When using this certificate: Always Trust).
    # for Android:
    # openssl x509 -inform PEM -outform DER -in rootca.crt -out rootca.der.crt

    创建本地ssl证书(使用lvh.me域名)

    openssl req -new -newkey rsa:2048 -nodes -keyout lvh.me.key -out lvh.me.csr -sha256 -subj "/CN=lvh.me"
    cat > domain.cnf <<-EOF
    authorityKeyIdentifier=keyid,issuer
    basicConstraints=CA:false
    keyUsage=digitalSignature,keyEncipherment,dataEncipherment
    extendedKeyUsage=serverAuth,clientAuth
    subjectAltName=@alt_names
    [alt_names]
    DNS.1=lvh.me
    DNS.2=*.lvh.me
    DNS.3=*.test.lvh.me
    EOF
    # 使用root CA签名
    openssl x509 -req -in lvh.me.csr -out lvh.me.crt -extfile domain.cnf -CA rootca.crt -CAkey rootca.key -CAcreateserial -sha256 -days 825

    lvh.me 是一个指向127.0.0.1的泛域名服务, 优点: 不需要改DNS/hosts, 各项目使用不同的域名方便隔离(比如cookies/密码管理器). 类似的还有xip.io, nip.io, localtest.me, fuf.me, vcap.me等.

    使用Apache或Nginx 绑定域名

    • 使用Apache

      # 1. 编辑 `/etc/apache2/httpd.conf`
      # 注释掉 这些行:
      LoadModule mpm_prefork_module libexec/apache2/mod_mpm_prefork.so
      Include /private/etc/apache2/extra/httpd-ssl.conf
      # 最下面添加:
      Listen 443
      ServerName localhost
      LoadModule mpm_event_module libexec/apache2/mod_mpm_event.so
      LoadModule proxy_module libexec/apache2/mod_proxy.so
      LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
      LoadModule macro_module libexec/apache2/mod_macro.so
      LoadModule ssl_module libexec/apache2/mod_ssl.so
      LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
      LoadModule http2_module libexec/apache2/mod_http2.so
      Include /Users/leon/.ssl/httpd-vhosts.conf
      
      # 2. 编辑 ~/.ssl/httpd-vhosts.conf, 增加:
      <Macro SSLLvh>
        SSLEngine on
        SSLCertificateFile /Users/leon/.ssl/lvh.me.crt
        SSLCertificateKeyFile /Users/leon/.ssl/lvh.me.key
        Protocols h2 http/1.1
      </Macro>
      <Macro Test>
        ServerName test.lvh.me
        ProxyRequests off
        <Location />
          ProxyPass http://localhost:3000/
          ProxyPassReverse http://localhost:3000/
        </Location>
      </Macro>
      <VirtualHost *:80>
        Use Test
      </VirtualHost>
      <VirtualHost *:443>
        Use SSLLvh
        Use Test
      </VirtualHost>
      <Macro Demo>
      # ...
      </Macro>
      <VirtualHost *:443>
        Use SSLLvh
        Use Demo
      </VirtualHost>
      
      # 3. 启动Apache
      # sudo apachectl configtest # test
      sudo apachectl -k restart # 启动
      # sudo apachectl -e debug # print errors
      # sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist # 开机启动

    查看全文 »

  • 使用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 官方推荐的生成证书的客户端工具, 文档.

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

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

    1. 创建, /etc/dnsrobocert/config.yml, 内容类似这样:
    # https://git.io/JL1cD
    draft: false
    acme:
      email_account: <youremail>
      staging: false
    profiles:
    - name: cloudflare
      provider: cloudflare
      provider_options:
        auth_username: <cloudflare_email>
        auth_token: <cloudflare_token>
    - name: dnspod
      provider: dnspod
      provider_options:
        auth_username: <dnspod_id>
        auth_token: <dnspod_token>
    certificates:
    - domains:
      - "*.xhl.me"
      -  xhl.me
      profile: cloudflare
      # autorestart:
      #   - containers:
      #     - nginx
      autocmd: # 自动重启
        - cmd: nginx -s reload
          containers:
          - nginx
    # - domains:
    #   - "*.test.com"
    #   profile: dnspod
    #   ...
    2. 根据DNS PROVIDER信息验证, 并自动创建和续期证书
    docker run -it --rm --name letsencrypt2 \
      -v /etc/dnsrobocert:/etc/dnsrobocert \
      -v /etc/letsencrypt:/etc/letsencrypt \
      -v /var/run/docker.sock:/var/run/docker.sock \
      adferrand/dnsrobocert

    LEXICON_PROVIDER 主流的DNS服务都支持, 比如:

    查看全文 »

  • 由linode改为搬瓦工

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

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

    SPECIAL 20G KVM PROMO V3 - LOS ANGELES - CN2

    内存: 1G; CPU: 1核; 硬盘: 20GB SSD; 流量: 1000GB/月; 带宽: 1Gbps;
    年付: $49.99(29RMB/月), CN2线路(电信/联通直连)

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

    内存: 1G; CPU: 2核; 硬盘: 20GB SSD; 流量: 1000GB/月; 带宽: 2.5Gbps;
    季付: $49.99(约100RMB/月), CN2 GIA线路(电信/联通/移动直连);
    性价比不错, 不仅适合建站, 大宽带还可以做其他事.

    SPECIAL 40G KVM PROMO V5 - HONG KONG CN2 GIA

    内存: 2G; CPU: 2核; 硬盘: 40GB SSD; 流量: 500GB/月; 带宽: 1Gbps;
    香港机房(电信/联通/移动直连), 香港机房价格一直涨, 便宜方案早下架了.
    现在最便宜: $89.99/月, 没性价比了, 土豪随意.

    *热门的很容易被抢光, 如果暂未补货/售空, 可以点这里查看所有的类型
    *付款使用优惠码: BWH3HYATVBJW 省6.58%. 支持支付宝/微信/PayPal付款.
    *续费按首次购买价格, 不受涨价影响
    *性价比: CN2 GIA > CN2 > 香港

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

    6K-7W Kbps # GCE 台湾(最近一直受干扰, 不太稳)
    3.5W-4.5W Kbps # 搬瓦工 CN2 GIA (比较稳, 油管4k没问题)
    6W-8W Kbps # 搬瓦工 香港 (比较稳, 油管4k没问题)
    2K-4K Kbps # Linode JP2

    *不影响体验, 一般至少要1w+的Kbps, CN2 GIA/香港/CN2线路都不错, 搬瓦工带宽1Gbps算非常难得了.
    如果要玩docker,建议至少选1G内存的.

    另外, 发现搬瓦工在卖SS服务(有3种套餐类型), 有GIA或香港线路, 最便宜~20RMB/月.
    同样支持PayPal/支付宝付款, 付款可用优惠码JMS9272283.

  • 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, 快一年了, 带批判性的看吧.