Nginx实现静态资源的反向代理实例
github中很多项目都有一个readme文件，很多人喜欢在文件中添加自己的创作或封面图片，比如substack为他的每个项目绘制了一个logo。这些图片在github中能直接在页面中显示出来，不过url被替换成了github自己的。比如在browserify项目中，logo的链接变成了
https://camo.githubusercontent.com/e19e230a9371a44a2eeb484b83ff4fcf8c824cf7/687474703a2f2f737562737461636b2e6e65742f696d616765732f62726f777365726966795f6c6f676f2e706e67
而我们通过查看raw能发现原url是
http://substack.net/images/browserify_logo.png
这样做的一个好处是防止因为在https网站中出现http链接，否则在客户端会得到一个风险警告。github在细节上真是考虑的十分周到。
既然有需求，我们就来实现它。通常的做法是写一个应用去抓取远程的静态资源，然后反馈给前端，这就是一个简单地反向代理了。但是这样做比较繁琐，效率也未见得高，其实我们可以直接通过nginx来代理这些静态文件。
nginx的proxy_pass支持填写任意地址，并且支持dns解析。所以我的思路是，将原url加密转成网站自身的url。比如上面的
http://substack.net/images/browserify_logo.png
可以加密成
764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea(加密和序列化算法网上有很多，在此就不赘述了)
然后放在我们自己的域名下：
https://ssl.youdomain.com/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
解密的步骤用nginx会比较难实现，所以当用户通过上述链接请求时，先讲请求传递给解密程序，这里有一个coffeescript版本的例子：
express=require'express'
app=express()
app.get'/camo/:eurl',(req,res)->
{eurl}=req.params
{camoSecret}=config #这里使用自己的密钥
rawUrl=util.decrypteurl,camoSecret
returnres.status(403).end('INVALIDURL')unlessrawUrl
res.set'X-Origin-Url',rawUrl
res.set'X-Accel-Redirect','/remote'
res.end()
app.listen3000
然后写入X-Accel-Redirect响应头做内部跳转，下面的步骤就由nginx完成了。
下面是一个完整的nginx配置文件例子：
server{
listen80;
server_namessl.youdomain.com;
location/camo/{
proxy_passhttp://localhost:3000;
proxy_set_headerX-Real-IP$remote_addr;
proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;
proxy_set_headerHost$http_host;
proxy_set_headerX-NginX-Proxytrue;
proxy_http_version1.1;
proxy_set_headerUpgrade$http_upgrade;
proxy_set_headerConnection"Upgrade";
proxy_redirectoff;
break;
}
location/remote{
internal;
resolver192.168.0.21; #必须加上dns服务器地址，否则nginx无法解析域名
set$origin_url$upstream_http_x_origin_url;
proxy_pass$origin_url;
add_headerHost"file.local.com";
break;
}
}
nginx的upstream模块会把所有的响应头加上$upstream_http_前缀当成一个变量保存，所以在上面的例子中我们将原url放在X-Origin-Url响应头中，在nginx就变成了$upstream_http_x_origin_url变量，但是在proxy_pass中不能直接引用，非要通过set来设置才能引用，这个我不是很理解，希望有高手能解答。
这样下来，每次当用户请求
https://ssl.youdomain.com/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
时，nginx就会去抓取
http://substack.net/images/browserify_logo.png
的内容返回给用户。我们还可以在nginx之前加上varnish，用以缓存静态文件的内容。这样就跟githubusercontent的做法更加一致了。