I am have MERN stack application, it allow users to upload a pdf file from the frontend, the file is processed by the backend, the backend stores the file url in a mongodb database and then uploads the file to an AWS S3 bucket.
Front end: I am hosting the front end as a static website on a AWS s3 bucket, I am also using Cloudfront to serve my frontend hosted on s3 bucket, the cloudfront distribution uses a SSL certificate issued by AWS certificate manager. I am using Route 53 for DNS, and I have created a record that points my domain name to the cloudfront distribution end point.
Deploying front end: I run npm install and npm run build commands to create a build of my frontend, and then I upload the content of my frontend to the s3 bucket.
Backend: The backend is running on a AWS EC2 instance, it is also running the Mongodb database.
Problem: Now when I use the s3 bucket end point then I can succesfully upload my pdf files to the AWS S3 bucket.
But when I connect to my site using my domain name that points to the cloudfront endpoint with SSL enabled, I get net::ERR_SSL_PROTOCOL_ERROR error.
I have installed nginx and SSL certificate for my backend from certbot and tried connecting to my backend form the frontend over https protocol
I have attached the frontend code snippet where the error is ocurring, the error screenshot, the nginx conf file for my backend.
Link to the screenshot: https://drive.google.com/drive/folders/1D9arGHe8Vvigv4o9Ihc95MGI1lfibJRe?usp=sharing