How to set up the REST API to refer to media on a CDN

Question

I'm using the Wordpress as a headless server to supply the content for a react based web app, and I'm trying to get the media served via a CDN. I have set up the W3-Total-Cache plugin which is successfully changing the media URLs for pages served by Wordpress directly - I can navigate to the page in my browser and the image sources are all coming from the correct Cloudfront URL. If I retrieve the same page content through the REST API, the media URLs still reference my server directly and haven't been changed by the W3-Total-Cache plugin.

I've uploaded an image to Wordpress, then set up a test page with this image.

The source of the page I get when I navigate to http://myserver.com/test (correctly) contains:

<p><img src=\"http:\/\/123456789.cloudfront.net\/wp-content\/uploads\/2017\/09\/test-300x298.jpg\" ...

but what I'm getting when I call http://myserver.com/wp-json/wp/v2/pages/17 is:

    "content": {
    "rendered": "<p><img src=\"http:\/\/myserver.com\/wp-content\/uploads\/2017\/09\/test-300x298.jpg\" ...

What I would have expected from the JSON response is:

    "content": {
    "rendered": "<p><img src=\"http:\/\/123456789.cloudfront.net\/wp-content\/uploads\/2017\/09\/test-300x298.jpg\" ...

Is there any way I can set up either the W3-Total-Cache plugin or the REST API itself to re-write the server part of the URLs in the JSON to provide the CDN URL for media?

Wordpress version is 4.8.1. This is running on AWS under Elastic Beanstalk. The media is stored in an S3 bucket and served by CloudFront.

Answer 1

I ran into the same issue today. Thank you for the question! I am implementing a ReactJS-App in a theme. So I enqueue my scripts and styles with the help of the corresponding Wordpress hooks. I configured the w3 total cache plugin, so they're getting served via the CloudFront CDN.

So far so good, it works, but when it comes to media files requested over the REST API (as being part of the richtext content attribute) my URLs are also not pointing to the CDN.

I solved it by using another plugin: https://de.wordpress.org/plugins/amazon-s3-and-cloudfront/

It rewrites the URLs from all files in the upload directory - also when they are requested over the REST API.

I am a bit concerned about using two plugins, although I configured the w3 total cache plugin to only serve theme files over CDN and the amazon cloudfront plugin to only serve media files. But it works...

What is your current solution?

Thanks and kind regards Niels