Ultimative Anleitung zum Hosten von Gigapixel-Panoramen
In diesem Artikel geht es nur ums Hosten. Informationen zur Kunst der Panorama- und 360°-Fotografie finden Sie in diesen Artikeln:
Der ultimative Leitfaden für Panoramafotografie,
Nivelliersockel für die Panoramafotografie,
Der ultimative 360-Fotografie-Leitfaden
Beste Software für 360°-Fotografie
Einrichten eines Webservers auf Amazon S3 und Verwenden von Cloudfront zum Zwischenspeichern von Inhalten
Das Hosten von Gigapixel-Panoramen ist für Fotografen schon seit jeher ein Problem. Sie können eine Online-Plattform wie 360Städte oder Kuula um virtuelle Touren zu hosten, aber Sie sind vollständig auf die Plattform angewiesen, um im Geschäft zu bleiben, und die meisten werden Ihre Panoramen nicht hosten. Das WordPress-Plugin Panopress wurde seit 6 Jahren nicht mehr aktualisiert, aber Sie könnten Zoomify um selbst gehostete Panoramen zu ermöglichen. Aber es unterstützt keine 350°-Bilder. Nicht die zufriedenstellendste Situation!
Ich habe verschiedene Online-Hosts ausprobiert, bevor mich die Einschränkungen frustrierten. Schließlich habe ich beschlossen, es selbst zu tun und den gesamten Prozess zu dokumentieren, um es für Laien einfacher zu machen.
Ich habe mich entschieden, Amazon S3 um die Bilder zu hosten und Wolkenfront um sie zwischenzuspeichern.
Das Einrichten einer Website mit Amazon S3 und CloudFront ist nicht jedermanns Sache. Ich bin dazu gekommen, weil ich sehr große Medien in Form von Panoramafotos hosten musste, die in Tausende von „Kacheln“ aufgeteilt sind, um sie schnell übertragen und rendern zu können. Ich verwende S3 nicht zum Hosten meiner Website, sondern nur zum Hosten von Bildern, aber es ist durchaus möglich, eine Website zu hosten und CloudFront als CDN-Lösung zu verwenden, um Inhalte schnell an Remote-Clients zu liefern.
Wenn Sie Cloudfront als Proxy verwenden, wird Ihr Inhalt vom CloudFront-Server bereitgestellt, der dem Standort der Anfrage am nächsten ist. Aber zuerst müssen Sie Ihre Site in Amazon S3 einrichten. In diesem Tutorial wird erklärt, wie Sie Amazon S3 zum Hosten einer Website einrichten, wie Sie CloudFront als Proxy zur Inhaltsverteilung für die Website einrichten und wie Sie ein SSL-Zertifikat für diesen Inhalt konfigurieren.
Was Sie lernen werden:
Gründe für die Verwendung von Amazon S3 und CloudFront
Benutzerfreundlichkeit
Es tut mir leid, aber das war ironisch gemeint. WordPress-Hosting ist auf fast jeder anderen Plattform viel einfacher!
Kosten
Die meisten Webhosting-Unternehmen berechnen eine reguläre Gebühr auf Grundlage des Speicherplatzes oder der Inodes (Anzahl der bereitgestellten Objekte). Amazon berechnet Gebühren auf Grundlage der übertragenen Daten und ist daher für bestimmte Inhaltstypen günstiger als die meisten Webhosting-Unternehmen, insbesondere für Panoramen, bei denen das Volumen hoch ist und die Anzahl der bereitgestellten Objekte für ein einzelnes Panorama im Tausenderbereich liegt.
Was passiert im Klartext
Vereinfacht ausgedrückt besteht eine Website aus einer Reihe von Seiten, die oft miteinander verknüpft sind und Text und Bilder enthalten.
Die einfachste mögliche Website im Code sieht folgendermaßen aus:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<p>Willkommen auf meiner fantastischen neuen Website!</p>
</body>
</html>Dies ist das reine HTML, das entweder von Hand erstellt oder von einem Content-Management-System wie WordPress generiert, von einem Webserver bereitgestellt und vom Browser in etwas für das menschliche Auge Anschaulicheres umgewandelt wird.
Alle Websites funktionieren so. Der Server stellt HTML-formatierten Code bereit, der Browser interpretiert diesen Code und stellt ihn als visuelle Seite dar. Panoramen funktionieren genauso, das Originalbild wird in Kacheln aufgeteilt und in ein HTML5-Framework „eingepackt“, das im Grunde eine Website ist.
Wenn Sie Code auf Amazon S3 installieren, stellt Amazon den Webserver bereit und stellt diesen Inhalt als Antwort auf eine Anfrage eines Browsers bereit. Der Domänenname (für Menschen lesbare Domäne wie mygreatcompany.com) wird in Ihrem DNS-Eintrag in einen Verweis auf Ihren Speicherplatz auf dem Amazon-Server übersetzt.
Wenn Sie eine komplexe Website mit viel Inhalt haben, der von Menschen auf der ganzen Welt gelesen wird, ist es sinnvoll, ein Content Distribution Network (CDN) als Proxy zu verwenden, um diesen Inhalt von einem Knoten in der Nähe des Ursprungs der Anfrage bereitzustellen. Wenn ich beispielsweise ein Publikum in San Francisco habe und in Spanien ansässig bin, dauert es länger, bis meine Webseiten von Europa nach San Francisco gelangen, als von einem Server in den USA.
Wir werden Amazon Cloudfront als Proxy verwenden, um unsere Inhalte bereitzustellen, ohne dass die Anfrage den ganzen Weg zu unserer S3-Installation geht. Cloudfront aktualisiert seinen Cache regelmäßig von der S3-Installation, um die Inhalte auf dem neuesten Stand zu halten.
Amazon S3
Terminologie
Eimer – Dies ist Ihr Webspace. Sie können mehrere Buckets für verschiedene Zwecke erstellen, aber für die Erstellung einer einfachen Website oder die Bereitstellung eines Panoramas benötigen wir nur einen.
Objekt – in der Amazon-Welt ist alles ein Objekt, einschließlich Ihres Buckets.
Endpunkt – URL
Das S3 Dashboard
Die erste Aufgabe besteht darin, ein Konto bei Amazon zu erstellen. Verwenden Sie nicht Ihre Einkaufs-ID, sondern erstellen Sie eine neue, speziell für die Nutzung der technischen Dienste von Amazon.
Öffnen Sie die Amazon S3-Website in Ihrem Browser.
Klicken Sie auf die Schaltfläche „Erste Schritte“.
Erstellen Sie ein neues Konto. Sie müssen mehrere Schritte zur Identitätsbestätigung durchlaufen. Halten Sie daher Ihr Mobiltelefon und einen E-Mail-Client bereit.
Nachdem Sie Ihr Konto erstellt haben, melden Sie sich bei der Konsole an. Wählen Sie unbedingt den Root-Benutzer aus.
Dies ist die Webkonsole. Klicken Sie im Abschnitt „Zuletzt besucht“ auf S3.
Klicken Sie auf Bucket erstellen
Erstellen eines Buckets für Inhalte
Diese Seite enthält mehrere wichtige Einstellungen, die Sie sorgfältig ausfüllen müssen.
- Allgemeine Konfiguration
- Öffentlichen Zugriff blockieren
- Bucket-Versionierung
- Standardverschlüsselung
- Erweiterte Einstellungen
sind diejenigen, vor denen man auf der Hut sein muss.
Bucket-Name – verwenden Sie etwas Einfaches und Wiedererkennbares. Betrachten Sie es als einen Verzeichnisnamen. Wählen Sie eine AWS-Region, die zu Ihrem Standort passt.
Scrollen Sie auf der Seite nach unten, lassen Sie ACLs deaktiviert in Objektbesitz, Deaktivieren Öffentlichen Zugriff blockieren und aktivieren Sie die Warnung „Deaktivierung und Blockierung des gesamten öffentlichen Zugriffs“ – Sie möchten, dass die Leute die Website sehen. Bucket-Versionierung bleibt für unsere Zwecke deaktiviert, ebenso Standardverschlüsselung.
Überprüfen Sie in den erweiterten Einstellungen, ob die Objektsperre deaktiviert ist.
Klicken Sie nun auf Bucket erstellen
Sie werden zu einem Bildschirm ähnlich dem oben gezeigten weitergeleitet.
Jetzt haben Sie Ihren Bucket, wir können Berechtigungen festlegen und ihn mit Inhalt füllen.
Festlegen von Berechtigungen für das Webhosting
Sie werden auf dem Bild oben bemerken, dass unter der Zugriffsspalte „Objekte können öffentlich sein“ steht. Die Standardeinstellung ist, dass sie nicht öffentlich sind, also müssen wir das ändern.
Klicken Sie auf den Namen Ihres Buckets. Und wählen Sie „PEigenschaften“ im nächsten Bildschirm.
Scrollen Sie auf dieser Seite nach unten und Sie werden sehen Statisches Website-Hosting – klicken Sie auf Bearbeiten.
Sie werden diesen Dialog sehen
Aktivieren Statisches Website-Hosting und stellen Sie sicher, dass der Hosting-Typ auf Hosten einer statischen Website. Setzen Sie das Indexdokument auf Hauptseite Speichern Sie dann Ihre Änderungen. Sie werden zur Seite „Bucket-Eigenschaften“ zurückgeleitet. Wenn Sie nach unten scrollen, sehen Sie, dass das Hosting statischer Websites aktiviert ist und Ihnen ein Endpunkt
Die Bucket-Website-Endpunkt ist die URL, die Ihren Bucket im Amazon-Universum identifiziert.
Als nächstes müssen Sie Ihre Zugriffsrichtlinie explizit festlegen. Klicken Sie auf Berechtigungen das Hauptmenü.
Wir werden im Fenster „Bucket-Richtlinie“ eine Richtlinie bereitstellen.
Drücken Sie „Bearbeiten“ gegenüber dem Bucket-Richtlinie. Wir müssen eine Richtlinie bereitstellen, die es jedem Mitglied der Öffentlichkeit ermöglicht, jedes Objekt (Seite oder Bild) zu laden, das im Bucket enthalten ist. Dies ist der Code, den Sie benötigen. Ändern Sie das Datum nicht, das zeigt Amazon eine Version an. Die letzte Zeile muss geändert werden – sie muss mit Ihrer eigenen Bucket-ARN übereinstimmen.
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Erlauben", "Principal": "*", "Action": [ "s3:GetObject" ], "Ressource": [ "arn:aws:s3:::helterskeltertraining/*" ] } ] }Die Bucket-ARN wird im Bearbeitungsbildschirm direkt über dem Fenster angezeigt.
Speichern Sie Ihre Änderungen. Wenn Sie einen Fehler erhalten, liegt es höchstwahrscheinlich am ARN-Namen – diese Zeile muss genau mit Ihrer eigenen ARN übereinstimmen.
Hochladen Ihrer Website
Jetzt können Sie Ihre Inhalte in den Bucket hochladen!
Gehen Sie mithilfe der Brotkrümel oben auf dem Bildschirm zurück zu Ihrem Eimer.
Klicken Sie auf das Hochladen Taste.
Sie können hier Dateien oder Ordner hinzufügen. Ich verwende den Drag & Drop-Bereich, da ich in diesem Beispiel nur eine Datei habe. Beachten Sie, dass der Dateiname zwar in der Liste angezeigt wird, aber erst hochgeladen wird, wenn Sie auf die Schaltfläche „Hochladen“ klicken!
Jetzt sollten Sie über eine Website oder ein Panorama verfügen, das von AWS bereitgestellt werden kann.
Testen
Um es zu testen, gehen Sie zurück zum Eigenschaftenbildschirm, scrollen Sie nach unten zu „Statisches Website-Hosting“ und klicken Sie auf die URL – wenn alle Einstellungen korrekt sind, sollte sie in Ihrem Browser angezeigt werden.
Aktualisieren Ihres DNS-Eintrags
Wenn Sie bereits eine Domäne besitzen, möchten Sie die URL im Amazon-Format wahrscheinlich nicht verwenden. Um Ihre eigene Domäne zu verwenden, müssen Sie eine DNS-Einstellung ändern.
Es gibt zwei Arten von Einstellungen, die Endpunkte in Ihrem DNS angeben. Dies sind A-Einträge und CNAME-Einträge. Der A-Eintrag verweist auf eine IP-Adresse. Der CNAME-Eintrag wird verwendet, um Aliase für den A-Eintrag bereitzustellen und kann auf einen anderen Server verweisen. Bekannte Beispiele sind mail.ihredomain.com und ftp.IhreDomain.com.
Wir müssen eine Subdomäne mit dem gleichen Namen wie Ihr Bucket einrichten und dann die von Amazon generierte URL als Ziel angeben.
Erstellen Sie also einen neuen CNAME-Eintrag. Bei manchen Hosts ist die Vorgehensweise unterschiedlich. Wenn Sie den Namen Ihres Buckets als Namen, CNAME als Typ und Ihre Amazon-URL als Eintragswert eingeben, gibt das System den Rest Ihrer Domain im Feld Name aus. Dieser Eintrag sollte Anfragen an die Subdomain an Amazon umleiten. DNS-Änderungen können einige Zeit in Anspruch nehmen, meiner Erfahrung nach zwischen einem Augenblick und einem Tag, bis sie durchgesickert sind, daher funktioniert dies möglicherweise nicht sofort. Testen Sie mit Ihrer neuen URL – z. B. http://bucketname.yourdomain.com
Wenn es sich um die gesamte Website handelt, die Sie auf Amazon hosten, müssen Sie eine Weiterleitung durchführen.
Wolkenfront
Cloudfront ist das Content-Distribution-Netzwerk von Amazon. Wenn Ihre Site viele Inhalte enthält, die für ein globales Publikum von Interesse sind, kann es sinnvoll sein, das CDN zu verwenden, um Inhalte an verschiedenen Standorten näher an Ihrem Publikum zwischenzuspeichern.
Gehen Sie zum Dienstleistungen oben links auf Ihrem Amazon-Bildschirm und wählen Sie Cloudfront aus der Dropdown-Liste. Wenn es nicht da ist, geben Sie einfach ein Wolkenfront in das Suchfeld ein.
Zusammenfassung in einfachem Englisch
An diesem Punkt haben Sie Ihre Website in Amazon S3 erstellt. Wenn Ihr Publikum geografisch weit vom Hosting Ihrer Website entfernt ist (Sie haben die Host-Geografie zu Beginn des S3-Prozesses ausgewählt), kann die Verwendung eines CDN für Sie von Vorteil sein.
Vorbehalt – Wenn Ihr Datenverkehr gering ist, kann ein CDN tatsächlich zu Verzögerungen führen, da der im Cache gespeicherte Inhalt zwischen den Benutzeranforderungen abläuft. In diesem Fall muss das CDN zu S3 zurückkehren, um Inhalte abzurufen. Sie haben also lediglich eine zweite Iteration in den Anforderungs-/Bereitstellungsprozess eingefügt.
Terminologie
Verteilung – Eine Verteilung stellt Ihren Teil des CDN-Cache dar. Sie wird Ihrem Amazon S3-Bucket zugeordnet.
Erstellen einer Verteilung
Klicken Sie in CloudFront auf das Erstellen einer CloudFront-Verteilung Taste.
Sie werden zu einem sehr langen Formular weitergeleitet, das wir Abschnitt für Abschnitt durchgehen.
Die Ursprungsdomäne kann aus der Dropdown-Liste in diesem Feld ausgewählt werden. Bewegen Sie einfach den Cursor auf das leere Feld und klicken Sie. Dadurch werden die von Ihnen erstellten Buckets angezeigt.
Die Ursprungspfad muss nur ausgefüllt werden, wenn sich Ihr Inhalt in einem Unterverzeichnis des Buckets befindet. Wenn Ihr Bucket beispielsweise eine einzelne Datei namens index.html enthält, lassen Sie dieses Feld leer. Wenn es ein Verzeichnis auf der obersten Ebene enthält, das Ihre index.html enthält, geben Sie hier den Namen des Verzeichnisses ein.
Ignorieren Benutzerdefinierte Kopfzeile hinzufügen und verlassen Origin Shield aktivieren deaktiviert.
Der nächste Abschnitt ist Standard-Cache-Verhalten.
Viewer-Protokollrichtlinie sollte eingestellt werden auf Leiten Sie Http zu Https um.
Erlaubte HTTP-Methoden sollte GET, HEAD sein
Zuschauerzugriff einschränken sollte auf „Ja“ gesetzt werden, wenn Sie sicher sind, dass alle Viewer über CloudFront kommen müssen.
Scrollen Sie nach unten zu Einstellungen
Wählen Sie Ihre Preisklasse – das sollte intuitiv sein, das Erste ist das teuerste.
Klicken Sie auf Zertifikat anfordern um ein neues SSL-Zertifikat zu erhalten.
Alternative Domänennamen sollten alle Varianten enthalten, die Sie möglicherweise sichern müssen. Zum Beispiel bucketname.ihredomain.com, *.bucketname.ihredomain.com würde jedes Unterverzeichnis sichern, das unter bucketname.ihredomain.com
Standard-Stammobjekt
Eingeben Hauptseite als Name des Stammobjekts (damit Benutzer es nicht in die URL aufnehmen müssen).
Einrichten eines SSL-Zertifikats
Die Anforderung eines SSL-Zertifikats ist unkompliziert. Zur Verdeutlichung: Dieses Zertifikat verschlüsselt den Datenverkehr zwischen dem Browser und Cloudfront.
Wählen Sie das öffentliche Zertifikat und im nächsten Bildschirm die DNS-Validierung.
Das System gibt Ihnen dann die Daten, die Sie zum Erstellen eines neuen CNAME-Eintrags benötigen. Dieser dient lediglich der Bestätigung Ihres Domänenbesitzes und sieht sehr undurchsichtig aus. Kopieren Sie ihn und fügen Sie ihn wie angezeigt in Ihre DNS-Einstellungen ein.
Sobald DNS verbreitet wurde, validiert das System Ihr SSL-Zertifikat. Bei mir dauerte es etwa 5 Sekunden, aber je nachdem, wo Ihr DNS eingestellt ist, kann es bis zu ein paar Tage dauern.
Sobald das Zertifikat ausgestellt wurde, kann die Distribution veröffentlicht werden. CloudFront stellt Ihnen eine neue URL mit der Endung cloudfront.net Dies muss den S3-Wert in Ihrem vorhandenen DNS ersetzen.
Aktualisieren Sie Ihren DNS-Eintrag (erneut)
Gehen Sie zum CNAME-Eintrag, den Sie im S3-Setup erstellt haben, und ersetzen Sie den S3-Wert für Ihre Subdomäne durch den Wert cloudfront.net. Dies hat zur Folge, dass alle Anfragen für bucketname.ihredomain.com zu Cloudfront statt zu S3. Sie haben CloudFront bereits Ihre Bucket-Details mitgeteilt, sodass es den Cache auffüllt und Ihren Inhalt von dort statt von S3 bereitstellt.
Das Einrichten einer Website mit Amazon S3 und CloudFront ist eigentlich ganz einfach, wenn man die Terminologie kennt. Wir haben hier ein triviales Beispiel verwendet, aber die Schritte zum Bereitstellen einer komplexeren Website oder eines Panoramas mit einem HTML 5-Wrapper sind identisch.
Was ist, wenn Sie bereits ein CDN verwenden?
Wenn Sie bereits ein CDN verwenden, aber Amazon S3 zum Hosten großer Medien nutzen möchten, können Sie den CNAME-Eintrag in Ihren CDN-DNS-Einstellungen erstellen. Denken Sie daran, dass Sie beim Einrichten eines CDN mit einem herkömmlichen Webhost normalerweise die Nameserver mit denen des CDN austauschen und das Ändern der DNS-Einträge auf Hosting-Ebene daher nicht funktioniert. Führen Sie stattdessen denselben Vorgang auf CDN-Ebene durch.
Hier ist ein Link zu ein Panorama Ich habe mich auf eine Serie vorbereitet, in der ich das Lecrin-Tal südlich von Granada aufzeichne. Ich habe S3 und CloudFront genau so verwendet, wie ich es hier beschrieben habe. Die Website wird getrennt von den Panoramen gehostet und ich verwende Quic.cloud als CDN für die Website und CloudFront, um die Panoramen bereitzustellen. Alle DNS-Änderungen wurden daher in Quic.cloud vorgenommen. Die Originaldatei für ein einzelnes Panorama ist etwa 850 MB groß. Mit herkömmlichen HTTP-Servern ist dies fast unmöglich bereitzustellen.
Schlussfolgerung
Das Einrichten einer Website mit Amazon S3 und CloudFront ist sicherlich eine Aufgabe für technisch versierte Personen. Für kleine, leicht zu wartende Websites ist es nicht im Entferntesten geeignet. Für den Anwendungsfall der Bereitstellung großer Medien wie Gigapixel-Panoramen funktioniert es jedoch sehr gut.
Abonnieren...
Ich halte Sie mit regelmäßigen monatlichen Updates über Workshops, Kurse, Leitfäden und Rezensionen auf dem Laufenden.
Melden Sie sich hier an und erhalten Sie Sonderpreise für alle Kurse und Fotowalks im Jahr 2026
3 Kommentare