Cum să găzduiești un site web static folosind Yandex.Cloud Object Storage

Hei Habr!

În acest articol, vă voi spune cum să găzduiți ușor și simplu un site web static folosind tehnologii Yandex, și anume Depozitarea obiectelor.

În cele din urmă, veți avea un site web găzduit de web, care va fi accesibil printr-un link extern.

Acest articol vă va fi util dacă dvs

• Un dezvoltator începător care tocmai învață să programeze;
• Un dezvoltator care și-a făcut un portofoliu și dorește să-l plaseze în domeniul public pentru a-l arăta prietenilor și angajatorilor.

Despre mine

Recent, dezvoltam un serviciu SaaS, un fel de piață în care oamenii găsesc antrenori sportivi pentru antrenamentul personal. A folosit stiva Amazon Web Services (denumită în continuare AWS). Dar cu cât m-am scufundat mai adânc în proiect, cu atât am învățat mai multe nuanțe despre diferitele procese de organizare a unui startup.

Am intampinat urmatoarele probleme:

• AWS consuma mulți bani. Lucrând timp de 3 ani în companii Enterprise, m-am obișnuit cu bucurii precum Docker, Kubernetes, CI/CD, implementarea albastru-verde și, în calitate de programator aspirant la startup, am vrut să implementez același lucru. Drept urmare, am ajuns la concluzia că AWS consuma 300-400 de dolari lunar. Kubernetes s-a dovedit a fi cel mai scump, aproximativ 100 de dolari, cu un salariu minim de un cluster și un nod.
  PS Nu este nevoie să faci asta la început.
• În continuare, gândindu-mă la partea juridică, am aflat despre legea 152-FZ, care spunea ceva de genul următor: „Datele personale ale cetățenilor Federației Ruse trebuie stocate pe teritoriul Federației Ruse”, in rest amenzi, pe care nu le doream. Am decis să abordez aceste probleme înainte de a-mi veni de sus :).

Inspirat articole despre migrarea infrastructurii de la Amazon Web Services la Yandex.Cloud, am decis să studiez stiva Yandex mai detaliat.

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

• De 2-3 ori mai ieftin (conform articolului de mai sus și listelor publice de prețuri)
• Stocarea datelor personale ale utilizatorilor pe teritoriul Federației Ruse, pe care marele Amazon nu poate încă să le realizeze.

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

Ți-am spus despre mine, ca să putem trece la treabă.

Pasul 0. Pregătiți site-ul

În primul rând, avem nevoie de un site web pe care dorim să îl plasăm pe Internet. Deoarece sunt dezvoltator Angular, voi face un șablon simplu de aplicație SPA, pe care apoi îl voi posta pe Internet.

PS Cine înțelege Angular sau știe despre documentația sa https://angular.io/guide/setup-local, mergi la pasul 1.

Să instalăm Angular-CLI pentru a crea site-uri SPA în Angular:

npm install -g @angular/cli

Să creăm o aplicație Angular folosind următoarea comandă:

ng new angular-habr-object-storage

Apoi, accesați folderul aplicației și lansați-l pentru a verifica funcționalitatea acesteia:

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

Aplicația a fost creată, dar nu este încă pregătită pentru găzduire. Să asamblam aplicația într-o construcție mică (Producție) pentru a elimina toate lucrurile inutile și a lăsa doar fișierele necesare.
În Angular puteți face acest lucru cu următoarea comandă:

ng build --prod

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

Lucrări. Acum să trecem la găzduire.

Pasul 1.

Să mergem pe site https://console.cloud.yandex.ru/ și faceți clic pe butonul „Conectați”.

Nota:

• Pentru a utiliza serviciul Yandex, este posibil să aveți nevoie de e-mail Yandex (dar acest lucru nu este sigur)
• Pentru unele funcții va trebui să depui bani în contul tău personal (minim 500 de ruble).

După înregistrarea și autorizarea cu succes, suntem în contul dvs. personal.

În continuare, în stânga meniului, trebuie să găsiți serviciul „Object Storage”, pe care îl vom folosi pentru găzduirea site-ului.

Pe scurt în termeni:

• Object Storage este o stocare de fișiere compatibilă cu tehnologia similară AWS S3 de la Amazon, care are și propriul API pentru gestionarea stocării din cod și, la fel ca AWS S3, poate fi folosit pentru a găzdui un site static.
• În Object Storage creăm „bucket-uri” (buckets), care sunt zone de stocare separate pentru fișierele noastre.

Să creăm una dintre ele. Pentru a face acest lucru, în consola de service, faceți clic pe butonul „Creare bucket”.

Formularul pentru crearea unei găleți are următoarele câmpuri, să le parcurgem:

• Numele găleții. Pentru simplitate, să numim proiectul la fel ca Angular - angular-habr-object-storage
• Max. mărimea. Parim atât de mult cât cântărește site-ul nostru, deoarece site-ul nu este stocat gratuit și pentru fiecare gigabyte alocat, vom plăti Yandex un ban destul de.
• Acces la citirea obiectelor. L-am setat la „Public”, deoarece utilizatorul trebuie să primească fiecare fișier al site-ului nostru static, astfel încât aspectul să poată fi desenat corect pe el, scripturile să poată fi procesate etc.
• Acces la lista de obiecte și Acces la setări de citire. Lăsați-l ca „Limitat”. Acest lucru este necesar pentru a utiliza găleata ca stocare internă a fișierelor pentru aplicații.
• Clasa de depozitare. Lăsați-l ca „Standard”. Aceasta înseamnă că site-ul nostru va fi vizitat frecvent și, prin urmare, fișierele care alcătuiesc site-ul vor fi descărcate frecvent. În plus, articolul afectează performanța și plata (inserați linkul).

Faceți clic pe „Creați o găleată” și găleata este creată.

Acum trebuie să încărcăm site-ul nostru în găleată. Cel mai simplu mod este să deschideți un folder în apropiere dist site-ul nostru și trageți-l direct pe pagină folosind mânere. Acest lucru este mai convenabil decât să faceți clic pe butonul „Încărcați obiecte”, deoarece în acest caz folderele nu sunt transferate și va trebui să le creați manual în ordinea corectă.

Deci, site-ul este încărcat în stocare, astfel încât să putem oferi utilizatorilor posibilitatea de a accesa spațiul de stocare ca un site web.
Pentru a face acest lucru, în partea stângă a meniului, faceți clic pe fila „Site web”.

Pe pagina pentru configurarea unei găleți ca site, selectați fila „Găzduire”. Aici indicăm pagina principală a site-ului, de obicei index.html. Dacă aveți o aplicație SPA, atunci probabil că toate erorile sunt procesate și pe pagina principală, așa că vom indica și index.html pe pagina de eroare.

Vedem imediat prin ce link site-ul nostru va fi accesibil. Faceți clic pe salvare.

După aproximativ 5 minute, făcând clic pe link, vedem că site-ul nostru este acum disponibil pentru toată lumea.

Mulțumesc tuturor celor care au citit până la sfârșit! Acesta este primul meu articol; intenționez să descriu în continuare alte servicii Yandex și integrarea lor cu tehnologiile frontend și backend.

Scrieți în comentarii cât de interesat sunteți să aflați despre alte servicii Yandex sau despre utilizarea Angular în dezvoltarea modernă.

Sursa: www.habr.com