EC2 WordPress Behind CloudFront Part 2

In the previous post, we got static pages working through CloudFront but dynamic pages were still broken. The core problem was that CSS for the admin wouldn't load due to http and https incompatibilities between CloudFront and EC2. This post documents how we finally resolved it.

Step 1: Database Configuration

First, we updated the WordPress database directly to ensure the site URLs were set to HTTPS:

USE wordpress-db
UPDATE wp_options SET option_value = 'https://www.reikaxubia.com' WHERE option_name = 'home';
UPDATE wp_options SET option_value = 'https://www.reikaxubia.com' WHERE option_name = 'siteurl';

Step 2: wp-config.php

Next, we updated wp-config.php to detect CloudFront requests and force HTTPS accordingly:

if (isset($_SERVER['HTTP_VIA']) && strpos($_SERVER['HTTP_VIA'], 'cloudfront') !== false) {
    $_SERVER['HTTPS'] = 'on';
    $_SERVER['SERVER_PORT'] = 443;
    $_SERVER['REQUEST_SCHEME'] = 'https';
}
define('WP_HOME', 'https://www.reikaxubia.com');
define('WP_SITEURL', 'https://www.reikaxubia.com');
define('FORCE_SSL_ADMIN', true);

Step 3: Theme functions.php

We added filters to the active theme's functions.php to rewrite any remaining HTTP URLs in scripts and styles to HTTPS:

add_filter('script_loader_src', function($src) {
    return str_replace('http://', 'https://', $src);
});
add_filter('style_loader_src', function($src) {
    return str_replace('http://', 'https://', $src);
});

Step 4: CloudFront Caching Policy

We changed the CloudFront caching policy to CachingDisabled. This ensures that dynamic content like the admin dashboard is always fetched fresh from the origin and not served from CloudFront's cache.

Step 5: Clear Browser Cache

Finally, clear your browser cache or use an incognito window to test. Old cached responses with mixed content can make it look like the fix isn't working when it actually is.

Conclusion

Getting WordPress working fully has been a long journey. Between CloudFront configuration, database updates, PHP configuration, theme modifications, and caching policies, there were a lot of moving parts. Sometimes you need to go places that you weren't planning to go to get it working. But in the end, we have a fully functional WordPress site running behind CloudFront with both static and dynamic pages working correctly.