Shopware + BunnyCDN für deine Medien

Ein paar Worte zu CDN

Was bringt es dir, ein CDN einzusetzen? Du bist vielleicht sogar nur im deutschsprachigen Raum tätig und weißt einfach nicht, was dir der Einsatz bringen könnte?

Viele werden schon von Content Delivery Network (CDN), gehört haben. Amazon, Google, Microsoft, quasi alle großen Player bieten sowas an. Aber auch kleinere Anbieter mit übersichtlicherer Preispolitik und auch einfacherer Einrichtung gibt es auf dem Markt.

Grundlegend sind CDNs dazu da, die statischen Dateien jedem Besucher der Seite, bzw. des Shops, egal auf welchem Kontinent, schnell zur Verfügung zu stellen. Die Anbieter erreichen dies durch eine Vielzahl von Servern verteilt auf der Welt.

Es gibt zwei Arten, die Dateien dem CDN zur Verfügung zu stellen:

Pull-Art

Diese Art lädt die Datei in Echtzeit vom Shop, sobald die Datei einmal aufgerufen wird und cacht diese dann. Dies geschieht aber je POP (Standort des CDN-Servers).

Vorteile

  • Man hat die Dateien in eigener Hand und auf dem eigenen Server.

Nachteile

  • Durch das automatische Caching ist der initiale Aufruf je POP lahm. Dies entschleunigt den initialen Aufruf. Daher empfehle ich die Pull-Art keinesfalls, wenn sich die Medien-Dateien oft ändern.
  • Zudem reduziert sich der Traffic des eigenen Servers erst merkbar ab dem Zeitpunkt, wo die Dateien alle einmal aufgerufen wurden und durch das CDN gecacht wurden.
  • Der Speicherplatz für den Media-Ordner wird nicht gespart, daher auch größere Backups.

Push-Art

Bei dieser Art müssen die Dateien nicht auf dem Server des Shops liegen. Sie müssen auf einem externen Speicher (Storage) bereitgestellt werden.

Vorteile

  • Einsparung des Speicherplatzes für den Media-Ordner.
  • Durch die Einsparung extrem kleinere Backups, da der Media-Ordner gespart wird.
  • Keine große Verzögerung je POP.
  • Komplette Traffic auf den Media-Ordner eingespart.
  • Lässt sich auch per Regeln (Edge Rules) individualisieren. Beispielsweise das Holen von JS und CSS live vom Server.

Nachteile

  • Initial müssen die vorhanden Dateien auf den externen Speicher geladen werden.
  • Vor Kündigung müssen die Dateien erst wieder auf dem eigenen Server bereitstehen.

Welches CDN?

Ich möchte hier keine Pro- und Contra-Liste machen, weswegen ich einen Anbieter zu allen anderen bevorzuge. Und ich erhalte auch kein Geld dafür diesen zu nennen. Ich tue dies nur, weil ich davon überzeugt bin. BunnyCDN ist nach mehreren Umzügen nun am längsten im Einsatz. Der Traffic und besonders der Speicherplatz sind extrem günstig. Außerdem sind die Server extrem schnell. Während andere Anbieter eine Begrenzung von Dateien und Ordner je Speicher haben, entfällt dies bei diesem Anbieter.

HowTo: BunnyCDN für deinen Shop

Pull-Art

Nach dem Erstellen des Accounts erstellst du deine Pull-Zone unter Pull ZonesCreate Zone (Link).

Den Namen kannst du frei wählen. Der Name ist ein Teil der Domain. Die Origin URL ist die Adresse des Shops. Hier ruft das CDN die Dateien ab. Siehe auch im Support Hub von BunnyCDN. Optional lässt sich auch nachträglich eine eigene Domain hinterlegen. Mehr dazu hier.

Shopware 5

Bearbeite die config.php-Datei des Shops und füge folgendes (fett markiert) an das Ende vor der schließenden eckigen Klammer und dem Semikolon ein und ersetze https://example.b-cdn.net durch die Domain von BunnyCDN.

return [
    'db' => [
        'username' => 'safe',
        'password' => 'safe',
        'dbname' => 'safe',
        'host' => 'safe',
        'port' => '3306'
    ],
    'cdn' => [
       'adapters' => [
            'local' => [
                'mediaUrl' => 'https://example.b-cdn.net'
                ]
        ]
    ]
];

Nach dem Speichern und Upload der config.php werden die Bilder aus deinem Shop nun alle über die entsprechende Domain geladen. Sofern das Frontend aufgrund einer Fehlermeldung nicht mehr aufrufbar ist, prüfe die Struktur der config.php. Meist wurden die Daten dann an falscher Stelle eingefügt. Und fertig!

Shopware 6

Bearbeitet die shopware.yml-Datei im Unterordner config/packages des Shops. Sollte der Ordner oder die Datei noch nicht existieren, so musst du diese noch anlegen. Füge folgendes (fett markiert) nach shopware: in einer neuen Zeile ein und passe die Werte an die Daten von BunnyCDN an.

shopware:
    cdn:
        url: "https://example.b-cdn.net"

Achte auf die Einrückungen. Und fertig!

Push-Art

Erstelle deine Storage-Zone unter StorageAdd Storage Zone (Link) mit einem individuellen Namen.

Bearbeite nun die Storage -Zone und klicke oben rechts auf CONNECT PULL ZONE.

Erstelle die Pull-Zone. Der Name ist ein Teil der Domain. Optional lässt sich auch hier nachträglich eine eigene Domain hinterlegen. Mehr dazu hier.

Shopware 5

Für die Verarbeitung des Speichers ist ein spezieller Adapter notwendig. Dieser sorgt dafür, dass die Dateien nach BunnyCDN übertragen werden, sobald etwas in die Medien-Verwaltung hochgeladen wird. Den Adapter kannst du dir hier herunterladen: https://github.com/FriendsOfShopware/FroshBunnycdnMediaStorage/releases
Lade das heruntergeladene ZIP-Archiv in deinem Plugin-Manager von Shopware hoch und installiere und aktiviere das Plugin dann.

Bearbeite die config.php-Datei des Shops und füge folgendes (fett markiert) an das Ende vor der schließenden eckigen Klammer und dem Semikolon ein und passe die Werte an die Daten von BunnyCDN an. Der apiKey entspricht dem FTP-Passwort, den du aus den Einstellungen der Storage-Einstellung bekommst.

 return [
    'db' => [
        'username' => 'safe',
        'password' => 'safe',
        'dbname' => 'safe',
        'host' => 'safe',
        'port' => '3306'
    ],
    'cdn' => [
         'backend' => 'local', /* diesen Wert ändern wir nach der Migration in bunnycdn ab */
         'adapters' => [
             'bunnycdn' =>
                 [
                     'type' => 'bunnycdn',
                     'mediaUrl' => 'https://example.b-cdn.net/',
                     'apiUrl' => 'https://storage.bunnycdn.com/example/',
                      'apiKey' => 'secret-api-key'
                 ]
          ]
    ] 
]; 
Migration

Lade den Ordner media des Shops manuell per FTP auf den Storage Zugangsdaten von BunnyCDN findest du in den Einstellungen des Storages. Dadurch ist sichergestellt, dass diese Dateien auch noch bis zum Abschluss über die Shop-Adresse verfügbar sind.

Ändere nach der Migration die config.php-Datei. Der Wert local von ‚backend‚ muss in bunnycdn geändert werden. Und fertig!

Shopware 6

Für die Verarbeitung des Speichers ist ein spezieller Adapter notwendig. Dieser sorgt dafür, dass die Dateien nach BunnyCDN übertragen werden, sobald etwas in die Medien-Verwaltung hochgeladen wird. Diesen kannst du dir hier herunterladen:
https://github.com/FriendsOfShopware/FroshPlatformBunnycdnMediaStorage/releases
Lade das heruntergeladene ZIP-Archiv in deinem Plugin-Manager (Shortcut: G A) von Shopware hoch und installiere und aktiviere das Plugin dann.

Migration

Lade den Ordner media des Shops manuell per FTP auf den Storage Zugangsdaten von BunnyCDN findest du in den Einstellungen des Storages.

Bearbeite nach der Migration die shopware.yml-Datei im Unterordner config/packages des Shops. Wenn der Ordner oder die Datei noch nicht existieren sein sollte, musst du diesen noch anlegen. Füge folgendes (fett markiert) nach shopware: in einer neuen Zeile ein und passe die Werte an die Daten von BunnyCDN an. Der apiKey entspricht dem FTP-Passwort, den du aus den Einstellungen der Storage-Einstellung bekommst.

shopware:
     filesystem:
         public:
             type: "bunnycdn"
             config:
                 apiUrl: "https://storage.bunnycdn.com/example/"
                 apiKey: "secret-api-key"
     cdn:
         url: "https://example.b-cdn.net"

Achte auf die Einrückungen. Und fertig!