Staattisen verkkosivuston isännöiminen Yandex.Cloud Object Storagella

Hei Habr!

Tässä artikkelissa kerron sinulle, kuinka helposti ja yksinkertaisesti isännöidä staattista verkkosivustoa Yandex-tekniikoilla, nimittäin Objektien varastointi.

Lopulta sinulla on web-isännöity verkkosivusto, johon pääsee ulkoisen linkin kautta.

Tämä artikkeli on hyödyllinen, jos

• Aloitteleva kehittäjä, joka vain opettelee ohjelmointia;
• Kehittäjä, joka on tehnyt portfolion ja haluaa tuoda sen julkisuuteen näyttääkseen sen ystäville ja työnantajille.

Tietoja minusta

Olen äskettäin kehittämässä SaaS-palvelua, eräänlaista markkinapaikkaa, josta ihmiset löytävät urheiluvalmentajia henkilökohtaista harjoittelua varten. Käytti Amazon Web Services -pinoa (jäljempänä AWS). Mutta mitä syvemmälle sukelsin projektiin, sitä enemmän opin vivahteita startupin organisoinnin eri prosesseista.

Törmäsin seuraaviin ongelmiin:

• AWS vei paljon rahaa. 3 vuotta Enterprise-yrityksissä työskennellessäni totuin sellaisiin iloihin kuin Docker, Kubernetes, CI/CD, sininen vihreä käyttöönotto, ja aloittelevana startup-ohjelmoijana halusin toteuttaa saman. Tuloksena tulin siihen tulokseen, että AWS kulutti 300-400 taalaa kuukaudessa. Kubernetes osoittautui kalleimmaksi, noin 100 taalaksi, yhden klusterin ja yhden solmun minimipalkalla.
  PS Tätä ei tarvitse tehdä alussa.
• Seuraavaksi oikeudellista puolta ajateltuani opin laista 152-FZ, joka sanoi jotain seuraavanlaista: "Venäjän federaation kansalaisten henkilötiedot on säilytettävä Venäjän federaation alueella", muuten sakot, joita en halunnut. Päätin puuttua näihin asioihin ennen kuin se tuli minulle ylhäältä :).

Inspiroitu artikkeleita Infrastruktuurin siirtämisestä Amazon Web Services -palvelusta Yandex.Cloudiin päätin tutkia Yandex-pinoa yksityiskohtaisemmin.

Minulle Yandex.Cloudin tärkeimmät ominaisuudet olivat seuraavat:

• 2-3 kertaa halvempi (yllä olevan artikkelin ja julkisten hinnastojen mukaan)
• Käyttäjien henkilötietojen säilyttäminen Venäjän federaation alueella, jota suuri Amazon ei voi vielä saavuttaa.

Tutkin muita tämän palvelun kilpailijoita, mutta tuolloin Yandex voitti.

Olen kertonut sinulle itsestäni, jotta voimme ryhtyä hommiin.

Vaihe 0. Valmistele sivusto

Ensinnäkin tarvitsemme verkkosivuston, jonka haluamme sijoittaa Internetiin. Koska olen Angular-kehittäjä, teen yksinkertaisen SPA-sovellusmallin, jonka julkaisen sitten Internetiin.

PS Kuka ymmärtää Angularin tai tietää sen dokumentaatiosta https://angular.io/guide/setup-local, mene vaihe 1.

Asennataan Angular-CLI SPA-sivustojen luomiseksi Angularissa:

npm install -g @angular/cli

Luodaan Angular-sovellus seuraavalla komennolla:

ng new angular-habr-object-storage

Siirry seuraavaksi sovelluskansioon ja käynnistä se tarkistaaksesi sen toimivuuden:

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

Sovellus on luotu, mutta se ei ole vielä valmis isännöintiin. Kootaan sovellus pieneksi rakennukseksi (Production), jotta kaikki tarpeettomat asiat poistetaan ja vain tarvittavat tiedostot jätetään.
Angularissa voit tehdä tämän seuraavalla komennolla:

ng build --prod

Tämän komennon seurauksena sovelluksen juureen ilmestyi kansio dist nettisivujemme kanssa.

Toimii. Siirrytään nyt isännöintiin.

Vaihe 1.

Siirry sivustolle https://console.cloud.yandex.ru/ ja napsauta "Yhdistä" -painiketta.

Huom:

• Yandex-palvelun käyttämiseksi saatat tarvita Yandex-postia (mutta tämä ei ole varmaa)
• Joitakin toimintoja varten sinun on talletettava rahaa tilillesi henkilökohtaisella tililläsi (vähintään 500 ruplaa).

Onnistuneen rekisteröinnin ja valtuutuksen jälkeen olemme henkilökohtaisella tililläsi.

Seuraavaksi vasemmasta valikosta sinun tulee löytää "Objektitallennus" -palvelu, jota käytämme sivuston isännöintiin.

Lyhyesti termeillä:

• Object Storage on Amazonin samanlaisen AWS S3 -teknologian kanssa yhteensopiva tiedostotallennus, jolla on myös oma API tallennuksen hallintaan koodista ja jota voidaan käyttää AWS S3:n tapaan staattisen sivuston isännöimiseen.
• Object Storagessa luomme "ämpärit" (ämpärit), jotka ovat erillisiä tallennusalueita tiedostoillemme.

Luodaan yksi niistä. Voit tehdä tämän napsauttamalla palvelukonsolissa "Luo ämpäri" -painiketta.

Kauhan luontilomakkeessa on seuraavat kentät, käydään ne läpi:

• Kauhan nimi. Yksinkertaisuuden vuoksi kutsutaan projektia samaksi kuin Angular - angular-habr-object-storage
• Max. koko. Panostamme niin paljon kuin sivustomme painaa, koska sivustoa ei tallenneta ilmaiseksi ja jokaisesta varatusta gigatavusta maksamme Yandexille melkoisen pennin.
• Pääsy lukea objekteja. Asetamme sen asetukseksi "Julkinen", koska käyttäjän on saatava jokainen staattisen sivustomme tiedosto, jotta asettelu voidaan piirtää sille oikein, skriptejä voidaan käsitellä jne.
• Pääsy objektiluetteloon ja pääsy asetusten lukemiseen. Jätä se "rajoitetuksi". Tämä on tarpeen, jotta ämpäri voidaan käyttää sovellusten sisäisenä tiedostotallennustilana.
• Varastointiluokka. Jätä se "standardiksi". Tämä tarkoittaa, että sivustollamme vierailemme usein, ja siksi sivuston muodostavia tiedostoja ladataan usein. Lisäksi tuote vaikuttaa suorituskykyyn ja maksuun (lisää linkki).

Napsauta "Luo ämpäri" ja säilö on luotu.

Nyt meidän on ladattava sivustomme ämpäriin. Helpoin tapa on avata lähellä oleva kansio dist sivustollemme ja vedä se suoraan sivulle kahvojen avulla. Tämä on kätevämpää kuin napsauttaa "Lataa objektit" -painiketta, koska tässä tapauksessa kansioita ei siirretä ja sinun on luotava ne manuaalisesti oikeassa järjestyksessä.

Sivusto siis ladataan tallennustilaan, jotta voimme tarjota käyttäjille mahdollisuuden päästä varastoon verkkosivustona.
Voit tehdä tämän napsauttamalla valikon vasemmassa reunassa "Verkkosivusto" -välilehteä.

Valitse "Hosting"-välilehti sivulla, jolla määrität ryhmän sivustoksi. Tässä osoitamme sivuston pääsivun, yleensä index.html. Jos sinulla on SPA-sovellus, niin luultavasti kaikki virheet käsitellään myös pääsivulla, joten ilmoitamme virhesivulle myös index.html.

Näemme heti, minkä linkin kautta sivustollemme pääsee. Napsauta tallenna.

Noin 5 minuutin kuluttua linkkiä napsauttamalla näemme, että sivustomme on nyt kaikkien saatavilla.

Kiitos kaikille loppuun asti lukeneille! Tämä on ensimmäinen artikkelini; Aion kuvata tarkemmin muita Yandex-palveluita ja niiden integrointia käyttöliittymä- ja taustateknologioihin.

Kirjoita kommentteihin kuinka kiinnostunut olet oppimaan muista Yandex-palveluista tai Angularin käytöstä nykyaikaisessa kehityksessä.

Lähde: will.com