Swift - Serving Static Websites
Einführung
Mit Hilfe der Swift-CLI ist es möglich, die Daten in Containern als statische Website auszuliefern. Die folgende Anleitung beschreibt die wichtigsten Schritte, um damit zu beginnen, und enthält auch ein Beispiel.
Erste Schritte
Erstellen eines Containers
Zunächst erstellen wir einen Container mit dem Namen example-webpage, den wir als Basis für diese Anleitung verwenden werden:
swift post example-webpage
Den Container öffentlich lesbar machen
Als nächstes müssen wir sicherstellen, dass der Container öffentlich lesbar ist. Weitere Informationen zum Sichern von Containern und zum Festlegen von Bucket-Richtlinien finden Sie hier:
swift post -r '.r:*' example-webpage
Indexdatei der Seite setzen
Setzen Sie die Indexdatei. In diesem Fall wird index.html die Standarddatei sein, die angezeigt wird, wenn die Seite erscheint:
swift post -m 'web-index:index.html' example-webpage
Dateiliste aktivieren
Optional können wir auch die Dateiliste aktivieren. Wenn Sie mehrere Downloads bereitstellen müssen, ist es sinnvoll, die Verzeichnisliste zu aktivieren:
swift post -m 'web-listings: true' example-webpage
CSS für Dateilisten aktivieren
Aktivieren Sie ein benutzerdefiniertes Listing-Stylesheet:
swift post -m 'web-listings-css:style.css' example-webpage
Fehlerseiten einrichten
Schließlich sollten wir eine benutzerdefinierte Fehlerseite einbinden:
swift post -m 'web-error:404error.html' example-webpage
Beispiel-Webseite
Lassen Sie uns die Schritte rekapitulieren, die wir bis jetzt unternommen haben, um statische Webseiten zu aktivieren:
swift post example-webpage
swift post -r '.r:*' example-webpage
swift post -m 'web-index:index.html' example-webpage
swift post -m 'web-listings: true' example-webpage
swift post -m 'web-listings-css:style.css' example-webpage
swift post -m 'web-error:404error.html' example-webpage
Wenn die obigen Schritte abgeschlossen sind, können wir damit beginnen, unsere statische Webseite anzupassen. Das Folgende demonstriert eine schnelle Einrichtung unter Verwendung unseres Containers example-webpage
Anpassen der Seiten index.html, page.html und 404error.html
Dies wird als Startseite dienen, die einen Link zu einer sekundären Seite erstellt.
<!-- index.html -->
<html>
<h1>
See the web page <a href="mywebsite/page.html">here</a>.
</h1>
</html>
Die nächste Seite (page.html) zeigt ein Bild namens sample.png an:
<!-- page.html -->
<html>
<img src="sample.png">
</html>
Wir können auch benutzerdefinierte Fehlerseiten hinzufügen. Beachten Sie, dass derzeit nur die Fehler 401 (Nicht autorisiert) und 404 (Nicht gefunden) unterstützt werden. Das folgende Beispiel demonstriert die Erstellung einer 404-Fehlerseite:
<!-- 404error.html -->
<html>
<h1>
404 Not Found - We cannot find the page you are looking for!
</h1>
</html>
Hochladen der Dateien index.html und page.html
Nachdem die Inhalte der Dateien erstellt wurden, laden Sie die Dateien mit den folgenden Befehlen hoch:
swift upload beispiel-webseite index.html
swift upload beispiel-webseite meinewebseite/seite.html
swift upload beispiel-webseite-meine-website/beispiel.png
swift upload beispiel-webseite 404error.html
Betrachten der Website
Wenn alle oben genannten Schritte abgeschlossen sind, können wir nun unsere neu erstellte Website betrachten. Den Link zur Website finden Sie im Optimist Dashboard > Object Store > Containers über den abgebildeten Link.
Wenn Sie auf den Link klicken, wird unsere neu erstellte Website angezeigt:
Klicken Sie auf “here”, um zu der Seite zu navigieren, auf der wir unser Beispielbild hochgeladen haben:
Für den Fall, dass wir versuchen, zu einer Seite zu navigieren, die nicht existiert, wird unsere benutzerdefinierte 404-Seite angezeigt:
