🥇Cum să gazduiești un site static cu ajutorul Yandex.Cloud Object Storage

Salut, Habr!

În acest articol, voi explica cum să găsiți și să publicați ușor un site static folosind tehnologiile Yandex, și anume Object Storage.

La final, veți avea un site publicat online, accesibil printr-un link extern.

Acest articol va fi util dacă sunteți

un dezvoltator începător care abia învață programarea;
un dezvoltator care a creat un portofoliu și dorește să îl publice pentru a-l arăta prietenilor și angajatorilor.

Despre mine

Recent, am dezvoltat un serviciu SaaS, similar cu un marketplace, unde oamenii își găsesc antrenori sportivi pentru antrenamente personale. Am folosit stiva Amazon Web Services (AWS). Dar cu cât mă adânceam mai mult în proiect, cu atât mai multe detalii descopeream despre diferitele procese de organizare a unui start-up.

M-am confruntat cu următoarele probleme:

AWS consuma mulți bani. După 3 ani de muncă în companii Enterprise, m-am obișnuit cu frumusețile precum Docker, Kubernetes, CI/CD, blue-green deployment și, ca un programator începător într-un start-up, am vrut să implementăm aceleași lucruri. În cele din urmă, am ajuns la concluzia că AWS consuma lunar între 300 și 400 de dolari. Cea mai costisitoare a fost Kubernetes, aproximativ 100 de dolari, având minim un cluster și o nod.
P.S. La început, nu este necesar să faceți așa.
Apoi, gândindu-mă la aspectele legale, am aflat despre legea 152-FZ, care menționa aproximativ următoarele: "Datele personale ale cetățenilor RF trebuie stocate pe teritoriul RF", altfel riscați amenzi, ceea ce nu-mi doream. Am decis să mă ocup de aceste probleme, înainte să primesc vreo notificare din partea "superiorilor" :).

Inspirat articol de migrarea infrastructurii din Amazon Web Services în Yandex.Cloud, am decis să studiez mai bine stiva Yandex.

Pentru mine, caracteristicile cheie ale Yandex.Cloud erau următoarele:

Mai ieftin cu 2-3 ori (conform articolului de mai sus și a prețurilor publice)
Stocarea datelor personale ale utilizatorilor pe teritoriul RF, ceea ce Amazon-ul nu poate realiza deocamdată.

Am studiat alți concurenți ai acestui serviciu, dar în acel moment Yandex câștiga.

Acum că m-am prezentat, să trecem la lucru.

Pasul 0. Să pregătim site-ul

Pentru început, avem nevoie de un site pe care dorim să-l publicăm pe internet. Fiind dezvoltator Angular, voi crea un șablon simplu de aplicație SPA, pe care îl voi publica ulterior pe internet.

P.S. Cei care se pricep la Angular sau cunosc documentația acestuia https://angular.io/guide/setup-local, treceți la Pasul 1.

Vom instala Angular-CLI pentru a crea site-uri SPA în Angular:

npm install -g @angular/cli

Vom crea o aplicație Angular folosind următoarea comandă:

ng new angular-habr-object-storage

Apoi, ne mutăm în folderul aplicației și o lansăm pentru a verifica funcționarea:

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

Aplicația a fost creată, dar încă nu este pregătită pentru găzduire. Vom construi aplicația într-un mic build (Production), pentru a elimina tot ce este unnecessary și a lăsa doar fișierele necesare.
În Angular, acest lucru se poate face cu următoarea comandă:

ng build --prod

Ca rezultat al acestei comenzi, în rădăcina aplicației a apărut un folder dist cu site-ul nostru.

Funcționează. Acum trecem la găzduire.

Pasul 1.

Accesăm site-ul https://console.cloud.yandex.ru/ și facem clic pe butonul "Conectare".

Notă:

Pentru a utiliza serviciul Yandex, poate fi necesar un cont de e-mail Yandex (dar nu este sigur)
Pentru unele funcții, va fi necesar să adăugăm bani în contul din cabinetul personal (minimum 500 de ruble).

După ce ne-am înregistrat și autentificat cu succes, suntem în cabinetul personal.

Apoi, în meniul din stânga, trebuie să găsim serviciul "Object Storage", pe care îl vom folosi pentru găzduirea site-ului.

Pe scurt despre termeni:

Object Storage este un depozit de fișiere, compatibil cu tehnologia similară a Amazon AWS S3, care are de asemenea un API propriu pentru gestionarea depozitului din cod și care, la fel ca AWS S3, poate fi folosit pentru găzduirea unui site static.
În Object Storage, creăm "buckets" (bucket / Coș), care sunt depozite separate pentru fișierele noastre.

Vom crea unul dintre ele. Pentru aceasta, în consola serviciului, facem clic pe butonul "Creează bucket".

În formularul de creare bucket există următoarele câmpuri, să ne uităm pe scurt la ele:

Numele bucket-ului. Pentru simplitate, să numim la fel ca proiectul Angular — angular-habr-object-storage
Dimensiunea maximă. Stabilim atât cât cântărește site-ul nostru, deoarece găzduirea site-ului nu este gratuită și pentru fiecare gigabyte dedicat, vom plăti un mic cuantum către Yandex.
Acces pentru citirea obiectelor. Stabilim "Public", deoarece utilizatorul trebuie să poată accesa fiecare fișier al site-ului nostru static, pentru ca layout-ul să se afișeze corect, scripturile să funcționeze etc.
Acces la lista de obiecte și Acces la citirea setărilor. Lăsăm "Restricționat". Acest lucru este necesar pentru a folosi bucket-ul ca depozit intern de fișiere pentru aplicații.
Tipul de stocare. Lăsăm "Standard". Aceasta înseamnă că site-ul nostru va fi vizitat frecvent, așa că fișierele care constituie site-ul vor fi descărcate frecvent. În plus, acest punct influențează performanța și plata (inserați linkul).

Facem clic pe "Creează bucket" și bucket-ul este creat.

Acum trebuie să încărcăm site-ul nostru în bucket. Cel mai simplu mod este să deschidem o fereastră lângă folderul nostru dist site-ului și să tragem manual fișierele direct pe pagină. Este mai convenabil decât să facem clic pe butonul "Încărcați obiecte", deoarece în acest caz folderele nu se transferă și va trebui să le creăm manual în ordinea corectă.

Deci, site-ul a fost încărcat în stocare, putem oferi utilizatorilor posibilitatea de a accesa stocarea ca pe un site.
Pentru asta, facem clic pe tab-ul "Website" din meniul din stânga.

Pe pagina de setare a bucket-ului ca site, alegem tab-ul "Hosting". Aici specificăm pagina principală a site-ului, de obicei index.html. Dacă aveți o aplicație SPA, probabil toate erorile sunt gestionate și pe pagina principală, așa că vom indica index.html și pe pagina de erori.

Vedem imediat prin ce link va fi disponibil site-ul nostru. Facem clic pentru a salva.

După aproximativ 5 minute, accesând linkul vedem că acum site-ul nostru este disponibil pentru toți doritorii.

Mulțumesc tuturor celor care au citit până la capăt! Aceasta este prima mea articol, intenționez să descriu în continuare alte servicii Yandex și integrarea acestora cu tehnologiile frontend și backend.

Scrieți în comentarii cât de interesant vi se pare să aflați despre alte servicii Yandex sau despre utilizarea Angular în dezvoltarea modernă.

Sursa: habr.com