Nginx实现静态资源的反向代理实例
更新时间：2015年03月20日 08:53:04 投稿：junjie
这篇文章主要介绍了Nginx实现静态资源的反向代理实例,本文通过分析github发现这个应用,可以避免在https的网站中出现http链接,需要的朋友可以参考下
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.decrypt eurl, camoSecret
return res.status(403).end('INVALID URL') unless rawUrl
res.set 'X-Origin-Url', rawUrl
res.set 'X-Accel-Redirect', '/remote'
res.end()
app.listen 3000
然后写入 X-Accel-Redirect 响应头做内部跳转，下面的步骤就由 nginx 完成了。
下面是一个完整的 nginx 配置文件例子：
复制代码 代码如下:
server {
listen 80;
server_name ssl.youdomain.com;
location /camo/ {
proxy_pass http://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.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 的做法更加一致了。
相关文章
这篇文章主要介绍了Nginx 配置 HTTPS 完整过程,包括nginx 的 ssl 模块安装，ssl 证书部署，nginx.conf 配置，重启 nginx无信息提示就成功啦，本文给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
现在前端页面部署正常访问,但是刷新的时候出现了404,所以下面给整理下,这篇文章主要给大家介绍了关于nginx部署前端项目后刷新浏览器报错404问题的解决办法,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Nginx+tomcat负载均衡集群,的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了Nginx 403 forbidden的解决办法,,需要的朋友可以参考下2014-03-03
在现代Web开发中,Nginx作为一款高性能的开源反向代理服务器,提供了强大的功能来管理网络流量和路由,本文将介绍如何利用 Nginx 的反向代理功能,以实现多端口跳转的效果,需要的朋友可以参考下2024-02-02
今天小编就为大家分享一篇nginx配置限制同一个ip的访问频率方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-08-08
这篇文章主要介绍了nginx使用ssl模块配置支持HTTPS访问的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
Apache和Nginx的优缺点详解_动力节点Java学院整理
Nginx和Apache一样，都是HTTP服务器软件，在功能实现上都采用模块化结构设计，都支持通用的语言接口。下面通过本文给大家分享Apache和Nginx比较 功能对比，感兴趣的朋友参考下吧2017-08-08
这篇文章主要介绍了通过Nginx解决网络隔离实践记录详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
订单系统增加附件预览,下载的功能,但是这个附件是客户推单时推送过来的,文件连接是类似oss连接,但是是客户的域名,所以导致跨域问题,本文小编将给大家介绍如何用nginx解决前端js下载跨域问题,需要的朋友可以参考下2023-10-10
最新评论