menu LittleJake's Blog
color_lens
avatar
Jake Liu
Never Settle
creative commons by-nc-sa
hit
Category
keyboard_arrow_down

© 2024 LittleJake's Blog.

萌ICP备20223020号

Nginx静态资源反向代理配置文件摸索

背景

受GSPrxy的启发,制作了nginx反向代理静态资源,并制作了相关扩展。

制作历程

  • 使用类似方式,通过二级目录只反代pixiv,发现产生502错误
  • 不能通过自定义host,未理解清楚proxy_pass斜杠含义
  • 部分网站资源需要添加referer。防提示盗链
  • 需要大量使用sub_filter替换URL

成功历程

11月23日

使用二级域名+URL方式反向代理
只对HTTPs进行代理,添加配置

proxy_ssl_name $proxy_ip;
proxy_ssl_server_name on;

11月24日

增加nginx缓存功能,以及cloudflare缓存功能

proxy_cache_path /tmp levels=1:2 keys_zone=cache:50m inactive=2h max_size=100m;
proxy_cache cache;
proxy_cache_valid 200 304 302 2h;

增加代理类型判断,判断常见资源文件:字体、样式、脚本、图片。
增加css脚本调用url替换(使用sub_filter替换时不能使用双引号、需关闭proxy获得的数据压缩Accept-Encoding)

#proxy_cache_path /tmp levels=1:2 keys_zone=cache:50m inactive=2h max_size=100m;
server {
        listen        80;
        server_name  127.0.0.1;

        resolver 8.8.8.8;
        if ( $request_uri ~ ^/([^/]+)/(.*)(css|js|woff2)$ ) {
                set $proxy_ip $1;
                set $proxy_url $2;
                set $extension $3;
        }

        if ( $extension !~ (css|js|woff2) ) {
                return 404;
        }


        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $proxy_ip;
        proxy_set_header X-Forwarder-For $remote_addr;
        proxy_set_header User-Agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36 Edg/86.0.622.70";
        proxy_set_header Referer http://$proxy_ip;
        proxy_set_header Cookie "";
        proxy_ssl_name $proxy_ip;
        proxy_ssl_server_name on;
        location / {
                 proxy_set_header Accept-Encoding "";
                 proxy_pass https://$proxy_ip/$proxy_url$extension?$args;
                 sub_filter_types text/css;
                 sub_filter_once off;
                 sub_filter url(/ url(/$proxy_ip/;
                 proxy_cache cache;
                 proxy_cache_valid 200 304 302 2h;
        }
        access_log off;
}

11月25日

更换为rewrite

rewrite ^/([^/]+)/(.*) /$2 break;

11月27日

subfilter替换部分css文件资源文件相对路径的位置

    sub_filter_types text/css;
    sub_filter_once off;
    sub_filter url(/ url(/$proxy_ip/;

成品

proxy_cache_path /data/www/temp/ levels=1:2 keys_zone=cache:50m inactive=1h max_size=100m;
server {
        listen        80;
        server_name  127.0.0.66;

        resolver 8.8.8.8;
        if ( $uri ~ ^/([^/]+)/(.*)$ ) {
            set $proxy_ip $1;
            set $proxy_url $2;
        }

        rewrite ^/([^/]+)/(.*) /$2 break;
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $proxy_ip;
        proxy_set_header X-Forwarder-For $remote_addr;
        proxy_set_header Referer https://$proxy_ip;
        proxy_set_header Cookie "";
        proxy_ssl_name $proxy_ip;
        proxy_ssl_server_name on;
        location / {
            proxy_set_header Accept-Encoding "";
            proxy_pass https://$proxy_ip;
            sub_filter_types text/css;
            sub_filter_once off;
            sub_filter url(/ url(/$proxy_ip/;
            proxy_cache cache;
            proxy_cache_valid 200 304 302 2h;
        }
        access_log off;
}

效果图

使用前

使用前

使用后

使用后

  • 加载速度较为明显改善

缺点

  • 非所有网站支持:由于CORS policy的原因,跨域资源限制较为严格
  • 建议一般为自建站时使用外部资源搭建可使用相应cdn加速
    希望未来静态资源完全都存在全球都有加速的CDN上,比如:cdn.jsdelivr.net

测试CDN(HTTPS)

https://cdn.littlejake.net/你的网址
(只代理常用的静态资源类型)

感谢

感谢@sskaje启发

Buy me a beer
Jake Liu
Never Settle

Title: Nginx静态资源反向代理配置文件摸索

Author: Jake Liu

Origin:

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) For any re-post you must give appropriate credit.

文章遵循CC许可 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请注明出处

Tag:cloudflare, cdn, nginx, reverse proxy, chrome, edge, jsdelivr

评论区

Add a new comment.

Theme