Hur man hostar en statisk webbplats med Yandex.Cloud Object Storage

Hej, Habr!

I den här artikeln kommer jag att berätta hur enkelt och smidigt du kan publicera en statisk webbplats med hjälp av Yandex-teknologier, nämligen Object Storage.

I slutet kommer du att ha en webbplats som är publicerad på nätet och som kommer att vara tillgänglig via en extern länk.

Denna artikel kommer att vara användbar om du är

• En nybörjande utvecklare som just lär sig programmering;
• En utvecklare som har gjort en portfolio och vill publicera den offentligt för att visa sina vänner och arbetsgivare.

Om mig

Nyligen arbetade jag på en SaaS-tjänst, en typ av marknadsplats där människor kan hitta sporttränare för personliga träningar. Jag använde Amazon Web Services (AWS). Men ju mer jag fördjupade mig i projektet, desto fler nyanser lärde jag mig om olika processer i att organisera en startup.

Jag stötte på följande problem:

• AWS kostade mycket pengar. Efter att ha arbetat i tre år på företag i Enterprise-sektorn var jag van vid sådana fördelar som Docker, Kubernetes, CI/CD, blue-green deployment, och som en nybörjande programmerare och startup-grundare ville jag också implementera samma sak. Till slut kom jag fram till att AWS kostade mig mellan 300-400 dollar varje månad. Den dyraste kostnaden var Kubernetes, omkring 100 dollar, med en minimal setup med en kluster och en nod.
  P.S. I början behöver man inte göra så.
• Sedan, när jag tänkte på de juridiska aspekterna, fick jag veta om lag 152-FZ, som ungefär sa följande: "Personuppgifter för medborgare i Ryssland ska lagras inom Rysslands territorium", annars kan det bli böter, vilket jag ville undvika. Jag bestämde mig för att hantera dessa frågor innan "det kom nerifrån". :)

Inspirerad artikeln av att migrera infrastrukturen från Amazon Web Services till Yandex.Cloud, bestämde jag mig för att studera Yandex-stacken mer ingående.

För mig var de nyckelfunktioner som Yandex.Cloud erbjöd följande:

• Billigare med 2-3 gånger (enligt ovanstående artikel och offentliga prissättningar)
• Lagring av personuppgifter för användare inom Rysslands territorium, vilket stora Amazon än så länge inte kan genomföra.

Jag undersökte andra konkurrenter till denna tjänst, men då vann Yandex.

Nu när jag har pratat om mig själv, låt oss gå vidare till sakfrågan.

Steg 0. Förbered webbplatsen

För att börja behöver vi en webbplats som vi vill publicera på internet. Eftersom jag är Angular-utvecklare kommer jag att skapa en enkel mall för en SPA-applikation som jag senare kommer att publicera på nätet.

P.S. Den som förstår sig på Angular eller känner till dess dokumentation https://angular.io/guide/setup-local, kan gå till Steg 1.

Installera Angular-CLI för att skapa SPA-webbplatser i Angular:

npm install -g @angular/cli

Vi skapar en Angular-applikation med följande kommando:

ng new angular-habr-object-storage

Därefter går vi till applikationens mapp och startar den för att kontrollera dess funktionalitet:

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

Applikationen har skapats, men är ännu inte redo att publiceras på en webbhotell. Vi ska bygga applikationen till en liten produktionsversion för att ta bort överflödiga filer och spara enbart de nödvändiga.
I Angular kan detta göras med följande kommando:

ng build --prod

Som ett resultat av detta kommando skapades en mapp i roten av applikationen dist med vår webbplats.

Det fungerar. Nu går vi vidare till webbhotell.

Step 1.

Gå till webbplatsen https://console.cloud.yandex.ru/ och klickar på knappen "Anslut".

Anmärkning:

• För att använda Yandex-tjänsten kan det behövas ett Yandex-e-postkonto (men det är inte säkert)
• För vissa funktioner måste vi sätta in pengar på kontot i det personliga området (minst 500 rubel).

Efter framgångsrik registrering och inloggning är vi i det personliga området.

Därefter måste vi i menyn till vänster hitta tjänsten "Object Storage", som vi precis kommer att använda för att hosta webbplatsen.

Kort om termer:

• Object Storage är en fil lagringslösning som är kompatibel med Amazons AWS S3-teknologi, vilken också har sitt eget API för att hantera lagringen från koden och som, precis som AWS S3, kan användas för att hosta en statisk webbplats.
• I Object Storage skapar vi "buckets" (bucket / Korv), som är separata lagringsenheter för våra filer.

Vi ska skapa en av dem. För detta klickar vi på knappen "Skapa bucket" i tjänstens konsol.

I formuläret för att skapa en bucket finns följande fält, låt oss gå igenom dem:

• Bucketnamn. För enkelhetens skull, namnge den samma som Angular-projektet — angular-habr-object-storage
• Max. storlek. Vi anger det belopp som vår webbplats väger, eftersom webbplatsen inte lagras gratis och för varje tilldelad gigabyte kommer vi att betala Yandex en liten summa.
• Åtkomst för att läsa objekt. Vi ställer in det som "Offentlig", eftersom användaren måste kunna hämta varje fil från vår statiska webbplats för att layouten ska återges korrekt och skripten fungerar osv.
• Åtkomst till objektlistan och Åtkomst för att läsa inställningar. Vi lämnar det som "Begränsad". Detta är nödvändigt för att kunna använda bucketen som intern lagring för filer för applikationer.
• Lagringsklass. Vi lämnar "Standard". Det betyder att vår webbplats kommer att besökas ofta, och därmed laddas ner filer som utgör webbplatsen. Dessutom påverkar detta punkt prestanda och kostnad (infoga länk).

Vi trycker på "Skapa bädd" och bädden är skapad.

Nu behöver vi ladda upp vår webbplats till bädden. Det enklaste sättet är att öppna en mapp vid sidan av dist vår webbplats och helt enkelt dra och släppa direkt på sidan. Det är lättare än att trycka på knappen "Ladda upp objekt", eftersom mappar inte flyttas på det sättet och de måste skapas manuellt i rätt ordning.

Så, webbplatsen har laddats upp till lagringen, nu kan vi ge användarna möjlighet att komma åt lagringen som en webbplats.
För detta klickar vi på fliken "Webbplats" till vänster i menyn.

På sidan för att ställa in bädden som webbplats, väljer vi fliken "Hosting". Här anger vi startsidan för webbplatsen, vanligtvis index.html. Om du har en SPA-applikation, så hanteras alla fel sannolikt också på startsidan, så vi anger även index.html på fel sidan.

Vi ser direkt vilken länk som kommer att vara tillgänglig för vår webbplats. Vi klickar på spara.

Efter ungefär 5 minuter, när vi går till länken, ser vi att vår webbplats nu är tillgänglig för alla som vill.

Tack till alla som läste till slut! Det här är min första artikel, jag planerar att beskriva andra Yandex-tjänster och deras integration med frontend- och backend-teknologier.

Skriv i kommentarerna hur intressant det är för er att veta mer om andra Yandex-tjänster eller om användningen av Angular i modern utveckling.

Källa: habr.com