Getting a database dump from a production site to a local site is pretty easy. But when I’m browsing the local site all of the items in the media library are broken unless I download a copy of the /wp-content/uploads/
directory. Most of the time that can be a really big download and I’m in a hurry. Instead you can proxy requests to the production URL and reference the media items that way. Here is how to do that using the nginx web server:
- Go to the root directory of the local install for your site. I install my local sites to the
Sites
directory in my home directory on my Mac so I would go to~/Sites/mysite.local
. - Go to the
/conf/nginx
directory - Add a new file called
uploads-proxy.conf
- Paste the following contents into that file. Be sure to replace
https://example.com/wp-content/uploads/
with the URL of the uploads directory on your production site.
location ~ ^/wp-content/uploads/(.*) {
try_files $uri $uri/ @uploadsproxy;
}
location @uploadsproxy {
resolver 8.8.8.8; # Use Google for DNS.
resolver_timeout 60s;
proxy_http_version 1.1;
proxy_pass https://example.com/wp-content/uploads/$1$is_args$args;
}
- Save
uploads-proxy.conf
- Open
site.conf
- Find the following line:
#
# WordPress Rules
#
include includes/wordpress.conf;
- Add the following after that line
#
# Proxy requests to the upload directory to the production site
#
include uploads-proxy.conf;
your site.conf
file should now look like
#
# WordPress Rules
#
include includes/wordpress.conf;
#
# Proxy requests to the upload directory to the production site
#
include uploads-proxy.conf;
- Save the file and restart your site in the Local/Local by Flywheel control panel
- Load your local site in your browser and you should now see images loaded
A couple of notes:
- nginx will check your local file system for the requested file first. If it finds it it will use that file otherwise it will try and request the file from the production site and serve the file that way.
- If you upload an image to your local site it will work as expected.
- Query strings will be passed along to the request to your production uploads folder. That’s what
$is_args$args
is for in theproxy_pass
directive. I.e. with the URL https://mysite.local/wp-content/uploads/2019/11/file.jpg?foo=bar,?foo=bar
will be included with the proxy request.
Thanks to Editing nginx site.conf file for the inspiration.