Hello everyone, I am trying to deploy a website onto a VPS for the first time. It is build with Django on the backend, React on the frontend and is containerised with Docker. I have managed to make it run before thanks to Gunicorn and Nginx for the first time, but with no secure connection. However, I am also trying to set up a SSL certificate for the domain with Letsencrypt and Certbot. My problem is that I am able to have a secure connection for port 80 (where frontend resides) but not for port 8000 (where the backend is... I can call for API requests and access Django admin, but only http). Therefore, whenever I make my website goes live, I get a mixed content error "insecure XMLHttpRequest endpoint" (API request from https to http) since my only my frontend is secured.

I have been battling with this for good two weeks... if anyone knows where I screwed up in my files it would help me immensely!

Base URL in React const baseURL = "http://my-domain.com:8000/api/";

Docker-compose version: "3"

services:
  backend:
    build:
      context: ./backend
    command: gunicorn core.wsgi --bind 0.0.0.0:8000 --workers 4 --threads 4
    ports:
      - "8000:8000"
    volumes:
      - static_volume:/home/app/backend/staticfiles
    restart: unless-stopped
  frontend:
    build:
      context: ./frontend
    volumes:
      - react_build:/frontend/build
    restart: unless-stopped
  nginx:
    image: nginx:latest
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./data/nginx/nginx-setup.conf:/etc/nginx/conf.d/default.conf:ro
      - react_build:/var/www/react
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    depends_on:
      - backend
      - frontend
    command: '/bin/sh -c ''while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g "daemon off;"'''
  certbot:
    image: certbot/certbot
    restart: unless-stopped
    volumes:
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
volumes:
  react_build:
  static_volume:``

nginx-setup.conf upstream api { server backend:8000; }

server {
    listen 80;
    server_name my-domain.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name my-domain.com;
    server_tokens off;

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

    location / {
      root /var/www/react;
      index index.html;
      try_files $uri $uri /index.html$is_args$args =404;
    }

    location /api {
        try_files $uri @proxy_api;
    }
    location /admin {
        try_files $uri @proxy_api;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   https://backend:8000/;
    }

    location /staticfiles/ {
        autoindex on;
        alias /home/app/backend/staticfiles/;
    }
}

not sure if it is important, but for the SSL certifications I used a script as shown in this tutorial: https://pentacent.medium.com/nginx-and-lets-encrypt-with-docker-in-less-than-5-minutes-b4b8a60d3a71