Imágenes de producción en ambiente local con nginx

Uno de los procesos más comunes y más útiles a la hora de desarrollar un nuevo sitio web, es la creación de multiples ambientes de trabajo para asegurarnos de que nuestros cambios o nuevas funcionalidades funcionen a la perfección antes siquiera de acercarse a producción.

Al mismo tiempo, uno de los problemas más comunes en estos casos es el desconecte entre nuevos ambientes, no es raro tener 3 bases de datos distintas entre local, staging, y producción.

Lo ideal, es que cada uno de estos ambientes sea una copia exacta de producción, teniendo el mismo “servidor” (o amenos algo lo más parecido), la misma base de datos, y en casos cada vez más comunes, los mismos archivos multimedia.

#El problema

Mientras que para la base de datos, u servidores, no es tanto problema recibir una copia que podemos utilizar en nuestro sistema local, los archivos multimedia por lo general tienen un tamaño mucho mayor, y por lo tanto algunas veces resulta en una perdida de espacio el tener varias copias del mismo para cada uno de nuestros ambientes, especialmente con imágenes que muchos sistemas recortan, creado más y más copias de la misma imagen.

#La solución

La solución en estos casos es en realidad bastante sencilla, lo único que necesitamos hacer es: usar nuestros archivos de producción en nuestro local.

Los pasos para esto pueden variar, pero en mi caso, utilizo normalmente nginx, y los pasos para esto son, encontrar el archivo de configuración (normalmente default.conf ó site.conf) . Dentro de éste archivo agregaremos una etiqueta de location, para que se vea como éste ejemplo:

1# Basic conf
2server {
3	server_name  _;
4	return 302 $scheme://mysite.test$request_uri;
5}
6
7# Custom conf
8
9server {
10server_name ~^(.\*)\.mysite\.test$ mysite.test;
11root /app/public/;
12
13    # If file ends with these extensions
14    location ~* ^.+\.(svg|svgz|jpg|jpeg|gif|png|ico|bmp|webp)$ {
15    	try_files $uri @image_fallback; # Try this address (defined below)
16    }
17
18    # Define URL to try (prod url)
19    location @image_fallback {
20    	proxy_pass https://mysite.com;
21    }
22
23    # More default conf...
24    index index.php index.html index.htm;
25    include do-not-modify/*.conf;
26
27}
28

View Gist on GitHub

Ahora, cada que mi servidor reciba una petición hacia uno de los archivos que he definido, en vez de buscarlos en mi servidor local, los buscará en mi servidor de producción, dándome la imagen real que tengo en producción sin necesidad de copiarla localmente.