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

Hey Habr!

In diesem Artikel erkläre ich Ihnen, wie Sie mithilfe von Yandex-Technologien einfach und unkompliziert eine statische Website hosten können Objektspeicher.

Am Ende verfügen Sie über eine im Internet gehostete Website, die über einen externen Link zugänglich ist.

Dieser Artikel wird nützlich sein, wenn Sie

• Ein Anfängerentwickler, der gerade das Programmieren lernt;
• Ein Entwickler, 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, eine Art Marktplatz, auf dem Menschen Sporttrainer für ihr persönliches Training finden. Verwendet den Amazon Web Services Stack (im Folgenden als AWS bezeichnet). Aber je tiefer ich in das Projekt eintauchte, desto mehr Nuancen lernte ich über die verschiedenen Prozesse der Organisation eines Startups.

Ich bin auf folgende Probleme gestoßen:

• AWS hat viel Geld verschlungen. Nachdem ich drei Jahre lang in Unternehmensunternehmen gearbeitet habe, habe ich mich an Freuden wie Docker, Kubernetes, CI/CD und Blue Green Deployment gewöhnt und wollte als angehender Startup-Programmierer dasselbe implementieren. Als Ergebnis kam ich zu dem Schluss, dass AWS monatlich 3–300 Dollar verbrauchte. Kubernetes erwies sich als das teuerste, etwa 400 Dollar, mit einem Mindestlohn von einem Cluster und einem Knoten.
  PS: Dies ist zu Beginn nicht erforderlich.
• Als ich dann über die rechtliche Seite nachdachte, erfuhr ich vom Gesetz 152-FZ, das etwa Folgendes besagte: „Personenbezogene Daten von Bürgern der Russischen Föderation müssen auf dem Territorium der Russischen Föderation gespeichert werden.“, sonst Bußgelder, was ich nicht wollte. Ich habe beschlossen, diese Probleme anzugehen, bevor sie von oben auf mich zukommen :).

Inspiriert Artikel Als ich mich mit der Migration der Infrastruktur von Amazon Web Services zu Yandex.Cloud befasste, beschloss ich, den Yandex-Stack genauer zu studieren.

Für mich waren die wichtigsten Funktionen von Yandex.Cloud die folgenden:

• 2-3 mal günstiger (laut obigem Artikel und öffentlichen Preislisten)
• Speicherung personenbezogener Daten der Nutzer auf dem Territorium der Russischen Föderation, was der große Amazon noch nicht erreichen kann.

Ich habe andere Konkurrenten dieses Dienstes studiert, aber zu dieser Zeit war Yandex der Gewinner.

Ich habe Ihnen von mir erzählt, damit wir zur Sache kommen können.

Schritt 0. Bereiten Sie die Site vor

Zunächst benötigen wir eine Website, die wir im Internet platzieren möchten. Da ich ein Angular-Entwickler bin, werde ich eine einfache SPA-Anwendungsvorlage erstellen, die ich dann im Internet veröffentlichen werde.

PS: Wer versteht Angular oder kennt sich mit dessen Dokumentation aus? https://angular.io/guide/setup-local, gehe zu Schritt 1.

Lassen Sie uns Angular-CLI installieren, um SPA-Sites in Angular zu erstellen:

npm install -g @angular/cli

Erstellen wir eine Angular-Anwendung mit dem folgenden Befehl:

ng new angular-habr-object-storage

Gehen Sie als Nächstes zum Anwendungsordner und starten Sie ihn, um seine Funktionalität zu überprüfen:

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

Die Anwendung wurde erstellt, ist jedoch noch nicht zum Hosten bereit. Lassen Sie uns die Anwendung in einem kleinen Build (Produktion) zusammenstellen, um alle unnötigen Dinge zu entfernen und nur die notwendigen Dateien übrig zu lassen.
In Angular können Sie dies mit dem folgenden Befehl tun:

ng build --prod

Als Ergebnis dieses Befehls erschien ein Ordner im Stammverzeichnis der Anwendung dist mit unserer Website.

Funktioniert. Kommen wir nun zum Hosting.

Schritt 1.

Gehen wir zur Website https://console.cloud.yandex.ru/ und klicken Sie auf die Schaltfläche „Verbinden“.

Hinweis:

• Um den Yandex-Dienst nutzen zu können, benötigen Sie möglicherweise Yandex-Mail (dies ist jedoch nicht sicher).
• Für einige Funktionen müssen Sie Geld auf Ihr persönliches Konto einzahlen (mindestens 500 Rubel).

Nach erfolgreicher Registrierung und Autorisierung befinden wir uns in Ihrem persönlichen Konto.

Als nächstes müssen Sie links im Menü den Dienst „Object Storage“ finden, den wir zum Hosten der Site verwenden werden.

Kurz gesagt:

• Object Storage ist ein Dateispeicher, der mit der ähnlichen AWS S3-Technologie von Amazon kompatibel ist, die auch über eine eigene API zur Speicherverwaltung aus Code verfügt und wie AWS S3 zum Hosten einer statischen Site verwendet werden kann.
• Im Object Storage erstellen wir „Buckets“ (Buckets), das sind separate Speicherbereiche für unsere Dateien.

Lassen Sie uns eines davon erstellen. Klicken Sie dazu in der Servicekonsole auf die Schaltfläche „Bucket erstellen“.

Das Formular zum Erstellen eines Buckets hat die folgenden Felder, gehen wir sie durch:

• Bucket-Name. Der Einfachheit halber nennen wir das Projekt genauso wie Angular – angular-habr-object-storage
• Max. Größe. Wir wetten so viel, wie unsere Website wiegt, da die Website nicht kostenlos gespeichert wird und wir Yandex für jedes zugewiesene Gigabyte einen hübschen Cent zahlen.
• Zugriff auf Leseobjekte. Wir setzen es auf „Öffentlich“, da der Benutzer jede Datei unserer statischen Site erhalten muss, damit das Layout korrekt darauf gezeichnet, Skripte verarbeitet werden können usw.
• Zugriff auf die Objektliste und Zugriff auf Leseeinstellungen. Belassen Sie es auf „Eingeschränkt“. Dies ist notwendig, um den Bucket als internen Dateispeicher für Anwendungen nutzen zu können.
• Speicherklasse. Belassen Sie es auf „Standard“. Dies bedeutet, dass unsere Website häufig besucht wird und daher die Dateien, aus denen die Website besteht, häufig heruntergeladen werden. Außerdem wirkt sich der Artikel auf die Leistung und die Bezahlung aus (Link einfügen).

Klicken Sie auf „Bucket erstellen“ und der Bucket wird erstellt.

Jetzt müssen wir unsere Website in den Bucket hochladen. Am einfachsten ist es, einen Ordner in der Nähe zu öffnen dist Klicken Sie auf unsere Website und ziehen Sie sie mithilfe von Ziehpunkten direkt auf die Seite. Dies ist komfortabler als das Klicken auf die Schaltfläche „Objekte laden“, da in diesem Fall die Ordner nicht übertragen werden und Sie sie manuell in der richtigen Reihenfolge anlegen müssen.

Die Site wird also in den Speicher geladen, sodass wir Benutzern die Möglichkeit bieten können, als Website auf den Speicher zuzugreifen.
Klicken Sie dazu auf der linken Seite des Menüs auf den Reiter „Website“.

Wählen Sie auf der Seite zum Einrichten eines Buckets als Site die Registerkarte „Hosting“ aus. Hier geben wir die Hauptseite der Site an, normalerweise index.html. Wenn Sie eine SPA-Anwendung haben, werden wahrscheinlich alle Fehler auch auf der Hauptseite verarbeitet, daher geben wir auf der Fehlerseite auch index.html an.

Wir sehen sofort, über welchen Link unsere Seite erreichbar ist. Klicken Sie auf Speichern.

Nach etwa 5 Minuten, wenn wir auf den Link klicken, sehen wir, dass unsere Seite nun für alle verfügbar ist.

Vielen Dank an alle, die bis zum Ende gelesen haben! Dies ist mein erster Artikel. Ich habe vor, weitere Yandex-Dienste und deren Integration mit Frontend- und Backend-Technologien näher zu beschreiben.

Schreiben Sie in die Kommentare, wie sehr Sie daran interessiert sind, mehr über andere Yandex-Dienste oder den Einsatz von Angular in der modernen Entwicklung zu erfahren.

Source: habr.com