How to host Frontend & API via HTTPS?

Basically, I’m trying to run my website thru Cloudflare via HTTPS / SSL

Before Cloudflare

  • I was running my site unsecurely (On HTTP) and had my frontend running on port 3000 , then used NGINX to forward port 3000 to port 80

  • Then I had my API running on port 8000

My frontend would then access my API by fetching http://example.com:8000/get_data

Using Cloudflare

  • My domain is pointing to Cloudflare name servers which proxy my request to my VPS’ IP

  • I’m now forwarding port 3000 to the SSL port 443 with nginx with the Origin Certificate & Private Key

  • This works fine

However, I’m also trying to run my API on port 8443 which is an HTTPS port, however I get Error 525 even when I add the port configuration to Nginx

I’ve also tried:

  • Setting Cloudflare Encryption Mode to FULL & FLEXIBLE

  • I was also looking into Page Rules & Disabling Always HTTPS so I could maybe point an HTTPS url to my working-non HTTPS API (Like example https://example.com/apihttp://example.com:1234/*)

My NGINX Config (The HTTP Section)

http {

# THIS BLOCK IS PROPERLY PROPOGATING MY FRONTEND VIA PORT 443

server {
    listen              443 ssl;
    server_name         www.example.com;
    ssl_certificate     /etc/ssl/cert.pem; #Cloudflare origin cert
    ssl_certificate_key /etc/ssl/key.pem; #cloudflare private key
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    location / {proxy_pass http://localhost:3000/; }

}

# THIS IS MY ATTEMPT TO PROPAGATE PORT 8443 WITH SSL SINCE MY API IS LISTENING ON THIS PORT, but no luck

# WHEN I REMOVE THIS SECOND BLOCK ENTIRELY, I STILL GET THE SAME CLOUDFLARE 525 ERR

server {
    listen              8443 ssl;
    server_name         www.example.com;
    ssl_certificate     /etc/ssl/cert.pem; #Cloudflare origin cert
    ssl_certificate_key /etc/ssl/key.pem; #cloudflare private key
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    # I was also trying to proxy the internal port to nginx, but either way it doesn't work
    #location / {proxy_pass http://localhost:8443/; }

}


        include /etc/nginx/conf.d/*.conf;
#       include /etc/nginx/sites-enabled/*;
}

My Question

Is there another way to run both my Frontend & API on the same port (443) then use a Page Rule?

Or, how should I go about hosting my Frontend & API so that both are working via SSL ?

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.