Frontend Routing in einem Symfony2 Projekt

Moderne Webapplikationen werden immer häufiger in der Form von Single Page Applications (SPA) umgesetzt. Die Verwaltung der Templates wird dabei im Frontend gehandhabt, das Backend dient als Daten-Schnittstelle. Ich möchte euch in diesem Artikel eine Nginx-Konfiguration für ein Symfony2 Projekt vorstellen, bei der die Auslieferung der Frontend-Resourcen über das öffentliche web-Verzeichnis der Symfony Applikation erfolgt und die Backendschnittstellen hinter einen /api-Prefix gelegt werden. Das Ziel soll dabei sein, dass die für den Endnutzer „sauberen“ URLs im Frontend gehandhabt werden. Also alle URLs die nicht mit /api beginnen, wie z.B. /gewinnspiel sollen im Frontend geroutet und dort das passende Template dafür geladen werden.

Getestet ist die Konfiguration mit Symfony 2.7.5 und einem nginx in der Version 1.6.2. Es sollte jedoch auch mit den meisten 2.x Versionen von Symfony und auch älteren Versionen von nginx funktionieren. Ein Beispiel-Syomfony2 Projekt könnt ihr in diesem Github Repository finden.

Nginx Konfiguration

Die Nginx ist bis auf wenige Stellen die empfohlene Nginx Konfiguration aus der Symfony2 Dokumentation.

Symfony2 Anpassungen

In der Symfony Konfiguration habe ich lediglich auf der „höchsten“ Ebene einen /api-Prefix konfiguriert. Der Prefix kaskadiert dann durch alle konfigurierten Routen in der inkludierten Resource durch. Die komplette prefix-Konfiguration kann in folgendem Commit eingesehen werden. Beispiel:

Beispiele

Folgend nun einige Beispiele von URLs und wie sie geroutet werden:

  • / => index.html
  • /gewinnspiel => index.html
  • /api => /api/ => app.php, Request-Uri: /api/
  • /app_dev.php/api => /app_dev.php/api/ => Request-Uri: /api/ (development mode)

Mit dieser Konfiguration kann nun sämtliche Logik für das Routing und Templating in die SPA verschoben werden. Der Source-Code für die SPA kann dabei in einem Repository mit dem Symfony2 Projekt an einem zentralen Ort verwaltet werden. Ich hoffe das kann für einige von euren Projekten nützlich sein :)

Für neue Blogupdates anmelden:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.