converting nginx from http to https

Question

i am hosting a website on aws lighsail server. it is single server and i am running 4 docker container on it. 1-nginx , 2-node js, 3- spring bot, 4 - mysql.

As for now my website is loading great with this :

    server {
    listen       80;
    server_name  *.example.com;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    client_max_body_size 100M;
    location / {
        proxy_pass http://cahub-client:4000;
    }

    location /api {
        rewrite /api/(.*) /$1  break;
        proxy_pass http://microservice:8080;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

I have purchased ssl certificate from goddady, and now installing on my server.

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
    }

server {
    listen 443 ssl;
    server_name  *.domain.com;
    
    ssl_certificate /etc/nginx/certs/cae51a61335308544.pem;
    ssl_certificate_key /etc/nginx/certs/www.eaxmple.com.key;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    client_max_body_size 200M;
    location / {
        proxy_pass http://cahub-client:4000;
    }

    location /api {
        rewrite /api/(.*) /$1  break;
        proxy_pass http://microservice:8080;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

So what is happening here is now. that when i type my domain in url it goes and redirect to https but only angular client location block is getting run which is my frontend. but whenever a call from frontend to backend is made. it should also go to my reverse proxy block /api.. this is not reolvong instead getting an error mixedcontext found. when i see in network tab. My frontend call is going as https://example.com but my backend call is going as earlier http://example.com/api/.

score 1 · Accepted Answer · answered Jul 02 '20 at 07:10

1

You need to fix your frontend app so that it makes backend calls to https://example.com/api instead of http://example.com/api.

answered Jul 02 '20 at 07:10

Tero Kilkanen

34,499
3
38
58

but won't it itself redirect the call to https server block from port 80? like its doing for the frontend server? my URL in the angular app is this backendApiUrl: httpexample.com/api. so you are saying that I have to make it httpsexample.com/api? – varun saini Jul 02 '20 at 07:41
this worked, thanks. but can you explain why is it so? – varun saini Jul 02 '20 at 08:56
Frontend app has URLs which it uses to call backend app APIs. If those URLs are `http`, not `https`. browser security mechanisms prevent the calls because calling insecure endpoints from a secure page is a security risk. – Tero Kilkanen Jul 02 '20 at 14:39
thank you so much. its working now as expected :) – varun saini Jul 03 '20 at 19:19

converting nginx from http to https

1 Answers1