Hallo, Habra!
In diesem Artikel werde ich Ihnen zeigen, wie Sie mithilfe der Technologien von Yandex ganz einfach eine statische Website erstellen können, und zwar Object Storage.
Am Ende wird Ihre Website im Internet verfügbar sein, die über einen externen Link erreichbar 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-Service entwickelt, ähnlich einem Marktplatz, auf dem Menschen Sporttrainer für persönliche Trainings finden. 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 stieß auf die folgenden Probleme:
- AWS kostete viel Geld. Nach 3 Jahren in Unternehmensumgebungen war ich an Annehmlichkeiten wie Docker, Kubernetes, CI/CD, Blue-Green-Deployment gewöhnt, und als aufstrebender Programmierer-Startup wollte ich dasselbe umsetzen. Am Ende kam ich zu dem Schluss, dass AWS jeden Monat zwischen 300 und 400 Dollar kostete. Am teuersten war Kubernetes, etwa 100 Dollar, bei einem Minimalsetup mit einem Cluster und einem Knoten.
P.S. Am Anfang sollte man das nicht so machen. - Als ich begann, über die rechtlichen Aspekte nachzudenken, erfuhr ich von dem Gesetz 152-FZ, in dem ungefähr Folgendes gesagt wurde: "Personenbezogene Daten von Bürgern der Russischen Föderation müssen auf dem Territorium der Russischen Föderation gespeichert werden", andernfalls drohen Strafen, was ich vermeiden wollte. Ich beschloss, mich mit diesen Fragen zu beschäftigen, bevor "von oben" etwas kam :).
Inspiriert von der Migration der Infrastruktur von Amazon Web Services in Yandex.Cloud beschloss ich, den Yandex-Stack genauer zu studieren.
Für mich waren die wichtigsten Merkmale von Yandex.Cloud:
- 2- bis 3-mal günstiger (laut dem obigen Artikel und öffentlichen Preislisten)
- , was das große Amazon derzeit nicht sicherstellen kann.
Ich habe mir andere Wettbewerber dieses Dienstes angeschaut, aber zu diesem Zeitpunkt war Yandex im Vorteil.
Ich habe über mich erzählt, jetzt können wir zur Sache kommen.
Schritt 0. Bereiten wir die Website vor
Zunächst benötigen wir die 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 dann im Internet veröffentliche.
P.S. Wer sich mit Angular auskennt oder seine Dokumentation kennt, , gehen Sie zu .
Installieren wir Angular-CLI, um SPA-Websites mit Angular zu erstellen:
npm install -g @angular/cliLass uns eine Angular-Anwendung mit dem folgenden Befehl erstellen:
ng new angular-habr-object-storageDann wechseln wir in das Anwendungsverzeichnis und starten es, um die Funktionalität zu überprüfen:
cd angular-habr-object-storage
ng serve --open
Die Anwendung wurde erstellt, ist aber noch nicht bereit für das Hosting. Lassen Sie uns die Anwendung in ein kleines Build (Production) packen, um alles Unnötige zu entfernen und nur die erforderlichen Dateien zu belassen.
In Angular kann man das mit folgendem Befehl machen:
ng build --prodDas Ergebnis dieses Befehls ist ein Ordner im Wurzelverzeichnis der Anwendung dist mit unserer Website.
Es funktioniert. Jetzt gehen wir zum Hosting über.
Schritt 1.
Gehe zur Website und klicken auf die Schaltfläche "Verbinden".
Hinweis:
- Für die Nutzung des Yandex-Dienstes benötigen Sie möglicherweise ein Yandex-E-Mail-Konto (aber das ist nicht sicher).
- Für einige Funktionen müssen Geld auf Ihr Konto im persönlichen Bereich eingezahlt werden (mindestens 500 Rubel).
Nach erfolgreicher Registrierung und Autorisierung sind wir im persönlichen Bereich.
Dann müssen wir im Menü links den Dienst "Object Storage" finden, den wir 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, die ebenfalls über eine API zur Verwaltung des Speichers aus dem Code verfügt und genauso wie AWS S3 für das Hosting statischer Websites genutzt werden kann.
- In Object Storage erstellen wir "Buckets" (Korbe), die separate Speicherorte für unsere Dateien sind.
Lass uns einen davon erstellen. Dazu klicken wir im Konsolenbereich des Dienstes auf die Schaltfläche "Bucket erstellen".
Im Formular zur Erstellung eines Buckets gibt es folgende Felder, lassen Sie uns diese durchsehen:
- Bucket-Name. Zur Vereinfachung nennen wir ihn gleich wie das Angular-Projekt —
angular-habr-object-storage - Max. Größe. Wir setzen so viel, wie unsere Website wiegt, da die Website nicht kostenlos gespeichert wird und wir für jedes zugewiesene Gigabyte eine kleine Gebühr an Yandex zahlen werden.
- Zugriff auf die Leseberechtigungen 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 Liste der Objekte und Zugriff auf das Lesen der Einstellungen. Lassen Sie es auf "Eingeschränkt". Dies ist erforderlich, um den Bucket als internen Dateispeicher für Anwendungen zu verwenden.
- Speicherkategorie. Wir lassen "Standard" ausgewählt. Das bedeutet, dass unsere Website häufig besucht wird und somit auch häufig Dateien heruntergeladen werden, die die Website ausmachen. Außerdem wirkt sich dieser Punkt auf die Leistung und die Bezahlung aus (Link einfügen).
Wir klicken auf "Bucket erstellen" und der Bucket wurde erstellt.
Jetzt müssen wir unsere Website in den Bucket hochladen. Der einfachste Weg ist, in einem Ordner neben unserer Website zu öffnen dist und die Dateien einfach per Drag & Drop auf die Seite zu ziehen. Das ist bequemer, als auf die Schaltfläche "Objekte hochladen" zu klicken, weil in diesem Fall die Ordner nicht übertragen werden und man sie manuell in der richtigen Reihenfolge erstellen muss.
Also, die Website ist im Speicher hochgeladen, jetzt können wir den Benutzern die Möglichkeit bieten, auf den Speicher so zuzugreifen, als wäre es eine Website.
Dafür klicken wir links im Menü auf den Tab "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 auch auf der Hauptseite behandelt, daher geben wir für die Fehlerseite ebenfalls index.html an.
Wir sehen sofort, unter welchem Link unsere Website verfügbar sein wird. Wir klicken auf speichern.
Nach etwa 5 Minuten, wenn wir dem Link folgen, sehen wir, dass unsere Website jetzt für alle zugänglich ist.
Danke an alle, die bis zum Ende gelesen haben! Dies ist mein erster Artikel, ich plane, weitere Dienstleistungen von Yandex und deren Integration mit Frontend- und Backend-Technologien zu beschreiben.
Schreiben Sie in die Kommentare, wie interessant es für Sie wäre, mehr über andere Yandex-Dienste oder über die Nutzung von Angular in der modernen Entwicklung zu erfahren.
Quelle: habr.com
