Hoe u een statische website host met Yandex.Cloud Object Storage

Hé Habr!

In dit artikel zal ik u vertellen hoe u eenvoudig en eenvoudig een statische website kunt hosten met behulp van Yandex-technologieën, namelijk Object Opslag.

Uiteindelijk krijgt u een webgehoste website die toegankelijk is via een externe link.

Dit artikel zal nuttig zijn als u

• Een beginnende ontwikkelaar die net leert programmeren;
• Een ontwikkelaar die een portfolio heeft gemaakt en deze in het publieke domein wil plaatsen om deze aan vrienden en werkgevers te laten zien.

Over mij

Onlangs was ik bezig met het ontwikkelen van een SaaS-dienst, een soort marktplaats waar mensen sporttrainers vinden voor personal training. Gebruikte de Amazon Web Services-stack (hierna AWS genoemd). Maar hoe dieper ik in het project dook, hoe meer nuances ik leerde over de verschillende processen van het organiseren van een startup.

Ik ben de volgende problemen tegengekomen:

• AWS kostte veel geld. Na drie jaar bij Enterprise-bedrijven te hebben gewerkt, raakte ik gewend aan pleziertjes als Docker, Kubernetes, CI/CD, blauwgroene implementatie, en als aspirant-startup-programmeur wilde ik hetzelfde implementeren. Als gevolg hiervan kwam ik tot de conclusie dat AWS maandelijks 3-300 dollar verbruikte. Kubernetes bleek het duurst, ongeveer 400 dollar, met een minimumloon van één cluster en één node.
  PS Het is niet nodig om dit in het begin te doen.
• Vervolgens, toen ik aan de juridische kant dacht, leerde ik over wet 152-FZ, die ongeveer het volgende zei: ‘Persoonsgegevens van burgers van de Russische Federatie moeten worden opgeslagen op het grondgebied van de Russische Federatie’, anders boetes, wat ik niet wilde. Ik besloot deze problemen aan te pakken voordat het van bovenaf naar mij toe kwam :).

Geïnspireerd Lidwoord over het migreren van infrastructuur van Amazon Web Services naar Yandex.Cloud, besloot ik de Yandex-stack in meer detail te bestuderen.

Voor mij waren de belangrijkste kenmerken van Yandex.Cloud de volgende:

• 2-3 keer goedkoper (volgens bovenstaand artikel en openbare prijslijsten)
• Opslag van persoonlijke gegevens van gebruikers op het grondgebied van de Russische Federatie, wat de grote Amazone nog niet kan verwezenlijken.

Ik bestudeerde andere concurrenten van deze dienst, maar op dat moment was Yandex aan het winnen.

Ik heb je over mezelf verteld, zodat we aan de slag kunnen gaan.

Stap 0. Bereid de site voor

Ten eerste hebben we een website nodig die we op internet willen plaatsen. Omdat ik een Angular-ontwikkelaar ben, zal ik een eenvoudig SPA-toepassingssjabloon maken, dat ik vervolgens op internet zal plaatsen.

PS Wie Angular begrijpt of op de hoogte is van de documentatie ervan https://angular.io/guide/setup-local, ga naar stap 1.

Laten we Angular-CLI installeren om SPA-sites in Angular te maken:

npm install -g @angular/cli

Laten we een Angular-toepassing maken met behulp van de volgende opdracht:

ng new angular-habr-object-storage

Ga vervolgens naar de applicatiemap en start deze om de functionaliteit ervan te controleren:

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

De applicatie is gemaakt, maar nog niet gereed voor hosting. Laten we de applicatie samenvoegen tot een kleine build (productie) om alle onnodige dingen te verwijderen en alleen de noodzakelijke bestanden over te laten.
In Angular kun je dit doen met het volgende commando:

ng build --prod

Als resultaat van deze opdracht verscheen er een map in de hoofdmap van de applicatie dist met onze website.

Werken. Laten we nu verder gaan met hosten.

Stap 1.

Laten we naar de site gaan https://console.cloud.yandex.ru/ en klik op de knop “Verbinden”.

Opmerking:

• Om de Yandex-service te gebruiken, heeft u mogelijk Yandex-mail nodig (maar dit is niet zeker)
• Voor sommige functies moet u geld op uw persoonlijke account storten (minimaal 500 roebel).

Na succesvolle registratie en autorisatie staan ​​wij in uw persoonlijke account.

Vervolgens moet u aan de linkerkant in het menu de service "Object Storage" vinden, die we zullen gebruiken voor het hosten van de site.

Kort in termen:

• Object Storage is een bestandsopslag die compatibel is met de vergelijkbare AWS S3-technologie van Amazon, die ook een eigen API heeft voor het beheren van opslag op basis van code en die, net als AWS S3, kan worden gebruikt om een ​​statische site te hosten.
• In Object Storage creëren we "buckets" (buckets), dit zijn aparte opslagruimtes voor onze bestanden.

Laten we er een maken. Om dit te doen, klikt u in de serviceconsole op de knop "Bucket maken".

Het formulier voor het maken van een bucket heeft de volgende velden, laten we ze doornemen:

• Naam van emmer. Laten we het project voor de eenvoud hetzelfde noemen als Angular - angular-habr-object-storage
• Max. maat. We wedden zoveel als onze site weegt, aangezien de site niet gratis wordt opgeslagen en voor elke toegewezen gigabyte betalen we Yandex een behoorlijk cent.
• Toegang tot leesobjecten. We hebben het ingesteld op “Openbaar”, omdat de gebruiker elk bestand van onze statische site moet ontvangen, zodat de lay-out er correct op kan worden getekend, scripts kunnen worden verwerkt, enz.
• Toegang tot de lijst met objecten en toegang tot leesinstellingen. Laat het op 'Beperkt' staan. Dit is nodig om de bucket te kunnen gebruiken als interne bestandsopslag voor applicaties.
• Opslagklasse. Laat het op "Standaard" staan. Dit betekent dat onze site vaak wordt bezocht en dat de bestanden waaruit de site bestaat, daarom regelmatig worden gedownload. Bovendien heeft het artikel invloed op de prestaties en de betaling (link invoegen).

Klik op “Een bucket maken” en de bucket is gemaakt.

Nu moeten we onze site uploaden naar de bucket. De eenvoudigste manier is om een ​​map in de buurt te openen dist onze site en sleep deze met behulp van handgrepen rechtstreeks naar de pagina. Dit is handiger dan klikken op de knop “Objecten laden”, omdat in dit geval de mappen niet worden overgedragen en u ze handmatig in de juiste volgorde moet aanmaken.

De site wordt dus in de opslag geladen, zodat we gebruikers de mogelijkheid kunnen bieden om als website toegang te krijgen tot de opslag.
Om dit te doen, klikt u aan de linkerkant van het menu op het tabblad ‘Website’.

Op de pagina voor het instellen van een bucket als site selecteert u het tabblad ‘Hosting’. Hier geven we de hoofdpagina van de site aan, meestal index.html. Heeft u een SPA-applicatie, dan worden waarschijnlijk alle fouten ook op de hoofdpagina verwerkt, daarom zullen we op de foutpagina ook index.html aangeven.

Wij zien direct via welke link onze site bereikbaar is. Klik op opslaan.

Nadat we ongeveer 5 minuten op de link hebben geklikt, zien we dat onze site nu voor iedereen beschikbaar is.

Bedankt aan iedereen die tot het einde heeft gelezen! Dit is mijn eerste artikel; Ik ben van plan andere Yandex-services en hun integratie met frontend- en backend-technologieën verder te beschrijven.

Schrijf in de reacties hoe geïnteresseerd u bent in het leren over andere Yandex-services of over het gebruik van Angular in moderne ontwikkeling.

Bron: www.habr.com