CraftCMS und S3 — eine kurze Odyssee

sascha fuchs
webdevs.xyz
Published in
4 min readFeb 14, 2017

Ich bin jetzt nicht der große DevOp, so war es bislang meistens so das ich AWS Zugänge immer vorbereitet bekommen haben. Privat war AWS oder S3 nie Thema, ich arbeite da mehr mit DigitalOcean. Nun betreue ich auch DESIGNLOVR.de, da kommt es des öfteren vor das ich ein neues Feature einbinde. Also wird die remote Datenbank importiert und die Assets (damit es im Frontend nicht zu Fehlern kommt wegen nicht vorhandenen Bildern). Kann man alles mittels FTP Sync machen, aber smarter wären zentrale Assets über S3. Wie gesagt hab ich mit S3 wenig zu tun, so ist das Tutorial vielleicht von dem ein oder anderen Fehler behaftet.

Ich hab die Zugangsdaten bekommen mit dem Beisatz „Du machst das schon“ ;) . Erster Schritt einloggen in die AWS Konsole, sollte nicht das schwerste sein. In der Konsole, wird man erstmal erschlagen von der Vielzahl der Services, wir wählen daherS3 aus und erstellen uns ein Bucket.

Macht dabei nicht den Fehler in dem ihr als Region Frankfurt oder London wählt, mit den Regionen kommt Craft 2.x nicht klar (ab Craft 3.x ist das kein Problem mehr), womit Craft keinen Zugriff auf die Assets erhält. Ich habe Ireland genommen womit Craft dann zurecht kommt (war meine dritte Region, ist toll wenn so was nicht offiziell beschrieben wird).
Der Bucket Name muss im übrigen Unique sein.

Euer Bucket steht, eventuell habt ihr Assets die ihr uploaden möchtet, oder ihr fangt bei Null an, in jedem Fall braucht ihr ZugangsID und Secret Key.

Guter Einwand von Sebastian Buckpesch. Statt des globalen IAM Users, erstellen wir für das Projekt einen eigenen User.

Fügt einen neuen User dazu mit einem passenden Username und stellt auf Programmatic Access .

Im nächsten Fenster müsst ihr den User einer Gruppe zuweisen, oder weist dem Nutzer die Rechte direkt zu.

Wenn ihr den User erstellt habt, erhaltet ihr auch die ID und den Secret Key. ID und Key benötigt ihr, um euch mit einem S3 kompatiblen FTP Client in euer Bucket einzuloggen und auch für Craft. In meinem Fall hab ich dann 5000 Assets auf das Bucket geladen, da S3 nachträglich angehängt wird (und DESIGNLOVR ein kleines Monster ist was Bilder angeht).

Was ihr ebenfalls noch machen müsst, die Properties des Folders umstellen. In meinem Fall lade ich alle Assets in einen uploads Folder . Damit aber Craft auf die Bilder zugreifen kann muss der Folder noch Public gestellt werden.

Falls ihr in dem Verzeichnis schon Bilder hochgeladen habt und dann auf Make Public gestellt habt, solltet ihr den Browsertab offen lassen, da der gesamte Prozess mit über euren Rechner läuft (warum auch immer das so ist). Ist der Prozess abgeschlossen, modifizieren wir die Datei Quellen in Craft.

Falls ihr schon Bilder ins Bucket geladen habt, solltet ihr wenn ihr die Dateiverwaltung öffnet, schon Bilder sehen. Auf jeden Fall einmal testen ob der Upload eines Bildes auch Reibungslos abläuft.

Wenn das alles funktioniert kümmern wir uns nur noch um das Frontend. In den meisten Fällen wird man Imager installiert haben und damit dieser auch die Bilder der S3 Instanz verwendet, passt man ihn über ein Config File an. Wenn nicht schon passiert, erstellt ihr euch im Verzeichnis craft/config/ ein imager.php File. Dort kommt dann folgendes Snippet rein:

<?php
/**
* Imager Config
*/

return array(
'hashPath' => false,
'hashRemoteUrl' => 'host',
'awsEnabled' => true,
'awsAccessKey' => 'Eure ID',
'awsSecretAccessKey' => 'Euer Key',
'awsBucket' => 'mytutorial-assets',
'awsFolder' => 'uploads',
'instanceReuseEnable' => true,
'smartResizeEnabled' => true,
'interlace' => true
);

Tragt eure ID, den Secret Key, den Namen des Buckets und des Upload Folders ein. Das war es auch schon. Craft wird jetzt die S3 Instanz als Bildspeicher verwenden, womit das Synchronisieren der Assets über die unterschiedlichen Stages (local, dev, stage, live, whatever) entfällt. Nicht wundern das die Image Transforms die Imager anlegt, auf eurem Server gespeichert werden. Das Frontend selbst nutzt auch nur die Bilder eures Servers (die durch den Image Transform generiert werden), was für mich völlig ausreichend ist.

--

--

sascha fuchs
webdevs.xyz

Software Engineer, Nerd, Code Yoda, Gamer, Star Wars Geek