Nginx configure the reverse proxy to use the Google fonts font and turn on HTTP2 and SSL support

Since the blog theme USES Google fonts PT Serif font, Google fonts font can only be used through University of Science and Technology of China proxy in China. Recently, however, its speed has been found to be erratic, with response times sometimes exceeding 600ms. Just because I own vultr's VPS(with a small tail), I built one for myself

The VPS environment is as follows:

Ubuntu 14.04
Nginx 1.12.0 (different configuration of the latest version as before)
Openssl 1.0.2j (minimum openssl version required for the new Nginx to enable http2)

Recompile and install Nginx

If the relevant module is not opened before the compilation and installation, 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 you compile it correctly

Configure Nginx reverse generation

The 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;

Port 80 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;
  }
}

Port 443 configuration

First of all, you should have a free HTTPS certificate, which you can refer to my previous article: free Https certificate (Let'S Encrypt) application and configuration

Note that when setting the sub_filter field, you need to add https:// to your domain name, otherwise it will appear that the font file reference in the agent's CSS file is HTTP and the request for blocked/ mixed-content is wrong

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;
  }
}

Security against hotlinking

If it is not Shared with others, the referer whitelist needs to be added to the configuration. The unqualified ones will be returned to 403

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

That's all for this article, and I hope it will help you learn how to configure nginx reverse agents and support SSL