When working on a website locally, it can become quite tedious to pull down all media from a production environment – particularly if you just need to spot-check one or two key areas. In some cases, the production sites I work with have media folders that are more than 1GB (!!) in size. In fact, it’s not entirely uncommon for a large site with a lot of history.
Several months ago I saw someone tweet a simple solution to this, but I didn’t take note of the URL anywhere and it quickly slipped into the ether. Googling for phrases like “apache redirect missing images to production server” or “serve missing images from remote server using apache” or “display live site images on development site” yielded unproductive results.
Then, today, while wishing once again for a solution to my dilemma, I found it!
To save others (and my future self) the struggle of trying to find this solution, I’m documenting it here.
In both of my examples below, make sure you swap example.com for your production server’s URL. And note that these snippets expect the URL structure to be the same between servers (they should be, if you’re working with a true staging copy of a production environment).
Here’s how to tell Apache to serve missing files via remote server:
Note: If you’re working with WordPress, make sure this directive appears before the WordPress-generated rewrite rules in your .htaccess file. Otherwise, WP will catch the missing file URL and route it to a 404 internally.
And, here’s how to tell nginx the same thing:
How about as a WordPress plugin?
You’re in luck! If you’re using WordPress and you’d prefer to slurp up those missing images (so you’re not always dependent on a remote server), you can use the plugin Uploads By Proxy. This plugin will fetch each missing image from the remote server and load it into your local uploads directory for future use. For my use cases, though, I just wanted to see the images on my staging site, not actually copy them and eat disk space.