Hallo, Habr!
In dit artikel zal ik uitleggen hoe je eenvoudig een statische website kunt hosten met behulp van technologieƫn van Yandex, namelijk Object Storage.
Aan het einde heb je een website die online staat en toegankelijk is via een externe link.
Dit artikel is nuttig als je
- Een beginnende ontwikkelaar bent die net leert programmeren;
- Een ontwikkelaar bent die een portfolio heeft gemaakt en het openbaar wilt maken om het aan vrienden en werkgevers te tonen.
Over mij
Onlangs heb ik een SaaS-service ontwikkeld, vergelijkbaar met een marktplaats, waar mensen sporttrainers voor persoonlijke trainingen kunnen vinden. Ik gebruikte de Amazon Web Services-stack (Vervolgens AWS). Maar naarmate ik dieper in het project dook, leerde ik meer over de verschillende processen van het organiseren van een startup.
Ik stuitte op de volgende problemen:
- AWS kostte veel geld. Na drie jaar in enterprise bedrijven te hebben gewerkt, was ik gewend aan de voordelen van Docker, Kubernetes, CI/CD, blue green deployment, en als een beginnende startup-programmeur wilde ik hetzelfde implementeren. Uiteindelijk kwam ik erachter dat AWS maandelijks 300-400 dollar kostte. Het duurste was Kubernetes, ongeveer 100 dollar, met de minimuminstelling van Ć©Ć©n cluster en Ć©Ć©n node.
P.S. Begin in het begin niet zo. - Vervolgens, nadenkend over de juridische kant, leerde ik over wet 152-FZ, waarin ongeveer het volgende stond: "Persoonsgegevens van burgers in de Russische Federatie moeten op het grondgebied van de Russische Federatie worden opgeslagen", anders zijn er boetes, iets wat ik niet wilde. Ik besloot deze kwesties aan te pakken voordat ik 'boven' een reactie kreeg :).
GeĆÆnspireerd door het migreren van de infrastructuur van Amazon Web Services naar Yandex.Cloud, besloot ik de stack van Yandex grondiger te bestuderen.
Voor mij waren de belangrijkste kenmerken van Yandex.Cloud als volgt:
- Duurzamer 2-3 keer goedkoper (volgens het bovenstaande artikel en publieke prijsopgaven)
- , iets wat de grote Amazon vooralsnog niet kan realiseren.
Ik heb naar andere concurrenten van deze dienst gekeken, maar op dat moment was Yandex de winnaar.
Ik heb iets over mezelf verteld, laten we nu naar de zaak gaan.
Stap 0. Bereid de site voor
Om te beginnen hebben we een website nodig die we op internet willen hosten. Aangezien ik een Angular-ontwikkelaar ben, zal ik een eenvoudig sjabloon van een SPA-app maken, die ik vervolgens op internet zal hosten.
P.S. Wie verstand heeft van Angular of bekend is met de documentatie ervan , ga naar .
Installeer Angular-CLI om SPA-websites op Angular te maken:
npm install -g @angular/cliLaten we een Angular-applicatie maken met behulp van de volgende opdracht:
ng new angular-habr-object-storageVervolgens gaan we naar de map van de applicatie en starten we deze om de werking te controleren:
cd angular-habr-object-storage
ng serve --open
De applicatie is gemaakt, maar nog niet klaar voor hosting. Laten we de applicatie samenstellen in een kleine build (Production) om alle overbodige bestanden te verwijderen en alleen de noodzakelijke bestanden over te houden.
In Angular kan dit met de volgende opdracht:
ng build --prodAls resultaat van deze opdracht is er een map aan de wortel van de applicatie verschenen dist met onze website.
Het werkt. Laten we nu naar de hosting gaan.
Stap 1.
Ga naar de website en drukken op de knop "Verbinden".
Opmerking:
- Om de service van Yandex te gebruiken, heb je mogelijk een Yandex-mail nodig (maar dat is niet zeker).
- Voor sommige functies moet je geld op de rekening in je persoonlijke account zetten (minimaal 500 roebel).
Na succesvolle registratie en autorisatie zijn we in ons persoonlijke account.
Vervolgens moet je in het menu aan de linkerkant de service "Object Storage" vinden, die we zullen gebruiken voor de hosting van de website.
Kort over de termen:
- Object Storage is een bestandsopslag die compatibel is met een vergelijkbare technologie van Amazon AWS S3, die ook een eigen API heeft voor het beheren van de opslag vanuit de code en die, net als AWS S3, gebruikt kan worden voor het hosten van een statische website.
- In Object Storage maken we "bakken" (bucket / Corbeille), die afzonderlijke opslagplaatsen zijn voor onze bestanden.
Laten we er een maken. Hiervoor drukken we op de knop "Maak een bak" in de console van de service.
In het formulier voor het maken van een bak zijn er de volgende velden, laten we ze snel doornemen:
- Naam van de bak. Voor de eenvoud noem het ook hetzelfde als het Angular-project ā
angular-habr-object-storage - Max. grootte. We stellen in wat onze website weegt, aangezien de website niet gratis wordt opgeslagen en we Yandex een klein bedrag zullen betalen voor elke toegewezen gigabyte.
- Toegang voor het lezen van objecten. We stellen in op "Publiek", zodat de gebruiker elk bestand van onze statische website kan ontvangen, zodat de opmaak goed wordt weergegeven, scripts werken, enz.
- Toegang tot de lijst met objecten en Toegang tot het lezen van instellingen. We laten dit op "Beperkt". Dit is nodig om de bak te gebruiken als interne opslag voor bestanden voor applicaties.
- Opslagklasse. We laten 'Standaard' staan. Dit betekent dat onze site vaak bezocht zal worden, en dus ook vaak bestanden zal worden gedownload die de site vormen. Daarnaast beĆÆnvloedt dit punt de prestaties en de betaling (link invoegen).
Klik op 'Bucket aanmaken' en de bucket is aangemaakt.
Nu moeten we onze site in de bucket uploaden. De eenvoudigste manier is om een mapje naast onze site te openen dist en de bestanden handmatig naar de pagina te slepen. Dit is handiger dan op de knop 'Objecten uploaden' te drukken, omdat in dat geval de mappen niet worden overgezet en je ze handmatig in de juiste volgorde moet aanmaken.
Dus, de site is in de opslag geĆ¼pload, waardoor we gebruikers de mogelijkheid kunnen bieden om naar de opslag te verwijzen, alsof het de site is.
Hiervoor klikken we links in het menu op het tabblad 'Website'.
Op de pagina voor het instellen van de bucket als website, kiezen we het tabblad 'Hosting'. Hier geven we de hoofdpagina van de site op, meestal is dit index.html. Als je een SPA-applicatie hebt, worden waarschijnlijk ook alle fouten op de hoofdpagina afgehandeld, dus geven we op de foutpagina ook index.html op.
We zien onmiddellijk welke link toegankelijk zal zijn voor onze site. Klik op opslaan.
Na ongeveer 5 minuten, als we de link volgen, zien we dat onze site nu toegankelijk is voor iedereen.
Bedankt aan iedereen die tot het einde heeft gelezen! Dit is mijn eerste artikel, en ik ben van plan om verder te schrijven over andere diensten van Yandex en hun integratie met front-end en back-end technologieƫn.
Laat in de opmerkingen weten hoe interessant het voor je zou zijn om meer te leren over andere Yandex-diensten of over het gebruik van Angular in moderne ontwikkeling.
Bron: habr.com
