So hosten Sie eine statische Website mit Yandex.Cloud Object Storage

Hallo, Habr!

In diesem Artikel zeige ich Ihnen, wie Sie ganz einfach eine statische Website mit den Technologien von Yandex bereitstellen können, nämlich Object Storage.

Am Ende haben Sie eine im Internet veröffentlichte Website, die über einen externen Link zugänglich ist.

Dieser Artikel wird nützlich sein, wenn Sie

• Ein Anfänger-Entwickler sind, der gerade das Programmieren lernt;
• Ein Entwickler sind, der ein Portfolio erstellt hat und es öffentlich zugänglich machen möchte, um es Freunden und Arbeitgebern zu zeigen.

Über mich

Kürzlich habe ich einen SaaS-Dienst entwickelt, ähnlich einem Marktplatz, auf dem Menschen persönliche Trainer für Fitness-Training finden können. Ich habe den Stack von Amazon Web Services (AWS) verwendet. Aber je tiefer ich in das Projekt eintauchte, desto mehr Nuancen erfuhr ich über verschiedene Prozesse der Startup-Organisation.

Ich bin auf folgende Probleme gestoßen:

• AWS hat viel Geld gekostet. Nach drei Jahren in Unternehmensunternehmen bin ich an Freuden wie Docker, Kubernetes, CI/CD, Blue-Green-Deployment gewöhnt, und als aufstrebender Programmierer-Startup-Gründer wollte ich das Gleiche umsetzen. Letztendlich kam ich zu dem Punkt, dass AWS monatlich 300-400 Dollar verbrauchte. Am teuersten war Kubernetes, das etwa 100 Dollar kostete, bei einem Mindestmaß mit einem Cluster und einem Knoten.
  P.S. Am Anfang ist das nicht notwendig.
• Dann, als ich über die rechtlichen Aspekte nachdachte, erfuhr ich von dem Gesetz 152-FZ, das etwa Folgendes besagte: "Personenbezogene Daten von Bürgern der Russischen Föderation müssen auf dem Gebiet der Russischen Föderation gespeichert werden", andernfalls drohen Strafen, was ich vermeiden wollte. Ich beschloss, mich mit diesen Fragen zu befassen, bevor mich "von oben" etwas trifft :).

Inspiriert Artikel. von der Migration der Infrastruktur von Amazon Web Services zu Yandex.Cloud, beschloss ich, den Yandex-Stack näher zu studieren.

Für mich waren die wichtigsten Merkmale von Yandex.Cloud folgende:

• 2-3 Mal günstiger (laut dem oben genannten Artikel und den öffentlichen Preisen)
• Speicherung personenbezogener Daten der Nutzer auf dem Gebiet der Russischen Föderation, was der große Amazon bisher nicht umsetzen kann.

Ich habe auch andere Konkurrenten dieses Dienstes studiert, aber zu diesem Zeitpunkt war Yandex im Vorteil.

Nachdem ich etwas über mich erzählt habe, können wir zur Sache kommen.

Schritt 0. Bereiten wir die Website vor

Zunächst benötigen wir eine Website, die wir im Internet veröffentlichen möchten. Da ich Angular-Entwickler bin, werde ich eine einfache Vorlage für eine SPA-Anwendung erstellen, die ich später im Internet veröffentlichen werde.

P.S. Wer sich mit Angular auskennt oder seine Dokumentation kennt https://angular.io/guide/setup-local, geht zu Schritt 1.

Wir installieren Angular-CLI, um SPA-Websites mit Angular zu erstellen:

npm install -g @angular/cli

Wir erstellen eine Angular-Anwendung mit dem folgenden Befehl:

ng new angular-habr-object-storage

Als nächstes wechseln wir in den Anwendungsordner und starten ihn, um die Funktionsfähigkeit zu prüfen:

cd angular-habr-object-storage
ng serve --open

Die Anwendung ist erstellt, jedoch noch nicht bereit für das Hosting. Wir erstellen eine kleine Build-Version (Production), um alles Überflüssige zu entfernen und nur die notwendigen Dateien zu belassen.
In Angular kann dies mit dem folgenden Befehl gemacht werden:

ng build --prod

Infolge dieses Befehls wurde ein Ordner im Stammverzeichnis der Anwendung erstellt dist mit unserer Website.

Es funktioniert. Jetzt wechseln wir zum Hosting.

Schritt 1.

Gehe auf die Website https://console.cloud.yandex.ru/ und klicken auf die Schaltfläche "Verbinden".

Hinweis:

• Für die Nutzung des Yandex-Dienstes könnte eine Yandex-Mail erforderlich sein (aber das ist nicht sicher).
• Für einige Funktionen müssen wir Geld auf das Konto im persönlichen Bereich einzahlen (mindestens 500 Rubel).

Nach erfolgreicher Registrierung und Authentifizierung befinden wir uns im persönlichen Bereich.

Als nächstes müssen wir im Menü links den Dienst "Object Storage" finden, den wir gerade für das Hosting der Website verwenden werden.

Kurz zu den Begriffen:

• Object Storage — ist ein Dateispeicher, der mit der ähnlichen Technologie von Amazon AWS S3 kompatibel ist und auch eine eigene API zur Verwaltung des Speichers aus dem Code bietet. Wie AWS S3 kann er ebenfalls für die Bereitstellung einer statischen Website verwendet werden.
• In Object Storage erstellen wir "Buckets" (Bucket / Korb), die separate Speicherorte für unsere Dateien darstellen.

Lassen Sie uns einen davon erstellen. Dazu klicken wir in der Service-Konsole auf die Schaltfläche "Bucket erstellen".

Im Formular zur Erstellung des Buckets gibt es folgende Felder, die wir kurz durchgehen werden:

• Bucket-Name. Zur Vereinfachung nennen wir es genauso wie das Angular-Projekt — angular-habr-object-storage
• Max. Größe. Wir setzen den Betrag ein, der dem Gewicht unserer Website entspricht, da die Website nicht kostenlos gespeichert wird und wir für jedes zugewiesene Gigabyte einen kleinen Betrag an Yandex zahlen werden.
• Zugriff auf die Lesbarkeit von Objekten. Wir setzen "Öffentlich", da der Benutzer jede Datei unserer statischen Website erhalten muss, damit das Layout korrekt gerendert wird, Skripte funktionieren usw.
• Zugriff auf die Objektliste und Lesezugriff auf die Einstellungen. Wir belassen es bei "Eingeschränkt". Dies ist notwendig, um den Bucket als internen Speicher für Dateien für Anwendungen zu verwenden.
• Speicherkategorie. Wir belassen es bei „Standard“. Das bedeutet, dass unsere Website häufig besucht wird und somit auch häufig Dateien heruntergeladen werden, die zur Webseite gehören. Darüber hinaus hat dieser Punkt Auswirkungen auf die Leistung und die Kosten (Link einfügen).

Wir klicken auf "Bucket erstellen" und der Bucket ist erstellt.

Jetzt müssen wir unsere Website in den Bucket hochladen. Der einfachste Weg ist, einen Ordner zu öffnen, dist der unsere Website enthält, und die Dateien einfach per Drag & Drop auf die Seite zu ziehen. Das ist bequemer als auf die Schaltfläche "Objekte hochladen" zu klicken, da in diesem Fall Ordner nicht übertragen werden und wir diese manuell in der richtigen Reihenfolge erstellen müssten.

So, die Website ist in den Speicher hochgeladen. Damit können wir den Benutzern die Möglichkeit geben, auf den Speicher wie auf eine Website zuzugreifen.
Dafür klicken wir im Menü links auf die Registerkarte "Website".

Auf der Einstellungsseite des Buckets als Website wählen wir den Tab "Hosting". Hier geben wir die Hauptseite der Website an, normalerweise index.html. Wenn Sie eine SPA-Anwendung haben, werden wahrscheinlich alle Fehler ebenfalls auf der Hauptseite verarbeitet, daher geben wir auch bei der Fehlerseite index.html an.

Wir sehen sofort, über welchen Link unsere Website verfügbar sein wird. Wir klicken auf Speichern.

In etwa 5 Minuten sehen wir durch den Link, dass unsere Webseite nun für alle Interessierten zugänglich ist.

Danke an alle, die bis zum Ende gelesen haben! Dies ist mein erster Artikel, und ich plane, weitere Dienste von Yandex sowie deren Integration mit Frontend- und Backend-Technologien zu beschreiben.

Schreibt in die Kommentare, wie interessiert ihr an weiteren Yandex-Diensten oder der Verwendung von Angular in der modernen Entwicklung seid.

Quelle: habr.com