Google App Engine als CDN verwenden

16. November, 2009 · 3 Kommentare

Logo der Google App EngineWer sich mit der Performance von Webseiten beschäftigt hat, hat bestimmt auch schon von den Content Delivery Networks (CDN) gehört. Darunter versteht man spezielle Hosting Anbieter, die darauf spezialisiert sind, statische Inhalte zu hosten. Stark frequentierte Seiten nutzen die CDNs um darauf Bilder, Javascripts, Stylesheets, Downloads etc. zu hosten. Die primären Vorteile der Content Delivery Networks sind:

  • Schnelle Zugriffszeiten, da die Server auf das schnelle Ausliefern der statischen Daten optimiert sind
  • Regionale Datencenter reduzieren die Antwortzeiten
  • Zugriffe auf die eigenen Server werden reduziert und so werden Ressourcen für das Ausliefern der dynamischen Inhalte verfügbar
  • Durch schnellere Ladezeiten der Webseite, können die Rankings in den Suchmaschinen positiv beeinflusst werden

Für kleinere Seiten ist ein CDN nicht umbedingt nötig, da die Server eh nicht ausgelastet sind und es den Betreibern meistens nichts ausmacht, wenn die Seite ein paar Sekunden mehr braucht um zu laden.

In diesem Artikel will ich erklären, wie man Google’s App Engine dazu verwenden kann, sein eigenes, kostenloses CDN aufzubauen.

Allgemeines zur Google’s App Engine

Die App Engine von Google ist ein kostenloser Hosting Service für Phyton und Java Anwendungen. Man lädt die Apps bei Google hoch und danach sind sie direkt über eine Subdomain von appspot.com verfügbar – man benötigt also eigentlich keinen eigenen Server mehr.

Allerdings ist die “gewöhnliche” Website eher in Skriptsprache wie PHP oder Ruby on Rails geschrieben – oder ist gar eine ganz statische HTML Seite. Dennoch können auch diese Seiten von der App Engine profitieren und zwar indem sie ihre statischen Daten dahin auslagern. Statische Dateien sind Bilder, Javascripts und CSS Files – also Dateien, die sich nicht täglich ändern oder dynamisch generiert werden.

In dieser Anleitung werde ich erklären, wie man eine Java Anwendung mit Hilfe von Eclipse erstellt und diese bei der App Engine veröffentlicht.

Vorbereitung

Folgende Dinge werden benötigt:

  • Ein Account bei App Engine
  • Das Programm Eclipse (ich habe die Classic Version verwendet)
  • Die Dateien die man bei der App Engine hosten möchte, müssen auf der lokalen Festplatte abgelegt sein.

Die Screenshots wurden in Mac OS X aufgenommen – allerdings ist Eclipse genauso für Windows erhältlich daher sollten alle Schritte 1:1 übertragbar sein.

1. Schritt – Installation des App Engine Plugins

Um Anwendungen über Eclipse auf der App Engine deployen zu können, wird noch ein Plugin benötigt. Hier die Schritt für Schritt Anleitung zur Installation:

  1. Install New Software im Help Menu auswählen
  2. Die URL zum Plugin in das Feld für Work with: einfügen. Die URL findet man bei Googles Info Seite. Zum Zeitpunkt des Schreibens ist die 3.5 die aktuelle Version – dafür lautet die Plugin URL “http://dl.google.com/eclipse/plugin/3.5”. Nachdem man die URL eingefügt hat, noch Add klicken.
  3. Es erscheint ein Popup in dem man die neue Plugin Ressource betiteln soll. Also schnell als Name “Google App Engine” eintippen und OK drücken.
  4. Als nächstes erscheint die Liste der verfügbaren Plugins – ein Häckchen neben alle Einträge setzen und weiter gehts mit dem Next Button.
  5. Darauf erscheint ein Fenster der zur Zustimmung der Lizenzbestimmung auffordert I accept the terms of the license agreements auswählen und Finish klicken.
  6. Die Installation beginnt – das kann ein bisschen Zeit in Anspruch nehmen. Also Zeit für nen Kaffee :)
  7. Nach der Installation will Eclipse neugestartet werden.

Hier die einzelnen Schritte als Screenshots:
Eclipse: Neues Plugin hinzufügenEclipse: Der Plugin Ressource einen Namen geben
Eclipse: Die zuinstallierenden Plugins auswählenEclipse: Lizenz der Plugins akzeptieren Eclipse: Installation der Plugins abwarten Eclipse: Nach der Installation neustarten

2. Schritt: Neues Projekt in Eclipse erstellen

  1. FileNewWeb Application Project wählen um ein neues Web Projekt in Eclipse zu erstellen
  2. Die Details für das Projekt eingeben. Das Häckchen bei Use Google Web Toolkit kann entfernt werden – bei der Use Google App Engine natürlich das Häckchen aktivieren.
  3. Unter Umständen springt Eclipse im Anschluss nicht automatisch zu der Workbench – dann einfach auf das entsprechende Symbol im Eclipse Dashboard klicken (s. Screenshot).

Eclipse: Neues App Engine Projekt erstellenEclipse: Projekt Details eingebenEclipse: Zum Abschluss zur Workbench wechseln

3. Schritt: Dateien einfügen

Als nächstes fügen wir die statischen Dateien in das Projekt ein.

  1. In dem Ordner war des Projektbaumes (linke Spalte in der Workbench) erstellen wir die Unterordner “images”, “stylesheets”, “javascripts” und “downloads” (natürlich kann man aber auch die Ordner nennen wie man will).
  2. Wir wählen im lokalen Dateisystem die jeweiligen Dateien (+ Unterordner) aus und ziehen sie in den jeweiligen Ordner in Eclipse. In dem Screenshot werden beispielhaft die Bilder in den Ordner “images” gezogen.
  3. Als nächstes öffnet man die Datei appengine-web.xml im Ordner war/WEB-INF (des Eclipse Projektes).
  4. In der XML Datei in dem Feld den Namen der Anwendung eingeben (also den Namen den man bei der App Engine Registrierung verwendet hat).
  5. Dann fügt man noch die Definitionen der statischen Inhalte in die XML Datei ein:
    <!-- Static Files for CDN -->
    <static-files>
    <include path="/images/*" expiration="1d" />
    <include path="/stylesheets/*" expiration="1d" />
    <include path="/javascripts/*" expiration="1d" />
    </static-files>
    

    Das Attribut exparation definiert wie lang die Datei im Client Cache gehalten werden soll – ich habe den Wert “1d” gewählt, also einen Tag. Natürlich kann man dort auch “1w” oder “1y” wählen, wenn man in nächster Zeit nicht vor hat, an den Dateien was zu ändern.

  6. Wer testen mag, ob bis dahin alles richtig war, kann nun mit “Run ” (grünes Play-Symbol in der Menuleiste) den lokalen Testserver starten. Danach kann man im Browser unter der URL “http://localhost:8080/[ORDNER]/[DATEI] testen ob die Datei angezeigt wird. (s. Screenshot)
  7. Klickt man nun auf die blaue Turbine in der Menuleiste (Deploy App Engine Project) erscheint ein Popup bei dem man seinen Google Login eingeben muss (den Account mit dem der App Engine Account verknüpft ist!).
  8. Nach dem Bestätigen mittels Deploy fängt Eclipse an die Dateien zu Google zu übertragen.
  9. Das wars! Unter http://[APP-NAME].appspot.com/ sind nun die Dateien abrufbar.

App Engine: Die gewünschten Ordner erstellen Lokales Dateisystem: Die gewünschten Dateien in den Ordner (in Eclipse) rüberziehen Eclipse: Die Dateien in den jeweiligen Ordner ablegenApp Engine: Die appengine-web.xml anpassen Google App Engine: Im lokalen Browser testen ob bisher alles korrekt war (Port 8080!) Eclipse: Den Upload zur Google App Engine starten Eclipse: So schauts aus, wenn alles richtig gemacht wurden App Engine: Die Dateien sind jetzt unter der jeweiligen Projekt-Appspot-URL zu finden

4. Schritt: Verweise anpassen

Zu guter letzt müssen nun noch die Verweise auf die statischen Dateien in den Javascript, CSS und HTML Dateien angepasst werden. Also überall dort wo bisher auf den lokalen Server verwiesen wurde durch die entsprechende Appspot URL ersetzen. Auch an die relativen Pfade denken!

<img src="/images/hallo.jpg" alt="Hallo!"/>

wird also zu:

<img src="http://[APP-NAME].appspot.com/images/hallo.jpg" alt="Hallo!"/>

Ihren XING-Kontakten zeigen Artikel bei Xing veröffentlichen
Kategorie:Anleitung · Performance · Tipps · Webdev
Tags: · · · · · · ·
  • http://blog.tim-bormann.de/google-cdn-wordpress-geschwindigkeit.html Mit Google CDN WordPress Geschwindigkeit bis ans Limit

    […] CDN ist nur, dass man nicht einfach via FTP Dateien hoch laden kann. Jan zeigt in seinem Artikel Google App Engine als CDN verwenden wie man via Eclipse trotzdem statische Dateien auf das Google CDN laden kann. Wer weitere […]

  • http://www.gruening.me/ Ben

    Hey,

    bekomme leider folgenden Fehler bei Schritt 2.

    http://img8.myimg.de/Unbenannte841b.png

    MfG

  • Johannes Frank

    Vielen Dank. Habe Eclipse 3.6 für Win32 und das entsprechende Google Plugin installiert und die gute Anleitung befolgt. Nach einigen Fehlverbindungen klappte es endlich. Allerdings wurden die vorher hineinkopierten Unterordner /javascript/XYZ/… von Google nun nicht sofort übernommen. Indem ich <include expiration=”1d” path=”/stylesheets/XYZ/*”> zusätzlich in die Datei appengine-web.xml eintrug, wurden nun auch die Unterordner eingelesen. </include>

meet me in the interwebs
Kaffee-Kasse
Flattr ist ein sehr gut gemachter Micropayment Dienst, der es endlich ermöglicht auf faire Weise Geld zu spenden und einzunehmen.