JTL WaWi / JTL Shop für Betrieb mit Cloudflare oder anderem CDN konfigurieren

Einstellungen für JTL-WAWI

Will man den eigenen WebServer durch die Einrichtung von Cloudflare oder anderen CDN-Diensten (Content Delivery Network) etwas entlasten und die Ladezeiten seiner Kunden verbessern, kann das zu Problemen beim Shopabgleich mit der JTL WaWi führen. Dies kann auftreten, wenn Anfragen an den Shop während des Syncs von den Cloudflare-DNS-Servern auf ein eigenes Rechenzentrum geleitet werden, anstatt direkt an den Server. Dies führt meist dazu, dass Bilder oder andere Dateianhänge nicht korrekt zwischen JTL-WaWi und JTL-Shop übertragen werden.

Um die DNS-Server von Cloudflare zum umgehen, muss der Shopabgleich der WaWi über die IP-Adresse des Shops durchgeführt werden. Es ist aber nicht möglich in der WaWi eine IP-Adresse zu hinterlegen, da die Lizenz des Shops auf eine Domain laufen muss.
Eine einfache Lösung des Problems ist ein Eintrag in der hosts-Datei. Welche Schritte Sie hierfür vornehmen müssen, erklären wir in der folgenden Anleitung.

Anleitung am Beispiel-Shop „jtl-shop4.de“

  1. Falls Cloudflare bereits aktiviert ist, muss dieses im Plesk oder Cloudflare-Backend auf den Entwicklungsmodus gestellt werden. Nur so ist sicher gestellt, dass Sie die richtige IP-Adresse für ihren Server erhalten.
  2. IP-Adresse des Shop-Systems abrufen:
    • Start -> Ausführen -> cmd (Windows-Taste + R)
    • ping jtl-shop4.de eingeben
    • IP-Adresse kopieren (siehe Bild)
      Windows Kommandozeile Ping
  3. hosts-Datei aufs Desktop kopieren
    C:\Windows\System32\drivers\etc\hosts
  4. hosts-Datei auf dem Desktop mit dem Editor öffnen
  5. IP-Adresse & Domain des JTL-Shops (ohne http://, www oder Unterordner) eintragen
    33.33.33.33 jtl-shop4.de
  6. hosts-Datei speichern
  7. hosts-Datei in Windows Ordner mit der Version vom Desktop überschreiben

Diese Schritte müssen auf allen PCs, die einen Shopabgleich durchführen, ausgeführt werden.

Sollten Probleme bei der Konfiguration auftreten, helfen wir natürlich gerne weiter.

Einstellungen für JTL-Shop

Benutzt man die Cache von Cloudflare, so kann es passieren dass man in der WaWi Bilder austauscht und diese nicht im Shop erscheinen. Das Problem entsteht dadurch, daß die Namen der Bilder durch die WaWi immer nach dem gleichen Muster gesetzt werden. Der Shop liefert das neue Bild also unter dem gleichen Namen aus wie das alte. Cloudflare erkennt dadurch nicht daß sich das Bild geändert hat und liefert an den Browser weiterhin das alte Bild aus.

Um nicht bei jedem neuen Bild von Hand die Cache bei Cloudflare leeren zu müssen können wir in der .htaccess Datei des Shop eine Caching Regel hinzufügen, die Cloudflare anweist nach einer bestimmten Zeitspanne die Datei in der Cache zu erneuern. Dazu ergänzen wir den Abschnitt:

<IfModule mod_headers.c>
Header unset ETag
Header set X-UA-Compatible "IE=edge"
Header set X-Content-Type-Options "nosniff"
Header unset X-Powered-By
<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>

und fügen vor dem schließenden </IfModule> Tag die neue Regel ein:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "s-maxage=3600"

</filesMatch>

Das ganze sollte dass folgendermaßen aussehen:

<IfModule mod_headers.c>
Header unset ETag
Header set X-UA-Compatible "IE=edge"
Header set X-Content-Type-Options "nosniff"
Header unset X-Powered-By
<FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
   <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
       Header set Cache-Control "s-maxage=3600"
   </filesMatch>
</IfModule>

Damit Cloudflare die neuen Header auch erkennt muss man einmalig die komplette Cache bei Cloudflare leeren.

 

JTL Service Partner
Google Partner

Ochsengasse 2, 88250 WeingartenTel: +49-751-5616290 E-Mail senden