快捷導(dǎo)航

Nginx實(shí)現(xiàn)靜態(tài)資源的反向代理實(shí)例

更新時(shí)間：2015年03月20日 08:53:04 投稿：junjie

這篇文章主要介紹了Nginx實(shí)現(xiàn)靜態(tài)資源的反向代理實(shí)例,本文通過分析github發(fā)現(xiàn)這個(gè)應(yīng)用,可以避免在https的網(wǎng)站中出現(xiàn)http鏈接,需要的朋友可以參考下

github 中很多項(xiàng)目都有一個(gè) readme 文件，很多人喜歡在文件中添加自己的創(chuàng)作或封面圖片，比如 substack 為他的每個(gè)項(xiàng)目繪制了一個(gè) logo。這些圖片在 github 中能直接在頁面中顯示出來，不過 url 被替換成了 github 自己的。比如在 browserify 項(xiàng)目中，logo 的鏈接變成了

復(fù)制代碼代碼如下:

https://camo.githubusercontent.com/e19e230a9371a44a2eeb484b83ff4fcf8c824cf7/687474703a2f2f737562737461636b2e6e65742f696d616765732f62726f777365726966795f6c6f676f2e706e67

而我們通過查看 raw 能發(fā)現(xiàn)原 url 是

復(fù)制代碼代碼如下:

http://substack.net/images/browserify_logo.png

這樣做的一個(gè)好處是防止因?yàn)樵?https 網(wǎng)站中出現(xiàn) http 鏈接，否則在客戶端會(huì)得到一個(gè)風(fēng)險(xiǎn)警告。github 在細(xì)節(jié)上真是考慮的十分周到。
既然有需求，我們就來實(shí)現(xiàn)它。通常的做法是寫一個(gè)應(yīng)用去抓取遠(yuǎn)程的靜態(tài)資源，然后反饋給前端，這就是一個(gè)簡(jiǎn)單地反向代理了。但是這樣做比較繁瑣，效率也未見得高，其實(shí)我們可以直接通過 nginx 來代理這些靜態(tài)文件。
nginx 的 proxy_pass 支持填寫任意地址，并且支持 dns 解析。所以我的思路是，將原 url 加密轉(zhuǎn)成網(wǎng)站自身的 url。比如上面的

復(fù)制代碼代碼如下:

http://substack.net/images/browserify_logo.png

可以加密成

復(fù)制代碼代碼如下:

764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea (加密和序列化算法網(wǎng)上有很多，在此就不贅述了)

然后放在我們自己的域名下：

復(fù)制代碼代碼如下:

https://ssl.youdomain.com/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea

解密的步驟用 nginx 會(huì)比較難實(shí)現(xiàn)，所以當(dāng)用戶通過上述鏈接請(qǐng)求時(shí)，先講請(qǐng)求傳遞給解密程序，這里有一個(gè) coffeescript 版本的例子：

復(fù)制代碼代碼如下:

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 響應(yīng)頭做內(nèi)部跳轉(zhuǎn)，下面的步驟就由 nginx 完成了。
下面是一個(gè)完整的 nginx 配置文件例子：

復(fù)制代碼代碼如下:

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 服務(wù)器地址，否則 nginx 無法解析域名

        set $origin_url $upstream_http_x_origin_url;

        proxy_pass $origin_url;

        add_header Host "file.local.com";

        break;

    }

}

nginx 的 upstream 模塊會(huì)把所有的響應(yīng)頭加上 $upstream_http_ 前綴當(dāng)成一個(gè)變量保存，所以在上面的例子中我們將原 url 放在 X-Origin-Url 響應(yīng)頭中，在 nginx 就變成了 $upstream_http_x_origin_url 變量，但是在 proxy_pass 中不能直接引用，非要通過 set 來設(shè)置才能引用，這個(gè)我不是很理解，希望有高手能解答。
這樣下來，每次當(dāng)用戶請(qǐng)求

復(fù)制代碼代碼如下:

https://ssl.youdomain.com/camo/764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea

時(shí)，nginx 就會(huì)去抓取

復(fù)制代碼代碼如下:

http://substack.net/images/browserify_logo.png

的內(nèi)容返回給用戶。我們還可以在 nginx 之前加上 varnish，用以緩存靜態(tài)文件的內(nèi)容。這樣就跟 githubusercontent 的做法更加一致了。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Nginx實(shí)現(xiàn)靜態(tài)資源的反向代理實(shí)例

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具