Nuestro equipo de expertos pasados ciertos días de trabajo y recopilar de información, dieron con la solución, queremos que te sea de utilidad en tu proyecto.
Solución:
Para redirigir solicitudes de activos solo en su máquina local
Para que su máquina local use archivos locales para ciertos activos de JavaScript o CSS solicitados desde un servidor remoto, puede usar una herramienta de interceptación / proxy HTTP como Charles. (Mac, Windows y Linux. Demostración de 30 días, luego $ 50 para comprar).
Para configurar Charles para que escuche solicitudes remotas y sirva archivos locales en su lugar, siga estos pasos:
-
Descarga Charles.
-
Inicie Charles y, cuando se le solicite, deje que modifique la configuración de su proxy.
-
Visite el sitio web que está probando en su navegador. Estoy usando Chrome para visitar Google en este ejemplo.
-
Busque el sitio web en la ventana ‘estructura’ de Charles en el panel izquierdo, luego explore las carpetas hasta el activo solicitado que desea modificar. Estoy usando el logotipo de Google en este ejemplo.
-
Haz un segundo clic en el activo y elige ‘mapa local’ de las opciones:
-
Elija el archivo que desea cargar desde su sistema de archivos local en lugar del activo remoto:
-
Repita para tantos activos como desee reasignar.
-
Fuerza la actualización de tu navegador. Debería encontrar que los activos se cargan desde su máquina local en lugar de la remota.
Para ‘desasignar’ archivos locales para que los remotos se carguen nuevamente, siga estos pasos:
-
Elija Herramientas> Mapa local en el menú de Charles:
-
Haga clic en la regla[s] desea eliminar de la lista, luego haga clic en el botón ‘eliminar’:
Hay aplicaciones gratuitas disponibles que te permitirán hacer lo mismo, como WebScarab y Burp suite, pero ninguna de las dos es tan simple o hermosa de usar como Charles, en mi opinión.
El resto de esta respuesta se refiere a los pasos a seguir si desea que un servidor web remoto cargue archivos desde su computadora para todos los usuarios que visitan el sitio remoto. (Posible caso de uso de ejemplo: mostrar trabajo a clientes / colegas cuando no puede reproducir el sitio de producción localmente o preparar un servidor de desarrollo).
Para redirigir las solicitudes de activos en todas las máquinas
Para servir ciertos activos desde su máquina local para todas las máquinas que acceden a otro servidor web remoto, puede configurar su servidor local para que sea accesible desde la web. Un par de opciones:
Servicios de tunelización de localhost
Estos servicios lo ayudan a compartir localhost a través de la web para que los activos o sitios completos estén disponibles a través de una dirección web:
- Showoff.io
- Tunnlr
- Localtunnel
Showoff.io y Tunnlr son servicios pagos a $ 5 / mes. Localtunnel es actualmente gratuito.
DNS Dinámico
Una alternativa gratuita es utilizar el alojamiento de DNS dinámico de un servicio como fear.org para apuntar una dirección web al servidor web que se ejecuta en su máquina local. Así es como funciona:
-
Regístrese en fear.org.
-
Haga clic en el enlace del correo electrónico que envían para activar su cuenta e iniciar sesión automáticamente.
-
Configure un nuevo subdominio, que utilizará para acceder a su localhost desde la web. Puede elegir uno de sus dominios gratuitos (como ‘mooo.com’); no es necesario que registre el suyo.
-
Descargue una de las muchas aplicaciones de DNS dinámicas para su sistema operativo.
-
Ejecute la aplicación, que publica su dirección IP en los servidores de fear.org.
-
Configure un servidor para que se ejecute en el puerto 80 de su máquina local y permita el tráfico a través del puerto 80 en cualquier firewall que esté ejecutando. La forma de hacerlo depende de su sistema operativo y hardware. (Si está utilizando Mac OS X, por ejemplo, solo necesita activar ‘Compartir web’ en el panel Preferencias del sistema> Compartir).
-
Visite el subdominio que creó en el paso 3 en su navegador web. (por ejemplo, yourname.mooo.com). El nombre se resolverá en la dirección IP de su máquina y, si ha configurado su servidor y firewall correctamente, debería ver el archivo de índice de su máquina local.
Luego puede acceder a los activos en la carpeta pública en su máquina local a través de la web utilizando la ruta completa a esos activos con el subdominio fear.org que creó. Por ejemplo: yourname.mooo.com/~yourMacUsername/images/hurrah.jpg Naturalmente, puede hacer referencia a esa URL desde otro servidor para que cargue archivos desde su máquina local.
[On the Mac, the public folder is the ‘Sites’ folder in your user directory. To access it, use your IP address or hostname followed by a tilde (~) and your Mac username. Other servers and operating systems work slightly differently.]
Redireccionamiento externo
Si está de acuerdo con la edición de la producción .htaccess archivo, entonces puede simplemente redirigir las solicitudes para los static activos a su servidor web local. La redirección estaría condicionada a la dirección IP que accede al sitio (es decir, su dirección IP externa).
Por ejemplo, para redirigir un activo específico a la misma ruta URL en el servidor local:
RewriteEngine On
RewriteCond %REMOTE_ADDR ^203.0.113.111$
RewriteRule ^assets/main.css$ http://local-web-server.com%REQUEST_URI [R,L]
Todos los archivos CSS:
RewriteRule ^assets/.+.css$ http://local-web-server.com%REQUEST_URI [R,L]
Todos los activos:
RewriteRule ^assets/.+ http://local-web-server.com%REQUEST_URI [R,L]
No es necesario utilizar un nombre de host que se pueda resolver (p. Ej. local-web-server.com), simplemente puede usar el dirección IP local de su servidor web local directamente (p. ej. 192.168.1.20). Sin embargo, al usar un nombre de host, su servidor de desarrollo local puede usar hosts virtuales para servir a varios sitios web sin tener que cambiar nada entre proyectos.
Los anteriores son redireccionamientos temporales (302). Puede cambiarlos a permanente (301) cambiando R para R=301. Esto disminuirá las solicitudes del servidor ya que el navegador redirigirá desde la caché. Sin embargo, deberá borrar el caché del navegador local cuando haya terminado, para borrar el redireccionamiento almacenado en caché.
Desventajas:
- Necesita acceder y está dispuesto a editar la producción.
.htaccessexpediente. - Es una redirección externa. Nunca haría esto para ofrecer contenido en vivo, pero está perfectamente bien para las pruebas locales.
Ventajas:
- Su servidor de desarrollo local no necesita ser público.
- Funciona para todos los navegadores en su máquina de desarrollo.
- Si el DNS es público para
local-web-server.com(que apunta al dirección IP local de su servidor web), entonces cualquier persona (o cualquier dispositivo) en su red local también puede ver estos activos locales.
Nombre de host separado para static activos
Si el sitio de producción utiliza un nombre de host diferente para todos static activos, por ejemplo. static.example.com entonces simplemente puede anular esto en su DNS local (archivo HOSTS) para apuntar a su servidor de desarrollo local en su lugar.
Desventajas:
- A menos que tenga un servidor DNS centralizado para su red local, otros dispositivos en su red local no podrán ver los activos locales a menos que modifiquen su propio archivo HOSTS (lo cual no siempre es posible en dispositivos móviles).
Ventajas:
- No se requieren cambios del lado del servidor en el servidor de producción.
Proxy inverso
Para que esto sea perfecto (es decir, sin redireccionamiento), puede configurar un proxy inverso en el servidor de producción. Aún tendrías directivas similares en .htaccess para representar los activos necesarios.
Desventajas:
- Necesita acceso al servidor de producción para configurar un proxy inverso.
- Necesita acceso al servidor de producción para poder enviar las solicitudes (posiblemente en
.htaccess). - Su servidor de desarrollo local debería ser “público”.
Ventajas:
- Podrías habilitar remoto usuarios para ver el sitio de “desarrollo” completo.
Livereload que mira mis archivos locales y actualiza el sitio en vivo al cambiar.
Eso es realmente un tema aparte. Muchos editores de código en estos días tienen funciones / complementos de “vista previa en vivo” que habilitan esta función.
Si te sientes estimulado, tienes la libertad de dejar una noticia acerca de qué le añadirías a esta división.