How do I ensure that I redirect HTTP requests to HTTPS?

Question

I use CloudFlare for DNS for a variety of sites. I am using all three free Page Rules for custom caching, and I am trying to avoid upgrading to their Pro service to use Page Rules to force HTTPS. I have configured HSTS and submitted it for preload. I also have all port 80 connections on my server being redirected to a TLS connection. However, when fresh browsers are first trying to hit my sites over HTTP, they do not get redirected but see a CloudFlare 522 error (connection to origin server timed out). Any ideas on how I can fix this?

Here is my Nginx config (I omitted most of the 443 server block for security, but accessing site over HTTPS does work):

server {
    server_name www.filterlists.com;
    rewrite ^/(.*)$ https://filterlists.com/$1 permanent;
}

server {
    listen 80;
    server_name filterlists.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name filterlists.com;
    root /var/www/filterlists;

Answer 1

Your first server block is missing a listen directive, but we can make things more simple and performant by combining both server_name domains into one for port 80 requests, and using a redirect instead of a rewrite.

server {
    # HTTP --> HTTPS
    listen 80;
    listen [::]:80;
    server_name www.EXAMPLE.com EXAMPLE.com;
    return 301 https://EXAMPLE.com$request_uri;
}

server {
    # remove 'www' subdomain
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name www.EXAMPLE.com;
    ssl_certificate /PATH/TO/CERTIFICATE.crt;
    ssl_certificate_key /PATH/TO/KEY.key;
    return 301 https://EXAMPLE.com$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name EXAMPLE.com;
    root /YOUR/SITE/DIRECTORY;

    ...

}

For this and many other Nginx configuration examples, I use H5BP's templates which cover most anything you would want to do.