Webentwicklung - Aufgabe 4: Webserver-Konfiguration

Kontext

Bisher haben Sie den vorkonfigurierten Webserver der HTW Berlin benutzt, um Ihre Websites verfügbar zu machen. Heroku ist ein Anbieter für Platform as a Service (PaaS), d.h. dass Sie einen Webserver für beliebige Webanwendungen (= Plattform) anfordern können, und Heroku wird Ihnen diesen auf Anfrage bereitstellen und nach Ihren Vorgaben einrichten.

Das Ganze passiert vollautomatisch und ist für kleine Projekte kostenlos. Die Server-Konfiguration erfolgt über eine einfache Text-Datei (mehr dazu unten), und das Deployment ist ein einfaches git push -- Sie brauchen also kein handgeschriebenes Deployment-Skript mehr. Wir werden Heroku für diese und die nächsten Übungen verwenden.

0. Werkzeuge einrichten

Auf den Laborrechnern sind diese Schritte nicht nötig: PHP, Composer und der Heroku-Client sind hier bereits installiert.

Sorgen Sie dafür, dass Sie auf Ihrem Arbeitsrechner PHP installiert haben (z.B. bequem über XAMPP) und Sie den php-Befehl von der Kommandozeile aufrufen können:

$> php --version
PHP 7.1.6 (cli) (built: Jun  8 2017 02:06:32) ( ZTS MSVC14 (Visual C++ 2015) x86 )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

Installieren Sie Composer auf Ihrem Arbeitsrechner, und stellen Sie sicher, dass Sie composer von der Kommandozeile aufrufen können:
```
$> composer --version
Composer version 1.5.2 2017-09-11 16:59:25
```
Installieren Sie den Heroku-Clienten; auch dieser muss von der Kommandozeile aufrufbar sein:
```
$> heroku --version
heroku-cli/6.14.37-fe59bd4 (windows-x64) node-v9.2.0
```

1. Git-Repo einrichten und Deployment des Basis-Projekts

Sie brauchen für die folgenden Teilaufgaben ein Basis-Projekt, und weil Sie auf dem f4-Server nicht direkt ein leeres Git-Repo angelegen können, ist eine Reihe von Schritten notwendig.

Erstellen Sie auf studi.f4.htw-berlin.de ein neues Git-Repository für diese Übungsaufgabe (in den folgenden Schritten wird uebung-4 angenommen).

Klonen Sie von GitHub das folgende Basis-Projekt in einen (neuen) Ordner Ihrer Wahl, und wechseln Sie dann in diesen Ordner (hier: uebung-4):

$> git clone https://github.com/fzieris/heroku-php-starter.git uebung-4
Cloning into 'uebung-4'...
remote: Counting objects: 11, done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 11 (delta 0), reused 11 (delta 0), pack-reused 0
Unpacking objects: 100% (11/11), done.
Checking connectivity... done.

$> cd uebung-4

Ändern Sie die Adresse des Git-Remotes origin auf Ihr eigenes, frisches Git-Repository auf f4 mit diesem Befehl (ersetzen Sie s0000000 durch Ihre Matrikelnummer):
```
$> git remote set-url origin https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git
```
Sie können das Ergebnis mit git remote -v überprüfen. Hier sollte nun für origin eine f4-URL angezeigt werden:
```
$> git remote -v
origin  https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git (fetch)
origin  https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git (push)
```

Überschreiben Sie den Inhalt Ihres f4-Repos mit dem Basis-Projekt von GitHub:

$> git push -f origin master
Counting objects: 11, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (11/11), 1.23 KiB | 0 bytes/s, done.
Total 11 (delta 0), reused 0 (delta 0)
To https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git
 + 61df014...bc97f85 master -> master (forced update)

Legen Sie sich auf https://signup.heroku.com einen Heroku-Account an. Wählen Sie dabei "PHP" als Ihre "Primary Development Language" aus.
Rufen Sie dann auf der Kommandozeile heroku login auf und geben Sie Ihre Heroku-Zugangsdaten ein.

Rufen Sie in Ihrem Arbeitsverzeichnis für die Übungsaufgabe heroku create auf, um einen neuen Heroku-Server anzufordern. Heroku wird dafür einen zufälligen Namen generieren (hier: glacial-lowlands-47974), und eine Subdomain sowie ein Git-Repository für Sie einrichten:

$> heroku create
Creating app... done, glacial-lowlands-47974
https://glacial-lowlands-47974.herokuapp.com/ | https://git.heroku.com/glacial-lowlands-47974.git

Nebenbei hat dieser Befehl für Sie zusätzlich zu origin ein weiteres Remote eingerichtet. Wiederum können Sie das Ergebnis mit git remote -v überprüfen:

$> git remote -v
heroku  https://git.heroku.com/glacial-lowlands-47974.git (fetch)
heroku  https://git.heroku.com/glacial-lowlands-47974.git (push)
origin  https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git (fetch)
origin  https://studi.f4.htw-berlin.de/git/s0000000/uebung-4.git (push)

Deployen Sie die Website indem Sie zum Remote heroku pushen:

$> git push heroku
Counting objects: 11, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (11/11), 1.23 KiB | 0 bytes/s, done.
Total 11 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        - php (7.1.11)
remote:        - nginx (1.8.1)
remote:        - apache (2.4.29)
remote: -----> Installing dependencies...
remote:        Composer version 1.5.2 2017-09-11 16:59:25
remote:        Loading composer repositories with package information
remote:        Installing dependencies from lock file
remote:        Nothing to install or update
remote:        Generating optimized autoload files
remote: -----> Preparing runtime environment...
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 14.2M
remote: -----> Launching...
remote:        Released v3
remote:        https://glacial-lowlands-47974.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/glacial-lowlands-47974.git
 * [new branch]      master -> master

Ist der Push erfolgreich, können Sie direkt danach im Browser Ihre Website aufrufen (im obigen Beispiel wäre das also https://glacial-lowlands-47974.herokuapp.com/). Sie sollten dann mit "Hallo, Welt!" begrüßt werden.

Wenn Sie nun an den eigentlichen Aufgaben arbeiten, bedenken Sie bitte, dass die Ablage in der Versionsverwaltung und ein Deployment zwei verschiedene Dinge sind:

Um Ihre Arbeitsergebnisse in der Versionsverwaltung abzulegen, rufen Sie git push origin auf (Push zum f4-Server).
Um Ihre Arbeitsergebnisse zu deployen, rufen Sie git push heroku auf (Push zu Herkou).

Richten Sie dem Dozenten einen Zugang zu beiden Systemen ein:

Zugang zum f4-Repo: Wie schon bei den ersten Übungsaufgaben.
Zugang zum Heroku-Server: Im Heroku-Dashboard wählen Sie Ihre Webseite aus, und fügen dann im Reiter "Access" die Veranstalter-Adresse franz.zieris@gmail.com über "Add collaborateur" hinzu.

2. Webserver-Konfiguration

Schauen Sie sich zuerst alle bereits bestehenden Dateien in Ihrem Projekt an und vollziehen Sie ihre jeweiligen Bedeutungen nach:

Procfile: Besteht aus nur einer Zeile. Diese Datei teilt Heroku mit, welche Art von Server gestartet werden soll (hier: ein Apache in Version 2 mit PHP), in welchem Unterordner die Dateien für die Website liegen (hier: web/), und welche zusätzliche Konfiguration für den Apache-Webserver geladen werden soll (hier: apache.conf).
apache.conf: Enthält Apache-Direktiven, die zusätzlich zur Standard-Konfiguration (das ist übrigens diese hier) beim Starten des Servers angewendet werden.
composer.json und composer.lock: Notwendig für PHP-Anwendungen auf Heroku, legt aktuell nur die zu verwendende PHP-Version fest.

Folgende zwei Ordner sind für Sie relevant:

web/: Die Inhalte dieses Ordners werden über den Webserver öffentlich verfügbar gemacht.
web/cgi-bin/: Dateien mit .sh-Endung in diesem Ordner werden als CGI-Skripte interpretiert.

Aufgabe: Schreiben Sie Apache-Direktiven, sodass sich der Webserver wiefolgt verhält:

Anfrage	Antwort
`GET /` und `GET /index.htm`	Anzeige der `index.htm`, ohne Weiterleitung
`GET /hallo.htm`	interne Weiterleitung an `index.htm`, d.h. im Browser wird `hallo.htm` in der Adressleiste angezeigt
`GET /index.html`	externe Weiterleitung an `index.htm`, d.h. im Browser wird `index.htm` in der Adressleiste angezeigt
`GET /super-secret.htm`	überhaupt kein Zugriff (Status `403`)
`GET /secret.htm`	geschützter Zugriff, nur mit Nutzer `htw` und Passwort `webdev`
sonstige nicht existierende Dateien	Eigene 404-Fehlerseite bzw. -meldung

Hinweise:

Die Dateien super-secret.htm und secret.htm müssen Sie selbst anlegen; Dateien mit den Namen hallo.htm und index.html sollen nicht tatsächlich auf dem Server liegen.
Manche Direktiven funktionieren mit absoluten Pfaden. Ihre Anwendung liegt auf dem Heroku-Server im Ordner /app/.
Es ist Ihnen überlassen, welche Direktiven Sie in die allgemeine Konfiguration (apache.conf) welche in eine (von Ihnen anzulegende) .htaccess-Datei schreiben.
- Achtung: Nicht alle Direktiven dürfen in .htaccess-Dateien geschrieben werden! Die Übersicht aller Apache-Direktiven verrät Ihnen die erlaubten Kontexte: ein v bzw. Virtual Host entspricht hier der apache.conf-Datei; ein h einer .htaccess-Datei.
Im Heroku-Dashboard finden Sie eine Übersicht ihrer Heroku-Server ("Apps"). Wenn Sie einen davon anwählen, können Sie dann oben rechts unter "More" die Logfiles einsehen und so Problemen mit Ihrer Konfiguration nachspüren.

3. CGI-Skript

Füllen Sie das Shell-Skript cgi-bin/hello-world.sh mit Inhalt, sodass es ein gültiges HTML5-Dokument erzeugt, dass das aktuelle Datum und Uhrzeit anzeigt.

Heroku Logs

Aufgabe 4: Webserver-Konfiguration (8 Punkte)