Wenn Sie lokal an Ihrer Website arbeiten, bedeutet das, dass die Dateien, die Ihre Website antreiben, direkt auf Ihrem Computer liegen. Es ist üblich, dass diese Dateien in einem Versionskontrollsystem (Repository) gespeichert sind. Sie arbeiten daran und schieben sie ins Repository, wenn Sie fertig sind. Andere arbeiten auch, und Sie ziehen deren Änderungen zurück.
Was möglicherweise *nicht* in diesem Repository enthalten ist, sind Bilddateien aus dem CMS. WordPress ist ein klassisches Beispiel dafür. Wenn Sie in WordPress ein Bild hochladen, passiert eine ganze Menge. Es wird in den Ordner `uploads` hochgeladen, mehrere Versionen werden erstellt, sogar die Datenbank wird aktualisiert und Metadaten für Anhänge werden erstellt. Was *nicht* passiert, ist ein Commit im Versionskontrollsystem mit all diesen Dateien.
Es gibt Möglichkeiten, um sicherzustellen, dass Sie diese Dateien haben. Sie könnten ein Skript schreiben, um sie herunterzuladen. Sie könnten sie gelegentlich manuell per FTP übertragen. Im WordPress-Bereich gibt es Plugins, die helfen, wie WP DB Migrate Pro, das nicht nur die Datenbank verwaltet, sondern auch Bilder übertragen kann.
Aber vielleicht möchten Sie sich gar nicht mit Bildern beschäftigen. Vielleicht
- Sie möchten die Bilder nicht in Ihrem Repository haben. Vielleicht ist das Repository nur ein Theme-Ordner, und es macht Sinn, es so zu belassen.
- Sie haben etwa 10 GB an Bildern, und es ist unpraktisch und unnötig, sie hin und her zu verschieben.
Ich denke, das ist absolut legitim. Eine Publikations-Website muss wahrscheinlich nicht jedes einzelne Bild, das sie jemals hochgeladen hat, als Teil ihres Haupt-Repositorys haben.
Okay, genug Erklärung. Sie verstehen es.
Sean Lange sprach 2013 in seinem Artikel Using Remote Image Files When You Develop Locally über genau dieses Thema. Seine Lösung war, lokale URLs auf Webserver-Ebene neu zu schreiben, um auf die Produktionsdateien zu verweisen.
Ich habe meine Antwort in Apache URL-Rewrite-Regeln gefunden. Wenn das Apache-Programm eingehende Webseitenanfragen bearbeitet, erlauben Rewrite-Regeln ihm, URLs zu ändern, die bestimmten Mustern entsprechen – zum Beispiel können sie Anfragen für das ‚files‘-Verzeichnis auf Ihrem lokalen Rechner in Anfragen für entfernte URLs auf dem Produktionsserver umwandeln.
Hier sind seine Apache-Rewrite-Regeln
RewriteEngine on
# Force image styles that have local files that exist to be generated.
RewriteCond %{REQUEST_URI} ^/sites/([^\/]*)/files/styles/[^\/]*/public/((.*))$
RewriteCond %{DOCUMENT_ROOT}/sites/%1/files/%2 -f
RewriteRule ^(.*)$ $1 [QSA,L]
# Otherwise, send anything else that's in the files directory to the production server.
RewriteCond %{REQUEST_URI} ^/sites/[^\/]*/files/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/css/.*$
RewriteCond %{REQUEST_URI} !^/sites/[^\/]*/files/js/.*$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://www.example.com/$1 [QSA,L]Er arbeitet mit Drupal über MAMP, aber solange Sie lokal Apache verwenden, ist alles nur eine Variation derselben Idee. Passen Sie URLs an, die auf die Zielassets zeigen, und schreiben Sie sie auf die Live-Seite um.
Er konnte diese Regeln in ein kleines Feld in MAMP einfügen, das dies handhabt. Ich betreibe WordPress lokal über ein kleines Docker-Setup, daher habe ich meine `.htaccess`-Datei direkt bearbeitet und sie für meine Bedürfnisse vereinfacht.
RewriteCond %{REQUEST_URI} ^/wp-content/uploads/[^\/]*/.*$
RewriteRule ^(.*)$ https://css-tricks.de/$1 [QSA,L]Funktioniert für mich super! Hier ist eine visuelle Erklärung
Argh, das wollte ich oder etwas Ähnliches schon lange machen. Immer wieder Assets hin und her zu schicken war ein echter Schmerz, der viele Minuten verschwendet hat. Ich werde das im Auge behalten.
Das ist großartig. Ich habe gerade mit der Neugestaltung einer WordPress-Website begonnen und kann 6 GB Bilder überspringen, die auf meine lokale Maschine kopiert werden müssten.
Vielen Dank.
Für Drupal gibt es auch ein Modul, das wesentlich einfacher zu verwenden ist als das Hinzufügen von Rewrite-Regeln (und in viel mehr Situationen funktioniert): https://www.drupal.org/project/stage_file_proxy
Es ist auch einfach, es pro Umgebung zu konfigurieren, wenn Sie mehr als nur lokal und Produktion haben.
Für NGINX verwende ich das hier
https://gist.github.com/chuckreynolds/35bcec4323d314a7fff5a1d3fcd357bd
Ich hatte dasselbe Problem vor ein paar Jahren und habe dieses kleine Chrome-Plugin entwickelt. Funktioniert mit allen Arten von Webservern :)
https://github.com/amritb/LocalAssets
Danke dafür, Chris. Bei mir funktionierte es mit WordPress lokal auf ServerPress nicht, aber ich habe den folgenden Code unter http://rzen.net/serve-missing-media-production-apache-nginx/ gefunden, der funktionierte.
RewriteCond %{REQUEST_FILENAME} !-f [NC]
RewriteRule ^(.*.(js|css|png|jpe?g|gif|ico|svg)) http://server.com/$1 [NC,P,L]
Bei mir auch! Danke für den Link, Chris’ Code hat bei mir auch nicht funktioniert, und ich würde gerne wissen, warum :-/ Ich habe das ganze Internet durchsucht, aber keine Lösung gefunden…
In einigen Fällen müssen Sie einen Resolver hinzufügen, damit der proxy_pass funktioniert, z. B.
Ein Kollege von mir hat ein WordPress-Plugin entwickelt, das Bilder automatisch verarbeitet, wenn Sie lokal arbeiten – https://wordpress.org/plugins/coral-remote-images/
Danke für die Werbung, Daryn!
Mein Plugin oben erlaubt es Ihnen, nichts an der Datenbank ändern zu müssen. Bei den meisten Websites, die wir bauen, überschreiben wir einfach die URL über wp-config.php (WP_SITEURL und WP_HOME)… das Plugin geht davon aus und macht einige fundierte Vermutungen, und wendet sich nur an, wenn die URL nicht mit der in der Datenbank übereinstimmt. Sie können es auch mit einer Konstanten überschreiben.
Ich bin mir nicht sicher, wie es Multisite handhaben würde, aber. Nächste Schritte!
Wenn Sie lokal arbeiten, warum bearbeiten Sie nicht einfach Ihre hosts-Datei, um Ihre Domain auf localhost zu verweisen? Dann ändern sich die Pfade nie.
Ja, ich benutze diese Methode auch, aber Sie können den Uploads-Ordner nicht abkoppeln, wenn die Domain in Ihrer hosts-Datei dieselbe ist wie die Produktionsdomain. Ein weiteres Problem: Sie können keine neuen Dateien hochladen, wenn Sie Ihren Uploads-Ordner abgekoppelt haben.
Was passiert, wenn Sie lokal entwickeln und offline sind? (Z. B. auf Reisen)
Das ist eine interessante Situation, für die es sich lohnt, Lösungen zu finden. Vielleicht können Sie etwas einrichten, das diese Anfragen blockiert, damit sie nicht endlos laden/fehlschlagen. Vielleicht können Sie einen lokalen Server hochfahren, der jede Bildanfrage annimmt und Platzhaltergrafiken zurückgibt, und die Anfragen dorthin umleitet.
Jonas Merhej schrieb uns, um zu sagen:
Sie könnten einfach eine Browsererweiterung wie https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii?hl=en verwenden, um auf Ihre Produktionsbilder zu verweisen. Ich benutze es ständig, um gegen Produktionsinhalte zu testen.
Es wäre nützlich, wenn dies auch eine web.config-Version für IIS-Projekte enthalten würde.
Zwei Dinge, die verhindern könnten, dass dies funktioniert
Dieser Rewrite-Block muss *vor* dem `BEGIN WordPress`-Block stehen.
Bei Websites, deren Upload-Verzeichnisse nicht nach Jahres-/Monatsordnern organisiert sind, benötigt der Regex ein `?` nach dem zweiten `/`.
Es sollte also sein