CloudFront NginX Proxy

To configure a traditional reverse proxy using NGINX with CloudFront, you can follow these steps:

1. Set up an NGINX server on an EC2 instance.

2. Create a location block in your NGINX configuration file for the path you want to proxy. For example:

location /app/ {
    proxy_pass https://your-cloudfront-distribution.cloudfront.net;
    proxy_set_header Host your-cloudfront-distribution.cloudfront.net;
    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;
}

3. Ensure that you set the correct proxy_pass URL to your CloudFront distribution.

4. Set the Host header to match your CloudFront distribution domain.

5. Include additional headers like X-Real-IP and X-Forwarded-For to preserve client information.

6. If you're dealing with HTTPS, make sure to configure SSL properly on your NGINX server.

7. After making changes to the NGINX configuration, restart the NGINX service to apply the changes.

Remember that when proxying to CloudFront, you need to ensure that your origin (e.g., S3 bucket) is properly configured to serve the content at the correct paths. If you're experiencing 404 errors for assets, double-check that the file paths in your S3 bucket match the expected URLs.

Also, keep in mind that CloudFront caching behavior and origin path settings can affect how your content is served. You may need to adjust these settings in your CloudFront distribution to ensure proper content delivery through your NGINX proxy.

If you continue to face issues, particularly with asset loading, review your CloudFront distribution settings, origin configurations, and NGINX logs to identify and resolve any path mismatches or routing problems.
Sources
Nginx reverse proxy with Cloudfront | AWS re:Post
Configuring the proxy server - AWS Elastic Beanstalk