Fehlende Bilder von Live-Server im Entwicklungs-System anzeigen

Wenn man an einem bestehenden Projekt arbeite, das bereits live gegangen ist, dann ist es manchmal notwendig, dass man sich den aktuellen Stand einer Datenbank vom Live-System holt, um lokal Dinge zu testen. Aber wie sieht es mit den Mediendateien aus, die in der Zwischenzeit dazu gekommen sind und die schnell mehrere Gigabyte an Größe umfassen? Nun, oft wird man auch diese benötigen, vor allem, wenn man am Design arbeitet. Aber wie hält man diese auf dem aktuellen Stand mit der Live-Seite? Die gute Nachricht: das ist gar nicht notwendig und in diesem Blogbeitrag möchte ich euch zeigen, wie man es anders lösen kann.

Nehmen wir also an, dass ich euch gerade eine aktuelle Kopie der Live-Datenbank in euer lokalen Entwicklungs-System gespielt habt. Dann werden wahrscheinliche einige Bilder nicht angezeigt, da ihr ja die URL in der Datenbank auf die lokale Domain geändert habt und diese Bilder lokal nicht gefunden werden können. Ihr könntet auch nun natürlich mit dem Live-System verbinden und alle Bilder synchronisieren, was aber schnell viele Megabyte oder Gigabyte benötigt. Wenn ihr gleichzeitig an mehreren Projekten arbeitet, habt ihr sehr schnell denn Platz auf eurer Festplatte verbraucht. Ihr könnt aber auch einfach den gesamten Uploads-Ordner inklusive aller Unterordner (oder zumindest alle mit den hochgeladenen Mediendateien) löschen und sie stattdessen von der Live-Seite laden lassen.

Fehlende Dateien vom Live-Server laden

Falls ihr in eurer lokalen Entwicklungsumgebungen einen Apache Webserver einsetzt, müsst ihr hierzu lediglich folgende Zeilen in eure .htaccess eintragen:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^wp-content/uploads/(.*) https://xyz.com/wp-content/uploads/$1 [R=302,L]
</IfModule>

Diese Zeilen fügt man ganz oben in der .htaccess Datei vor allen anderen Angaben ein.

Wie es funktioniert

Der Apache Server prüft über die beiden RewriteCond, ob die Datei oder der Ordner, der angefragt wird, nicht existiert. Sollte dies der Fall sein greift die RewriteRule, die alle Aufrufe von Dateien im Ordner wp-content/uploads auf die Live-Seite umleitet.

Es werden also alle Bilder, die nicht lokal vorhanden sind, vom Live-Server abgerufen. Ist bei diesem das Caching richtig eingestellt, passiert dies in der Regel auch nur einmal pro individueller URL.

Somit kann man nun alle Bilder auch auf der lokalen Umgebung sehen, ohne diese vorher runterladen zu müssen. Man kann die Bilder sogar lokal über die Medienübersicht bearbeiten. Sobald man die Datei speichert, wird die Originaldatei sowie die anderen Bildgrößen im lokalen System abspeichert. Diese Änderungen werden aber natürlich nicht wieder ins Live-System zurückgespielt. Man kann hiermit aber schnell und gefahrlos lokale testen.

Einige Einschränkungen

Diese Technik funktioniert in den allermeisten Fällen. Falls der Webserver nicht bei der Generierung des HTML-Codes allerdings prüft, ob die Datei auch wirklich lokal vorhanden ist, dann scheitert es, denn in der Regel passieren solche Prüfungen auf die Existenz von Dateien über eine PHP-Funktion, die dann die Datei nicht finden kann, da unser Trick über den Webserver umgesetzt wird.

Da aber oft eher nur Dateien auf Existenz geprüft werden, die nicht im Uploads-Ordner, sondern in den Ordnern der Themes und Plugins gespeichert sind, sollte das kein allzu großes Problem darstellen. Im Zweifel müsstet ihr dann solche Dateien doch runterladen. Diese zu finden könnte aber etwas knifflig sein.

Eine weitere Einschränkung ist die Notwendigkeit einer Verbindung zum Webserver. Wenn man lokal entwickelt hat man ja in der Regel den Vorteil, dass dies auch ohne Internetverbindung möglich ist. Ich schreibe auch oft meine Blogbeiträge, wenn ich etwas im Zug unterwegs bin, wo die Internetverbindung häufiger abbricht. Falls ihr also Dateien unbedingt für die lokale Entwicklung benötigt, müsste ihr sie wohl doch synchronisieren.

Funktioniert es auch mit anderen Entwicklungsumgebungen?

Das Gleiche ist auch bei der Verwendung des nginx-Servers in der lokalen Entwicklung möglich. Da man aber beim nginx nicht einfach eine Datei im Verzeichnis der WordPress-Installation verwenden kann, müsste ihr folgende Zeilen in die nginx-Konfiguration hinzufügen:

location ~ ^/wp-content/uploads/(.*)$ {
	try_files $uri @missing;
}
location @missing {
	return https://xyz.com$uri;
}

Fazit

Man sollte immer mit einer lokalen Kopie einer Website ändern, wenn man daran entwickelt. Diese auf dem aktuellen Stand zu halten ist allerdings sehr zeitintensiv. Durch den Wegfall der Synchronisation von Mediendateien kann aber sehr viel Zeit und vor allem Speicherplatz eingespart werden.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugin, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

4 Kommentare » Schreibe einen Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.