Hur man är värd för en statisk webbplats med Yandex.Cloud Object Storage

Hej Habr!

I den här artikeln kommer jag att berätta hur du enkelt och enkelt är värd för en statisk webbplats med Yandex-teknik, nämligen Objektförvaring.

I slutändan kommer du att ha en webbhotell som kommer att vara tillgänglig via en extern länk.

Den här artikeln kommer att vara användbar om du

• En nybörjarutvecklare som precis håller på att lära sig programmera;
• En utvecklare som har gjort en portfölj och vill placera den i offentlig egendom för att visa den för vänner och arbetsgivare.

Om mig

Nyligen utvecklade jag en SaaS-tjänst, en sorts marknadsplats där folk hittar sporttränare för personlig träning. Använde Amazon Web Services-stacken (hädanefter kallad AWS). Men ju djupare jag dök in i projektet, desto fler nyanser lärde jag mig om de olika processerna för att organisera en startup.

Jag stötte på följande problem:

• AWS förbrukade mycket pengar. Efter att ha arbetat i 3 år i företagsföretag, vande jag mig vid sådana glädjeämnen som Docker, Kubernetes, CI/CD, blågrön implementering, och som en blivande startup-programmerare ville jag implementera detsamma. Som ett resultat kom jag till slutsatsen att AWS konsumerade 300-400 spänn varje månad. Kubernetes visade sig vara den dyraste, cirka 100 spänn, med en minimilön på ett kluster och en nod.
  PS Det finns ingen anledning att göra detta i början.
• Sedan, när jag tänkte på den juridiska sidan, lärde jag mig om lag 152-FZ, som sa ungefär följande: "Personliga uppgifter om medborgare i Ryska federationen måste lagras på Ryska federationens territorium", annars böter, vilket jag inte ville ha. Jag bestämde mig för att ta itu med dessa frågor innan det kom till mig från ovan :).

Inspirerad artiklar om migrering av infrastruktur från Amazon Web Services till Yandex.Cloud bestämde jag mig för att studera Yandex-stacken mer i detalj.

För mig var nyckelfunktionerna i Yandex.Cloud följande:

• 2-3 gånger billigare (enligt artikeln ovan och offentliga prislistor)
• Lagring av personuppgifter om användare på Ryska federationens territorium, vilket den stora Amazonas ännu inte kan uppnå.

Jag studerade andra konkurrenter till den här tjänsten, men vid den tiden vann Yandex.

Jag har berättat om mig själv, så att vi kan komma igång.

Steg 0. Förbered webbplatsen

Först behöver vi en webbplats som vi vill lägga ut på Internet. Eftersom jag är en Angular-utvecklare kommer jag att göra en enkel SPA-applikationsmall som jag sedan lägger ut på Internet.

PS Vem förstår Angular eller känner till dess dokumentation https://angular.io/guide/setup-local, gå till steg 1.

Låt oss installera Angular-CLI för att skapa SPA-webbplatser i Angular:

npm install -g @angular/cli

Låt oss skapa en Angular-applikation med följande kommando:

ng new angular-habr-object-storage

Gå sedan till applikationsmappen och starta den för att kontrollera dess funktionalitet:

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

Applikationen har skapats, men är ännu inte redo för värd. Låt oss sätta ihop applikationen till en liten build (produktion) för att ta bort alla onödiga saker och bara lämna de nödvändiga filerna.
I Angular kan du göra detta med följande kommando:

ng build --prod

Som ett resultat av detta kommando dök en mapp upp i programmets rot dist med vår hemsida.

Arbetar. Låt oss nu gå vidare till hosting.

Steg 1.

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

Notera:

• För att använda Yandex-tjänsten kan du behöva Yandex-post (men detta är inte säkert)
• För vissa funktioner måste du sätta in pengar på ditt konto på ditt personliga konto (minst 500 rubel).

Efter framgångsrik registrering och auktorisering finns vi på ditt personliga konto.

Nästa till vänster i menyn behöver du hitta tjänsten "Objektlagring", som vi kommer att använda för att vara värd för webbplatsen.

Kortfattat i termer:

• Object Storage är en fillagring som är kompatibel med Amazons liknande AWS S3-teknologi, som även har ett eget API för att hantera lagring från kod och som, liksom AWS S3, kan användas för att vara värd för en statisk webbplats.
• I Object Storage skapar vi "buckets" (buckets), som är separata lagringsområden för våra filer.

Låt oss skapa en av dem. För att göra detta klickar du på knappen "Skapa hink" i servicekonsolen.

Formuläret för att skapa en hink har följande fält, låt oss gå igenom dem:

• Hinknamn. För enkelhetens skull, låt oss kalla projektet detsamma som Angular - angular-habr-object-storage
• Max. storlek. Vi satsar så mycket som vår sida väger, eftersom sidan inte lagras gratis och för varje tilldelad gigabyte kommer vi att betala Yandex en fin slant.
• Tillgång att läsa objekt. Vi ställer in den på "Public", eftersom användaren måste ta emot varje fil på vår statiska webbplats så att layouten kan ritas korrekt på den, skript kan bearbetas, etc.
• Åtkomst till listan över objekt och Åtkomst för att läsa inställningar. Lämna det som "Begränsat". Detta är nödvändigt för att kunna använda hinken som intern fillagring för applikationer.
• Förvaringsklass. Lämna det som "Standard". Detta innebär att vår webbplats kommer att besökas ofta, och därför kommer filerna som utgör webbplatsen att laddas ner ofta. Plus att varan påverkar prestanda och betalning (infoga länk).

Klicka på "Skapa en hink" och hinken skapas.

Nu måste vi ladda upp vår sida till hinken. Det enklaste sättet är att öppna en mapp i närheten dist vår sida och dra den direkt till sidan med hjälp av handtag. Detta är bekvämare än att klicka på knappen "Ladda objekt", eftersom mapparna i det här fallet inte överförs och du måste skapa dem manuellt i rätt ordning.

Så, sajten laddas in i lagringen, så vi kan ge användare möjlighet att komma åt lagringen som en webbplats.
För att göra detta, klicka på fliken "Webbplats" till vänster i menyn.

På sidan för att ställa in en hink som en webbplats väljer du fliken "Hosting". Här anger vi webbplatsens huvudsida, vanligtvis index.html. Om du har en SPA-applikation så behandlas förmodligen alla fel även på huvudsidan, så vi kommer även att ange index.html på felsidan.

Vi ser direkt vilken länk vår sida kommer att vara tillgänglig via. Klicka på spara.

Efter cirka 5 minuter, genom att klicka på länken, ser vi att vår sida nu är tillgänglig för alla.

Tack till alla som läser till slutet! Det här är min första artikel; Jag planerar att ytterligare beskriva andra Yandex-tjänster och deras integration med frontend- och backend-teknologier.

Skriv i kommentarerna hur intresserad du är av att lära dig om andra Yandex-tjänster eller om användningen av Angular i modern utveckling.

Källa: will.com