Nginx 反向代理不会解析为 SSL

Question

I'm kinda new with NGINX, so still learning how to deploy it correctly. At this moment I'm running into a problem.

My project exists of a frontend in HTML (JS etc), and an API in nodeJS running on port 5000.

I've created my Nginx file and it kinda works at the moment. The HTML page is shown with Letsecrypt certificate over port 443. And I can fire fetch requests over http to my api. But, when firing from the website, I get a mixed-content warning. Since the XHR requests are fired at the http version and not the https version. I'm trying to setup my Nginx conf to XHR over https, but no luck yet.

This is my conf file (I starred out the original domain)

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html;

    server_name pim.********.***;

    location / {
        try_files $uri $uri/ =404;
    }
}

server {

    root /var/www/html;

    index index.html;
    server_name pim.*****.***; # managed by Certbot


    location / {
        try_files $uri $uri/ =404;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/pim.*******.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = pim.******.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80 ;
    listen [::]:80 ;
    server_name pim.******.com;
    return 404; # managed by Certbot


}

server {
    listen 5000 ;
    listen [::]:5000 ;
    server_name pim.*******.com;
    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

I've tried to create a location at /api with the port 443, but this gives an error when testing the nginx file.

Answer 1

If you want to keep this setup as is (http -> https redirection and api access via port 5000).

This nginx config should work:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name pim.******.com;

    # redirect to the https version
    return 301 https://$host$request_uri;
}

server {
    # handles normal ssl/tls traffic
    # i would also use http2 on https
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    server_name pim.*****.***;

    root /var/www/html;

    index index.html;

    ssl_certificate /etc/letsencrypt/live/pim.*******.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        try_files $uri $uri/ =404;
    }
}

server {
    # same as 443 but with the differnt port
    listen 5000 ssl http2;
    listen [::]:5000 ssl http2;

    server_name pim.*******.com;

    # certs are required for ssl/tls traffic
    ssl_certificate /etc/letsencrypt/live/pim.*******.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

I personally would suggest to useing the normal port and either use a subdomain (api.example.com) or a subpath ( https://example.com/api/ ).

Config for Subdomain:

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

    server_name api.pim.*******.com;

    ssl_certificate /etc/letsencrypt/live/pim.*******.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Config for SubPath:

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    server_name pim.*****.***;

    root /var/www/html;

    index index.html;

    ssl_certificate /etc/letsencrypt/live/pim.*******.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/pim.*******.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        try_files $uri $uri/ =404;
    }

    location /api/ {
        proxy_pass http://localhost:5000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Use whatever suits you.