Moin moin und hallo,

weiter in meiner Wintersmith Tutorial-Reihe, möchte ich nun zeigen wie man seine “Flat-Files” in Heroku einspielen und der Welt präsentieren kann (inklusive Domain Routing bei Host Europe).


Heroku

Falls es noch unbekannt sein sollte:
Heroku ist ein Cloud Dienst auf dem ich Anwendungen einspielen kann. Der “Clou” ist dabei, dass man seinen Server (Dyno) nach Bedarf skalieren kann, sprich horizontal(mehrere Knoten) als auch vertikal(mehr Speicher, CPU, usw.).

Heroku Support

Rein statische Resourcen lassen sich bei Heroku eigentlich nicht einspielen. Die von sich aus unterstützten Sprachen und System sind:

Ziel

Im folgenden möchte ich zeigen, wie man seine statische Webseite per PHP-Skript in Heroku einspielt. Das habe ich übrigens genauso mit diesem Blog gemacht, sprich das Ganze ist ein Beispiel aus dem echten Leben.

Wintersmith als Code-Generator

Wie ich schon in meinem letzten Artikel schrieb, lässt Wintersmith auch sehr gut als Code-Generator nutzen, wenn man sich vorher das Konzept durch den Kopf gehen lässt. Denn wenn man sich das Ganze genauer überlegt haben wir bereits einen spezielisierten Code-Generator vorleigen, der aus Jade Templates und Markdown-Skripten HTML-Dateien erzeugt.

Für PHP ist der Ansatz also im Grunde identisch nur der Ziel-Code ist nicht HTML sodnern PHP.

Code Generator Schritt 1

Der erste Schritt ist im “/contens” Bereich eine neue “index.json” Konfiguration-Datei an zu legen, die Wintersmith mitteilt, was das Quell-Template ist und wohin der erzeugte Code am Ende geschrieben werden soll.

├── contents
│   ├── index.json

index.json

{
  "template": "index-php.pug",
  "filename": "index.php"
}

Zusammengefasst: Wir lesen aus einem “index-php.pug”-Template und schreiben am Ende, für unser Deployment auf Heroku, in eine “index.php”.

Code Generator Schritt 2

Wie muss unsere “index.php”-Datei aussehen, damit alles auf Heroku auch rund läuft?

Sehr einfach, da wir nur statische Ressorucen einbinden müssen:

| <?php require_once("index.html"); ?>

Außerdem muss man wissen, dass Heroku, für PHP-Apps, Composer als Automations-Werkzeug einsetzen (so wie das aktuell in der PHP-Welt “en vogue” ist).

Sprich neben der “index.php” brauchen wir auch eine “composer.json” mit all unseren Abhängigkeiten:

{}

Ja ganz recht, wir haben gar keine Abhängigkeiten, deshalb bleibt die Datei leer.

Der Vollständigkeit-halber hier die Konfiguration für die “composer.json”

{
  "template": "composer.pug",
  "filename": "composer.json"
}

Zusammengefassung Code-Generator

OK, das Beispiel mit der “index.php” ist denkbar einfach gestrickt, aber das soll ja auch so sein. Wir haben ja die Hauptarbeit bereits mit Wintersmith erledigt und wollen unser finales Ergebnis lediglich publizieren.

Damit alles reibungslos funktioniert braucht man sowohl die “index.php” als auch die “composer.json” im Wurzelverzeichnis des Builds.

Deployment auf Heroku

Ich habe nun also meinen Quellcode, wie bringe ich das Ganze auf Heroku.

Dazu verweise ich einfach mal auf die offizielle Dokumentation, da mir selbst kein einfacherer Weg eingefallen ist.

Das einzige was man sich sparen kann, ist das Klonen des Beispiel Git-Projektes.

Ok, ok, ich fasse die Schritte doch nochmal zusammen:

  1. Build extrahieren und Git-Projekt initialisieren

    ~$> cp ./build ~/website -R
    ~$> git init
  2. Heroku Projekt initalisieren

    ~$> cd ~/website
    ~$> heroku create
  3. Heroku Projekt einspielen

    ~$> git push heroku master

Das war es dann auch tatsächlich schon. Heroku erkennt automatisch, anhand der vorliegenden Dateien, welches System (PHP) es auf setzen muss und erzeugt einen “Default”-Dyno für uns.

Wenige Sekunden später ist man online.

Routing der eigenen Webseite

Nachdem der Server nun auf gesetzt ist und läuft, ist er trotzdem nur unter einer eher kryptischen URL zu erreichen. Damit die App auch über eine eigene Domain läuft, muss man zunächst die Domain natürlich kaufen und dann in Heroku unter Settings:

Heroku Settings

seine Wunsch-Domain eintragen. In meinem Fall sieht das wie folgt aus: Heroku Domains

Registrar

Damit ist man aber nur halb-fertig, denn man muss seinem Domain-Registrar auch mitteilen, dass er die jeweiligen Domain-Aufrufe zu dem Server umleiten soll.

Ich selbst nutze die Dienste von Host Europe (und bin bisher sehr zufrieden)

und meine Domain-Einstellungen dort sehen wie folgt aus: Hosteurope DNS

Wichtig ist dass man für die Witerleitung “CNAME” als Typ wählt und dann nur noch seine Heroku-Zieladresse einträgt.


Fazit

Wenn man sich gut vorberietet dauert der gesamte Einrichtungsprozess maximal 30 Minuten. Allerdings ist die Seite in der Regel nicht sofort unter der Wunschdomain zu erreichen. Das kann bis zu 24 Stunden (meistens aber deutlich schneller) dauern.

Wie eingangs bechrieben, läuft dieser Blog, den Sie gerade lesen (ja genau, dieser Text jetzt), zur Zeit auch auf Heroku und hat mich bisher so gut wie nichts gekostet, da ich mit dem Free Dyno noch sehr gut klar komme (nur statsiche Ressourcen, d.h. kaum CPU- oder Speicher-Verbrauch).

Und sollte doch mal die Hardware knapp werden, kann ich jeder Zeit mein System weiter, per Knopf-Druck skalieren.


Ausblick

In dem nächsten Artikel zu dieser Reihe möchte ich zeigen, wie man seinen Buildlauf inklusive Deplyoment, mit Hilfe von Grunt voll-automatisieren kann.

In diesem Sinne, bis demnächst!