李克才
github 中很多项⽬都有⼀个 readme ⽂件，很多⼈喜欢在⽂件中添加⾃⼰的创作或封⾯图⽚，⽐如 substack 为他的每个项⽬绘制了⼀个 logo。这些图⽚在 github 中能直接在页⾯中显⽰出来，不
过 url 被替换成了 github ⾃⼰的。⽐如在 browserify 项⽬中，logo 的链接变成了韩寒
复制代码代码如下:
camo.githubusercontent/e19e230a9371a44a2eeb484b83ff4fcf8c824cf7/687474703a2f2f737562737461636b2e6e65742f696d616765732f62726f777365726966795f6c6f676f2e706e67
⽽我们通过查看 raw 能发现原 url 是
复制代码代码如下:
substack/images/browserify_logo.png
这样做的⼀个好处是防⽌因为在 https ⽹站中出现 http 链接，否则在客户端会得到⼀个风险警告。github 在细节上真是考虑的⼗分周到。 既然有需求，我们就来实现它。通常的做法是写⼀个应⽤去抓取远程的静态资源，然后反馈给前端，这
就是⼀个简单地反向代理了。但是这样做⽐较繁琐，效率也未见得⾼，其实我们可以直接通过 nginx 来代理这些静态⽂件。
nginx 的 proxy_pass ⽀持填写任意地址，并且⽀持 dns 解析。所以我的思路是，将原 url 加密转成⽹站⾃⾝的 url。⽐如上⾯的 复制代码代码如下:
substack/images/browserify_logo.png
可以加密成三基荧光粉
复制代码代码如下:
764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea (加密和序列化算法⽹上有很多，在此就不赘述了)
然后放在我们⾃⼰的域名下：
复制代码代码如下:
udomain/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
解密的步骤⽤ nginx 会⽐较难实现，所以当⽤户通过上述链接请求时，先讲请求传递给解密程序，这⾥有⼀个 coffeescript 版本的例⼦：
复制代码代码如下:
express = require 'express'
app = express()
< '/camo/:eurl', (req, res) ->
{eurl} = req.params
{camoSecret} = config # 这⾥使⽤⾃⼰的密钥
rawUrl = util.decrypt eurl, camoSecret
return res.status(403).end('INVALID URL') unless rawUrl
res.set 'X-Origin-Url', rawUrl
res.set 'X-Accel-Redirect', '/remote'
app.listen 3000
然后写⼊ X-Accel-Redirect 响应头做内部跳转，下⾯的步骤就由 nginx 完成了。
下⾯是⼀个完整的 nginx 配置⽂件例⼦：
复制代码代码如下:征服者f313
server {
listen 80;
server_udomain;
location /camo/ {
proxy_pass localhost:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_redirect off;
break;
花腔女高音}
location /remote {
internal;
resolver 192.168.0.21; # 必须加上 dns 服务器地址，否则 nginx ⽆法解析域名
长春劳模会馆set $origin_url $upstream_http_x_origin_url;
proxy_pass $origin_url;
add_header Host "file.local";
break;
}
}
nginx 的 upstream 模块会把所有的响应头加上 $upstream_http_ 前缀当成⼀个变量保存，所以在上⾯的例⼦中我们将原 url 放在 X-Origin-Url 响应头中，在 nginx 就变成了
$upstream_http_x_origin_url 变量，但是在 proxy_pass 中不能直接引⽤，⾮要通过 set 来设置才能引⽤，这个我不是很理解，希望有⾼⼿能解答。
这样下来，每次当⽤户请求
复制代码代码如下:
udomain/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
时，nginx 就会去抓取
复制代码代码如下:
substack/images/browserify_logo.png
的内容返回给⽤户。我们还可以在 nginx 之前加上 varnish，⽤以缓存静态⽂件的内容。这样就跟 githubusercontent 的做法更加⼀致了。
