NginX Rewrites to CloudFront

Instead of configuring Nginx, why not configure CloudFront to front both your WordPress EC2 and S3 bucket?

• Create new CloudFront distribution with EC2 as your origin.
• In your CloudFront distribution, create another origin that uses your S3 bucket
• Create a new Behavior with path pattern /wp-content/uploads/* that use your S3 as origin.

See below screenshot

Some changes required to get WordPress working with CloudFront. For example, modify WordPress site-url to CloudFront <id>.cloudfront.net FQDN.

Or assign a different FQDN to EC2 instance (origin.site.com) as CloudFront origin, assign site DNS as CNAME to CloudFront and modify WordPress site DNS as CNAME entry to CloudFront FQDN.

You are using nginx to rewrite the url which performs the rewrite. You need to use it as a traditional reverse proxy.

Using it as a traditional reverse proxy prevents the rewrite but all images will still be sourced via ngnix.

It’s one way or another I’m afraid.

While your current NginX configuration is redirecting requests for certain file types to CloudFront, it's indeed causing 301 redirects, which can add unnecessary latency. To eliminate these redirects and improve performance, you can consider a different approach using CloudFront's URL customization features instead of relying on NginX rewrites.

Here's a better approach to accomplish this without causing redirects:

1. Configure your CloudFront distribution to use your S3 bucket as the origin for the /wp-content/uploads path.

2. Set up a custom origin path in your CloudFront distribution that points to the appropriate directory in your S3 bucket.

3. Instead of using NginX rewrites, update your WordPress configuration to use the CloudFront URL directly for your uploads directory. You can do this by modifying your wp-config.php file or using a plugin that allows you to change the upload URL.

For example, you could add the following to your wp-config.php:

define('UPLOADS', 'https://websiteimages.cloudfront.net/wp-content/uploads');

This approach will cause WordPress to generate URLs for uploaded media that point directly to your CloudFront distribution, eliminating the need for redirects.

By using CloudFront's URL customization and integrating it directly with WordPress, you can serve your images and other static content from CloudFront without any redirects, significantly improving your site's performance.

Remember to ensure that your CloudFront distribution is correctly configured to handle the types of files you're serving and that the proper cache behaviors are set up to optimize delivery of your content.

This method not only eliminates the 301 redirects but also reduces the load on your NginX server, as requests for these static assets will go directly to CloudFront without touching your web server at all.

Sources
Customize the URL format for files in CloudFront - Amazon CloudFront
Add, remove, or replace content that CloudFront distributes - Amazon CloudFront