Prefect UI behind nginx reverse proxy can't connect to GraphQL endpoint

[fpun]

I'm trying to deploy prefect server on a digitalocean droplet but I'm having issues with the UI <> graphql endpoint connection. The issue happens after I put the UI behind a nginx reverse proxy to map direct requests to my droplet's domain name on port 443 to the port 8080.

When opening the UI by browsing http://{droplet_external_ip}:8080/home everything works fine. But when I open the UI through the https://{mydomainname}/home, the UI can't connect to the graphql endpoint at http://{droplet_external_ip}:4200/graphql

Has anyone had a similar issue before?

prefect diagnostics

{
  "config_overrides": {
    "server": {
      "ui": {
        "apollo_url": true
      }
    }
  },
  "env_vars": [],
  "system_information": {
    "platform": "Linux-5.4.0-51-generic-x86_64-with-glibc2.29",
    "prefect_backend": "server",
    "prefect_version": "0.13.13",
    "python_version": "3.8.5"
  }
}

[fpun]

If that's helpful to anyone, it seems like the issue was related to having SSL on the UI but not on the graphql endpoint. I eventually managed to make it work by applying SSL to the graphql endpoint as well. I used the same certificate as for the main domain with another unused port (in my case 4800) in nginx config, and routed traffic from this port to localhost:4200. Finally I updated config.toml to link the apollo_url to the https endpoint.

nginx config:

server {
    listen 80;

    server_name ***my_domain***;

    location / {
        proxy_pass http://localhost:8080;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/***my_domain***/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/***my_domain***/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 {
    listen 4800 ssl; # managed by Certbot

    server_name ***my_domain***;

    location / {
        proxy_pass http://localhost:4200;
    }

    ssl_certificate /etc/letsencrypt/live/***my_domain***/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/***my_domain***/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
}

prefect config:

[server]
  [server.ui]
    apollo_url="https://***my_domain***:4800/graphql"