Как развернуть фронт-энд и бэк-энд приложения на одной машине с одним и тем же доменом, но разными портами?

У меня есть два приложения: одно для фронтенда, созданное с помощью ReactJS, и одно для бэкенда, созданное с помощью Django. У меня есть серверная машина, на которой я развернул оба приложения. Теперь я хочу использовать Nginx (из-за SSL) для размещения обоих приложений на одной машине с одним и тем же доменным именем, но порты разные. Я знаю, как это сделать для разных доменов или субдоменов, но у меня нет другого домена/субдомена со мной прямо сейчас. Поэтому я хочу спросить, как я могу достичь этого в Nginx? Например, мой FE использует порт 4173 & BE использует 8000, я могу настроить Nginx для обслуживания моего FE, но я получаю эту ошибку, Заблокирована загрузка смешанного активного содержимого, потому что мой FE, который является httpstrying для подключения к бэкэнду на порт 8000, который не является https.

Вот мой файл конфигурации nginx

server {
    listen 80;
    server_name camfire.pp.ua;

    # Перенаправлення HTTP на HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name camfire.pp.ua;

    # Шляхи до сертифікатів SSL
    ssl_certificate /etc/letsencrypt/live/camfire.pp.ua/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/camfire.pp.ua/privkey.pem;

    # Проксирування запитів до FrontEnd
    location / {
        proxy_pass http://localhost:4173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Проксирування запитів до BackEnd
    location /api {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Любая помощь будет оценена по достоинству....

server {
    listen 80;
    server_name camfire.pp.ua;

    # Перенаправлення HTTP на HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}



server {
    listen 443 ssl;
    server_name camfire.pp.ua;

    # Шляхи до сертифікатів SSL
    ssl_certificate /etc/letsencrypt/live/camfire.pp.ua/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/camfire.pp.ua/privkey.pem;

    # Проксирування запитів до BackEnd
    location /api {
        proxy_pass http://localhost:8000;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade'
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Проксирування запитів до FrontEnd
    location / {
        proxy_pass http://localhost:4173;
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade'
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    
}