Cloudfront giving 502 error on sub-domains but not on main domain

I created 3 separate CloudFront distributions, 1 for the main domain(CloudFront working on this) and 2 for the sub-domain(CloudFront NOT working on both).

Some important points:

1. All three run on a single LightSail instance using Nginx. All three are pointing to the same IPv4 & IPv6 address.
2. One of them is WordPress multisite subdirectory. The other 2 are normal WordPress sites.
3. Server configuration seems fine. All 3 domain takes to the right place, no redirection issue.
4. All 3 use wp-rocket for caching and the CDN option for adding the CloudFront domain name.
5. All the 3 Cloudfront distribution have same behaviours, and different origins & CNAMEs
6. I created certificate using ACM separately for each one.

Cloudfront behaviour:

1. /wp-content/* as well as /wp-includes/* :

• Compress objects automatically - Yes
• Viewer protocol policy - Redirect http to https
• Allowed HTTP methods - GET, HEAD, OPTIONS. Cached HTTP method : OPTIONS checked
• Restrict viewer access - No
• Legacy Cache settings:
  a.Headers : HOST, ORIGIN, Access-Control-Request-Headers , Access-Control-Request-Method b. Query strings: None c. Cookies: None d. Object caching: Use origin cache headers

2. /wp-admin/* as well as /wp-login.php:

• Compress objects automatically - Yes
• Viewer protocol policy - Redirect http to https
• Allowed HTTP methods - GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE. Cached HTTP method : OPTIONS checked
• Restrict viewer access - No
• Legacy Cache settings: a. Headers : All b. Query strings: All c. Cookies: All d. Object caching: Use origin cache headers

3. Default(*):

• Compress objects automatically - Yes
• Viewer protocol policy - Redirect http to https
• Allowed HTTP methods - GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE. Cached HTTP method : OPTIONS checked
• Restrict viewer access - No
• Legacy Cache settings: a. Headers : HOST, ORIGIN, REFERER, CloudFront-Is-Tablet-Viewer, CloudFront-Is-Mobile-Viewer, CloudFront-Is-Desktop-Viewer, CloudFront-Forwarded-Proto. b. Query strings: All c. Cookies: comment_, wordpress_, wp-settings-*, wordpress_test_cookie. d. Object caching: Use origin cache headers

I created the websites 1 by 1 in the following steps:

1. Extract WordPress files
2. Creating database and user in MySQL
3. Creating Nginx conf files in the sites-available directory and linking it to the sites-enabled directory.
4. Installing SSL certificate using Certbot(automatic method).
5. Installing and setting up WordPress

All the sites work fine without Cloudfront. CSS, images, and scripts load fine.

The main domain is working fine with its CloudFront distribution. I verified it by checking the image and resource URLs in inspect element.

The problem is with sub-domains. Both of them were CSS deficient, when I checked in the networks tab in inspect element, I found out that it was filled with 502 errors. When I tried to access the Cloudfront domain for them it gave a 502 error as well. Whereas the Cloudfront domain with the main domain as its origin was redirected to the main domain. I check my nginx error log, I found an SSL handshake error, don't for which domain because it wasn't written on it.

I checked my server blocks and SSL certificates on online SSL checker websites. I re-installed SSL certificates one by one using Certbot but the error was still there.

Then I reinstalled certificates again but this time domain and sub-domains at once using the Certbot. After that, I restarted Nginx and invalidated all 3 distributions

The main domain as always was working fine. But the sub-domains got weird. They were CSS deficient as previously stated but this time they had a 404 error instead of 502. I'm not pointing to the wrong distribution, they are the same as it was before re-installing SSL, I didn't make any changes in websites or CDN cname in wp rocket or any changes in origin or behaviours.

Then I tried using the distribution domain names. All three of them took to the main domain. The sub-domain distributions which once were giving 502 errors were now redirecting to the main domain. I checked the networks tab again and found 301 redirect(only for sub-domain distribution domain names). I checked my Nginx conf again and it was fine. No redirecting to the main domain.

I don't know how is this even possible. I have some suspicions about the Nginx conf. It has a redirect block for sending HTTP traffic to HTTPS. The conf block is:

if ($host = sub-domain.main-domain.com) { return 301 https://$host$request_uri; } # managed by Certbot Maybe something is wrong with $host, I don't know.

It's for listening to port 80. No redirection blocks for port 443. No mistakes in the distribution origin name.

I might be wrong most probably. I don't know how to resolve this. Any help will be much appreciated. Also, ask me questions if my descriptions are not clear or I forgot to check anything.