Mein Workflow: Webdesign lokal mit Cloud und Git – Teil 1

Die Menschlein die meinen Blog schon länger lesen oder mir auch bei Twitter etc. folgen, werden wissen, dass ich neben dem Studium als freiberuflicher Grafik- und Webdesigner arbeite. Ich habe vor einiger Zeit mein ganzes Leben etwas umgekrempelt und versucht alles irgendwie vernünftig zu Organisieren und die maximale Produktivität aus der Zeit die ich habe, herauszubekommen.

In diesem Zusammenhang will ich eine kleine Serie Mein Workflow starten. Wo ich euch ein bisschen Zeiten will, wie und mit welchen Tools ich arbeite.

Die Magie findet lokal statt

Ich mache eigentlich nur Frontend Entwicklung und sofern man nur mit HTML/CSS/JS arbeitet geht das lokal natürlich wunderbar. Wenn man jedoch Themes für CMS baut, wie für WordPress, neigt man oft dazu direkt auf einem dev-server zu arbeiten. Ich habe mir nun einen Workflow angeeignet, der mir mittlerweile das Arbeiten ungemein erleichtert, da ich an verschiedenen Workstations Zugriff auf meine Projekte habe.
Dazu bediene ich mich der Cloud, einem lokalen Webserver und Git.

Die Cloud einrichten

Welche Cloud Lösung ihr benutzt, ist eigentlich egal. Ob Dropbox, Google Drive, Sky oder sonst was.
Ich persönlich benutze Tresorit. Der Vorteil an Tresorit ist, einmal die Clientseitige Verschlüsselung mit AES, Serverstandort in der EU und was mir besonders gefällt, man kann einzelne Ordner in die Cloud einbinden und synchronisieren. Was super ist, da man seine persönlichen Daten aber auch berufliche Daten so in einer Cloud verwalten kann.

Ich habe also einen Ordner erstellt der in die Cloud kommt. In diesem Ordner noch folgende Unterordner:

logs
config
db
vhosts

Den Webserver einrichten

Als nächstes kommt der lokale Webserver. Ich benutzte WAMP. Man kann aber auch MAMP (Mac) oder XAMP benutzten. Jetzt muss man ein bisschen tricksen.
In der htconfig betten wir unsere eigene config ein die in der Cloud unter config liegt.
Und in dieser config, setzten wir das Directory auf unserenen vhosts Ordner. Dazu noch die logs auf logs setzen und den VirtualDocumentRoot wieder auf vhosts setzen.

UseCanonicalName Off
VirtualDocumentRoot C:/ORDNER/vhosts/%0

Der Trick liegt in UseCanonicalName Off und der %0.
Der Inhalt von vhosts sind in meinem Fall die Projekte in URL-Ordner Struktur.
Also meinkunde1.dev, projekt3.dev usw.

Wenn wir dann die domain namen in die Windows hosts datei schreiben und im Browser dann auf projekt3.dev gehen, durchsucht der Apache automatisch den vhosts Ordner in der Cloud und leitet uns an die richtige Stelle weiter. Wer schonmal ein bisschen was mit Webservern gemacht hat weiß, dass man lokal idR. in der vhost_config die virtuellen Hosts per Hand eintragen muss mit ServerName, ServerAlias und Location. In unserem Fall geschiet dies jedoch automatisch. Sobald wir einen neuen Ordner im vhosts Ordner haben, wird dieser Abrufbar.

Was noch fehlt ist die Datenbank. Es gibt da mehrere Möglichkeiten. Man kann einmal den data Ordner in den db Ordner der Cloud kopieren und in der mysql.ini den Pfad auf den Cloud Ordner setzen. Funktioniert bei mir bisher ganz gut. Kann aber zu Fehlern und korrupten Datenbanken führen. Der Vorteil ist, wenn ich die apache config und mysql config auf z.B. dem Laptop und Desktop PC abgeändert habe, habe ich an beiden Arbeitsplätzen Zugriff auf alles. Alternativ kann man auch eine remote Datenbank benutzen die irgendwo gehostet wird. Vorteil, dass man keine Angst vor korrupten Datenbankeinträgen haben muss, jedoch Internet braucht.

Die WordPress / CMS Installation geht dann direkt in die jeweiligen vhosts Ordner.

  • Love
  • Save
    Add a blog to Bloglovin’
    Enter the full blog address (e.g. https://www.fashionsquad.com)
    We're working on your request. This will take just a minute...