How to properly organize work with images when developing / maintaining sites locally?

Question

Software Deployment

Let's say we have a website. The developer is connected to its service. It creates a local environment similar to production. If everything is approximately clear with the code and the database, then what about the images that are used on the site in news, blogs, products, and so on? If the project is small and the images are several gigabytes, then it's okay, you can copy it. But what if there are dozens of gigabytes of images, do not copy them locally to yourself, just in order to correctly display the site from the developer.
Of course, you can try to set up a local statics server so that it pulls images from production. But in this case, it will not be possible to generate new previews locally, etc.
At the moment, I use my own class, which returns the same image to any request from the statics server, but saves it (preview generation) as a new file.
There are thoughts to write your own wrapper, which, when requested to read, will load a file from production, and save it locally when writing. But perhaps there is already some ready-made approach for this situation?
I deliberately did not indicate which framework I was talking about, since in this case I am more interested in the approach itself with working with a large amount of photos.

Answer 1

You can proxy images from production.

location ~* ^.+\.(svg|svgz|ttf|jpg|jpeg|gif|png|ico|webp)$ {
    try_files $uri @prod;
    access_log off;
    expires 8d;
}
location @prod {
    proxy_pass       http://prod.ru;
}

I’ll explain for those who don’t get drunk, with such an organization, nginx looks for a file on the site and if it’s not there, then it requests it through a proxy from production)
I wrote on my knee, this thing was not tested anywhere, so I would be grateful if you write down how it is)
PS naturally this the config is only suitable for nginx, but I think it’s just as easy to depict it on Apache. But I rarely encounter Apache specifically, so I wrote on what I understand.

Answer 2

For myself, I solved the problem in this way. On copies of developers there is no need for a complete database of products, therefore, before creating a copy, 90% of the products are deleted, respectively, the same number of images. The remaining volume is enough to test new features using images. Product images - the bulk of the images. Layout images, other content images are completely transferred to the copy. But in any case, if the copy does not find the requested image, it follows it for sale.

Answer 3

To begin with, for different options for the implementation of the project, there may still be different solutions. For the frontend part of the application on the same React, you don’t have to worry about the backend at all, it is taken from the Internet via http (s).
If we are still talking about the development of a backend, or the development of a soldered frontend with a backend on something different from the mentioned React (and similar libraries / frameworks and applications for them are still rather an exception to the rule), then here again the options are:
First option - when you still have some kind of API with this large data and it lives somewhere separately on the network. Or, for example, a CDN is generally used. Your application again goes there simply via http(s), wherever it is.
The second option - you forward some kind of secure connection, but only in the case when your development currently affects some large amounts of data, to the database server / folder with pictures / other directly. That is, you have a local server on the developer's machine or some kind of test server on the Internet, and they can go to the working database under certain conditions.
Conditions might look something like this: Is the runtime test environment? Yes => Do we want to get a piece of data that we consider large? Yes => Use separate db connection instance/other to get data.