2019年5月

[脸红] [亲亲] [吹泡泡]

张大妈 的时候发现了很多文章用到这个魔性的表情,能将作者丰富的情感表达出来。我也想在我的博客拥有这套表情包,便有了此插件。

项目地址:Github

接入说明

你可以下载本项目,引用 JS 和 CSS,通过固定的表情语法来使用表情。

...
<link rel="stylesheet" href="path/src/css/alu.css">
...
<script src="path/src/js/alu.js"></script>
<script>
    // 你可以直接使用
    ALU();
    // 同时也可以传入参数进行配置
    // ALU({
    //     element: document.body,
    //     url: "https://res.smzdm.com/images/emotions/",
    //     addClass: "alu-face",
    //     mapping: {
    //         "高兴": "22.png",
    //         "皱眉": "23.png",
    //         "阴笑": "24.png",
    //         "鄙视": "25.png",
    //         "邪恶": "26.png",
    //         "大囧": "27.png",
    //         "惊喜": "28.png",
    //         "小眼睛": "29.png",
    //         "小怒": "30.png",
    //         "无语": "31.png",
    //         "傻笑": "32.png",
    //         "期待": "33.png",
    //         "得逞": "34.png",
    //         "呲牙": "35.png",
    //         "喜极而泣": "36.png",
    //         "晕死": "37.png",
    //         "脸红": "38.png",
    //         "亲亲": "39.png",
    //         "狂汗": "40.png",
    //         "困": "41.png",
    //         "饥饿": "42.png",
    //         "得意": "43.png",
    //         "抠鼻": "44.png",
    //         "抽烟": "45.png",
    //         "内伤": "46.png",
    //         "口水": "47.png",
    //         "吐": "48.png",
    //         "流鼻涕": "49.png",
    //         "绷带": "50.png",
    //         "吐舌": "51.png",
    //         "口罩": "52.png",
    //         "不说话": "53.png",
    //         "不出所料": "54.png",
    //         "装大款": "55.png",
    //         "尴尬": "56.png",
    //         "喷水": "57.png",
    //         "喷血": "58.png",
    //         "咽气": "59.png",
    //         "哼小曲": "60.png",
    //         "吹泡泡": "61.png",
    //         "愤怒": "62.png",
    //         "冻住": "63.png",
    //         "赞一个": "64.png",
    //         "差评": "65.png",
    //         "中指": "66.png",
    //         "哦耶": "67.png",
    //         "拳头": "68.png",
    //         "手掌": "69.png",
    //         "就是你": "70.png",
    //         "过来": "71.png",
    //         "吃雪糕": "72.png",
    //         "吃香蕉": "73.png",
    //         "ok": "74.png",
    //         "看不见": "75.png",
    //         "无所谓": "76.png",
    //         "欢呼": "77.png",
    //         "偷笑": "78.png",
    //         "无奈": "79.png",
    //         "害羞": "80.png",
    //         "打脸": "81.png",
    //         "想一想": "82.png",
    //         "嘘": "83.png",
    //         "烧香": "84.png",
    //         "抱拳": "85.png",
    //         "鼓掌": "86.png",
    //         "观察": "87.png",
    //         "锁眉": "88.png",
    //         "黑线": "89.png",
    //         "汗": "90.png",
    //         "哭泣": "91.png",
    //         "阴暗": "92.png",
    //         "暗地观察": "93.png",
    //         "潜水": "94.png",
    //         "蜡烛": "95.png",
    //         "投降": "96.png",
    //         "吐血倒地": "97.png",
    //         "便便": "98.png",
    //         "长草": "99.png",
    //         "绿帽子": "100.png",
    //         "注意安全": "101.png",
    //         "被砍": "102.png",
    //         "捶打": "103.png",
    //         "肿包": "104.png",
    //         "坐等": "105.png",
    //         "看热闹": "106.png",
    //         "深思": "107.png",
    //         "被监视": "108.png",
    //     },
    // });
</script>

参数说明

参数必填含义默认值
element需要转换表情的标签容器document.body
url表情链接地址,如果你使用本地地址请配置类似 /path/img/https://res.smzdm.com/images/emotions/
addClass表情添加的样式名用于控制样式alu-face
mapping表情映射关系,一般不需要改动{...}

使用语法

在接入完成后,你可以使用特定的表情语法来使用表情。格式为 [表情名],比如:[高兴 ](末尾加了一个空格防止被转换)。
它将解释为:高兴

表情列表

表情列表

已知问题

  • code 标签内容也会被转换,正在想办法来过滤一些标签,如果你有好的提议请联系我。

遇到困难

  • 如果你在使用中有任何疑问,请点击 Issues 中查看或创建新的问题

不知什么时候起,新浪图床开始对图片采取防盗链措施。还好博客的图片很早之前就迁移到了 OneDrive,免费的才是最贵的来描述使用新浪作为图床的朋友再适合不过。

不过我看了一下防盗链机制,发现还有机会抢救一下。目前发现第三方域名调用图片,Network 为 403,通过图片链接点击也是 403,而直接复制新标签页打开则正常显示。

这种防盗链机制我在 donwa/oneindex 程序上也写过,根据请求头的 Referer 来判断请求的来源页,如果非白名单域名则直接返回 403。

使用 CURL 证实猜想:

$ curl http://ww1.sinaimg.cn/large/0061wtobgy1fxmqoe86rkj30gb0gb76n.jpg -H "Referer:https://blog.wangmao.me/" -G -I 
HTTP/1.1 403 Forbidden
Server: Tengine
Date: Wed, 22 May 2019 08:48:35 GMT
Content-Type: text/html
Content-Length: 254
Connection: keep-alive
X-Tengine-Error: denied by Referer ACL
X-Via-CDN: f=alicdn,s=cache1.cn64,c=183.62.230.102;
Via: cache1.cn64[,403003]
Timing-Allow-Origin: *
EagleId: 7793461515585149156862720e

$ curl http://ww1.sinaimg.cn/large/0061wtobgy1fxmqoe86rkj30gb0gb76n.jpg -H "Referer:https://mobile.sina.com.cn/" -G -I
HTTP/1.1 200 OK
Server: Tengine
Content-Type: image/jpeg
Content-Length: 97491
Connection: keep-alive
Date: Tue, 21 May 2019 03:42:08 GMT
x-debug-hit: sto(97491,0.001)
Pragma: public
Cache-Control: max-age=7776000
Last-Modified: Mon, 08 Jul 2013 18:06:40 GMT
Expires: Mon, 19 Aug 2019 03:42:08 GMT
X-Request-ID: g2.125-1558410128.494000-2249042609
LB_HEADER: wbtngx.29.wbg1.shx.lb.sinanode.com
Via: http/1.1 cnc.beixian.ha2ts4.212 (ApacheTrafficServer/6.2.1 [cMsSfW]), http/1.1 cmcc.beijing.ha2ts4.160 (ApacheTrafficServer/6.2.1 [cMsSfW]), cache4.l2cm12-1[0,200-0,H], cache19.l2cm12-1[0,0], cache8.cn64[70,200-0,M], cache10.cn64[71,0]
X-Via-Edge: 15584101284105dd10d6fdec1b3dd569fc895
X-Via-CDN: f=alicdn,s=cache10.cn64,c=183.62.230.102;f=alicdn,s=cache19.l2cm12-1,c=119.147.70.28;f=edge,s=cmcc.beijing.ha2ts4.205.nb.sinaedge.com,c=111.13.209.93;f=Edge,s=cmcc.beijing.ha2ts4.160,c=221.179.175.205;f=edge,s=cnc.beixian.ha2ts4.213.nb.sinaedge.com,c=172.16.181.61;f=Edge,s=cnc.beixian.ha2ts4.212,c=123.126.157.213
Ali-Swift-Global-Savetime: 1558410128
X-Swift-SaveTime: Tue, 21 May 2019 03:42:08 GMT
X-Swift-CacheTime: 7776000
Age: 104777
X-Cache: MISS TCP_MISS dirn:-2:-2
X-Swift-SaveTime: Wed, 22 May 2019 08:48:25 GMT
X-Swift-CacheTime: 7671223
Timing-Allow-Origin: *
EagleId: 7793461e15585149053975458e

这就好办了,Nginx 直接代理 Referer 欺骗图床服务器。实现代码如下:

server {
  listen 80;
  listen 443 ssl http2;
  server_name sina-img.wangmao.me;
  index index.html index.htm index.php;
  ...
  #全站代理
  location / {
    #设置 host
    proxy_set_header Host $proxy_host;
    #设置 referer 这里我用的手机版的新浪首页你可以自己找找其他的
    proxy_set_header Referer https://mobile.sina.com.cn;
    #最后代理域名 ws1 ww1 wx3 wx4 等
    proxy_pass https://ww1.sinaimg.cn/;
  }
  ...
}

当然这样会走自己的服务器的流量,你需要修改全文替换新浪的域名为你的域名。就像这样 https://sina-img.wangmao.me/large/0061wtobgy1fxmqoe86rkj30gb0gb76n.jpg

还是趁早迁移吧,毕竟免费的才是最贵的。

关于 CORS 的介绍,可以参见往期文章:简单谈谈跨域请求(CORS)

简单来说,CORS 是一种解决浏览器跨域问题的方法,NPM 的实现有 Rob--W/cors-anywhere 这个轮子。

我也曾写过 PHP 的轮子 isecret/gh-oauth-server 用于解决 Github 的跨域请求,最近又冒出了利用 Nginx 反向代理来再造轮子。

思路如下:针对预检请求(OPTION)响应头增加 Access-Control-Allow-* 相关的头信息,查阅文档发现 add_header 可实现;其次是代理URL地址的问题,我选择直接获取域名后的字符作为代理的地址,格式如下:https://cors.wangmao.me/https://github.com/login/oauth/access_token,取 Host https://cors.wangmao.me/ 之后的字符作为 URL,这个地址看起来很诡异,但确实是最优的解决方式,代理地址通过正则可以匹配出来,但是注意这里匹配出来的 uri 实际上是 https:/github.com/login/oauth/access_token,协议部分只有一个 /,所以需要自己补充;另外是代理的 HostReferer,这俩就直接取 $proxy_host 可以搞定。

具体实现如下:

http {
  # 代理变量时需要告知DNS,不然会报出 no resolver defined to resolve 错误
  resolver 8.8.8.8;
}

server {
  listen 80;
  listen 443 ssl http2;
  ssl_certificate /usr/local/nginx/conf/ssl/cors.wangmao.me.crt;
  ssl_certificate_key /usr/local/nginx/conf/ssl/cors.wangmao.me.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  ssl_ciphers TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers on;
  ssl_session_timeout 10m;
  ssl_session_cache builtin:1000 shared:SSL:10m;
  ssl_buffer_size 1400;
  add_header Strict-Transport-Security max-age=15768000;
  ssl_stapling on;
  ssl_stapling_verify on;
  server_name cors.wangmao.me;
  access_log off;
  error_log /data/wwwlogs/cors.wangmao.me.error.log;
  index index.html index.htm index.php;
  root /data/wwwroot/cors.wangmao.me;
  if ($ssl_protocol = "") { return 301 https://$host$request_uri; }

  include /usr/local/nginx/conf/rewrite/none.conf;
  #error_page 404 /404.html;
  #error_page 502 /502.html;

  #取代理地址 $1 为协议,$2 为地址
  #另外这里取到的 requst_uri https://xxx.com 实际为 http:/xxx.com 只有一个 /
  location ~* "/(.*):/(.*)" {
    #增加响应头允许请求的域和方法等
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "POST,GET,PUT,OPTIONS,DELETE";
    add_header Access-Control-Max-Age "3600";
    add_header Access-Control-Allow-Headers "Origin,X-Requested-With,Content-Type,Accept,Authorization,FOO";
    add_header Content-Length 0;
    add_header Content-Type "application/json;charset=utf-8,text/plain";
    add_header Proxy-Addr https://cors.wangmao.me;
    #如果为预检请求则直接响应204
    if ($request_method = OPTIONS ) {
      return 204;
    }
    #设置代理 Host 和 Referer
    proxy_set_header Host $proxy_host;
    proxy_set_header Referer $proxy_host;
    #告知代理内容类型为 json
    proxy_set_header Accept "application/json";
    #增加一个代理UA头
    proxy_set_header User-Agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36";
    #代理地址
    proxy_pass $1://$2/;
  }

  location ~ /\.ht {
    deny all;
  }
}

前言

Docker 为 macOS 平台提供了一个非常方便的开发环境,要知道 MAMP 环境在 macOS 是付费的,其实我挺纳闷的,Apache 是免费的,MySQL 是免费的,PHP 也是开源的,怎么集成在 macOS 上就成了付费软件,颇有一种拿别人的成果赚自己的钱的感觉。

我使用 Docker 有一段时间了,再享受它带来的便利的同时也总感觉什么地方怪怪的,但也说不出来。直到和同事联调接口的时候,同事忍受不了我的本地环境非要让我更新到测试环境。我:???

本地环境的响应速度实在令人错愕:平均响应时间:2000ms+,如果接口里还有 CURL 的话还要翻倍。

天下苦秦久矣

无奈之下,检索关键字:docker so slow,结果还真不少。

首先来到 docker for mac 的一个 Issues,讨论甚是热闹,其中一个回答得很多赞。如下:

wadjeroudi: For those who look for a workaround and didn't read the whole thread, here is the solution :
https://github.com/EugenMayer/docker-sync

原文地址:https://github.com/docker/for-mac/issues/77#issuecomment-245210458

接着找到 docker-sync 的代码仓库,简介如下:

Run your application at full speed while syncing your code for development, finally empowering you to utilize docker for development under OSX/Windows/*Linux

参照 docker-sync 的 官方文档,开始配置,过程记录下来。

首先先安装 docker-sync 及其依赖的同步策略,各平台支持的同步策略如下:

  • OSX: native_osx,unison,rsync
  • Windows: unison
  • Linux: native_linux,unison

结论如下,如果不想折腾直接用 unison 就行,不过 macOS 推荐的配置为 native_osx

安装 docker-sync 和 unison 策略支持:

$ gem install docker-sync
$ brew install unison
$ brew install eugenmayer/dockersync/unox

如果提示 brew command not found ,请自行安装 Homebrew,地址:Homebrew

编写配置文件 docker-sync.yml

version: '2'

options:
  verbose: false

syncs:
  unison-sync:
    # 需要挂载的目录
    src: '/path/to/app'
    # 同步策略 macOS 推荐 native_osx,Windows 配置为 unison
    sync_strategy: native_osx
    # 这里的用户 ID 为 1000,请确认你的 php-fpm 为同一个用户
    sync_userid: 1000
    # 忽略的文件
    sync_excludes: [
      '.gitignore',
      '.git/',
      '.DS_Store',
    ]

关闭并销毁容器:

$ docker-compose down

修改 docker-compose.yml

version: "3"

# 新增挂载卷
volumes:
  unison-sync:
    external: true

services:
  nginx:
    image: nginx:${NGINX_VERSION}
    ports:
      - "${NGINX_HTTP_HOST_PORT}:80"
      - "${NGINX_HTTPS_HOST_PORT}:443"
    volumes:
      # 此处使用挂载卷作为源
      - unison-sync:/var/www/html/:nocopy
      - ${NGINX_CONFD_DIR}:/etc/nginx/conf.d/:rw
      - ${NGINX_CONF_FILE}:/etc/nginx/nginx.conf:ro
      - ${NGINX_LOG_DIR}:/var/log/nginx/:rw
    restart: always
    networks:
      default:
        ipv4_address: 10.0.0.10

现在启动同步并尝试启动容器:

$ docker-sync start
$ docker-compose build  #重新构建容器
$ docker-comopse up -d

现在 macOS 和容器为双向同步,但也存在不同步的情况,这个时候需要手动重新同步:

$ docker-sync clean
$ docker-sync start

总结

Docker 在 macOS 和 Windows 上文件效率要低 10 倍到 40 倍不等,主要原因是 macOS 和 Windows 均是以虚拟的方式运行,文件越多,转换越慢。

最理想的方式挂载 Vagrant 至 Virtual Box,然后在 Virtual Box 里运行 Linux,在 Linux 上跑 Docker,这样将性能损耗降到最低,有时间再折腾吧。

参考