Nginx configures Google fonts reverse proxy to turn on HTTP2/SSL support

Keywords: Web Server Nginx Google SSL OpenSSL

Because of the use of Google fonts PT Serif fonts for blog themes, only Google fonts fonts fonts fonts can be used in China through the proxy of CUHK. Recently, however, it has been found that its speed is unstable and its response time sometimes exceeds 600 ms. Just because I have it. VPS of vultr (with small tail) I set up one for myself.

The VPS environment is as follows:

  • Ubuntu 14.04

  • Nginx 1.12.0

  • Openssl 1.0.2j (minimum openssl version required for new Nginx to open http2)

Recompile and install Nginx

If the previous compilation and installation does not open the relevant module, it needs to be recompiled. The parameters are as follows:

./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-openssl=/usr/local/ssl --with-http_v2_module --with-http_sub_module

Make & & make install OK if there are no errors in compiling

Configure Nginx Inversion

Basic configuration

upstream google {
    server fonts.googleapis.com:80;
}

upstream gstatic {
    server fonts.gstatic.com:80;
}
proxy_temp_path   /your/path/tmp 1 2;
proxy_cache_path  /your/path/cache levels=1:2 keys_zone=cache1:100m inactive=30d max_size=1g;

80 port configuration

server {
    listen 80;
    server_name your.proxy.domain;
    root /your/path/;
    location /css {
        sub_filter 'fonts.gstatic.com' 'your.proxy.domain';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://google;
        proxy_cache cache1;
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 304 10m;
        expires 365d;
    }
    location / {
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://gstatic;
        proxy_cache cache1;
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 304 10m;
        expires 365d;
    }
}

443 port configuration

First you have to have a free HTTPS certificate, which can be referred to in my previous article: Application and Configuration of Free Https Certificate (Let'S Encrypt)

Note that when setting the sub_filter field, your domain name should be added https:// Otherwise, there will be a blocked/mixed-content error when the font file reference in the agent's CSS file is HTTP

server {
    listen 443 ssl http2;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/your.proxy.domain/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your.proxy.domain/privkey.pem;
    ssl_dhparam /etc/ssl/certs/dhparams.pem;
    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;

    server_name  your.proxy.domain;
    root /var/sites/fonts/;

    location /css {
        sub_filter 'http://fonts.gstatic.com' 'https://your.proxy.domain';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://google;
        proxy_cache cache1;
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 304 10m;
        expires 365d;
    }

    location / {
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://gstatic;
        proxy_cache cache1;
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 304 10m;
        expires 365d;
    }
}

Safety anti-theft chain

If you don't share it with others, you need to add referer whitelist to the configuration. If you don't meet the requirements, you will return 403.

valid_referers server_name *.your.domain.com *.other.domain.com;
if ($invalid_referer) {
    return 403;
}

The original blog: https://keelii.github.io/2017/04/22/proxy-google-fonts-with-ssl-http2-support/

Posted by lhaynes on Mon, 11 Feb 2019 09:45:17 -0800