Hola Habr!
En aquest article, us explicaré com allotjar fàcilment i senzillament un lloc web estàtic mitjançant tecnologies Yandex, és a dir Emmagatzematge d'objectes.
Al final, tindreu un lloc web allotjat a la qual podreu accedir mitjançant un enllaç extern.
Aquest article us serà útil si
- Un desenvolupador principiant que només està aprenent a programar;
- Un desenvolupador que ha fet una cartera i la vol col·locar en el domini públic per mostrar-la als amics i als empresaris.
Quant a mi
Recentment, estava desenvolupant un servei SaaS, una mena de mercat on la gent troba entrenadors esportius per a l'entrenament personal. S'ha utilitzat la pila d'Amazon Web Services (d'ara endavant, AWS). Però com més aprofundia en el projecte, més matisos aprenia sobre els diferents processos d'organització d'una startup.
Em vaig trobar amb els següents problemes:
- AWS consumia molts diners. Després d'haver treballat durant 3 anys a empreses empresarials, em vaig acostumar a alegries com Docker, Kubernetes, CI/CD, desplegament blau verd i, com a programador d'arrencada aspirant, volia implementar el mateix. Com a resultat, vaig arribar a la conclusió que AWS consumia entre 300 i 400 dòlars al mes. Kubernetes va resultar ser el més car, uns 100 dòlars, amb un salari mínim d'un clúster i un node.
PS No cal fer-ho al principi. - A continuació, pensant en el vessant legal, vaig conèixer la llei 152-FZ, que deia alguna cosa com el següent: "Les dades personals dels ciutadans de la Federació de Rússia s'han d'emmagatzemar al territori de la Federació de Rússia", en cas contrari multes, que no volia. Vaig decidir abordar aquests problemes abans que em vinguessin des de dalt :).
Inspirat Sobre la migració de la infraestructura d'Amazon Web Services a Yandex.Cloud, vaig decidir estudiar la pila Yandex amb més detall.
Per a mi, les característiques clau de Yandex.Cloud eren les següents:
- 2-3 vegades més barat (segons l'article anterior i les llistes de preus públiques)
- , que el gran Amazones encara no pot aconseguir.
Vaig estudiar altres competidors d'aquest servei, però en aquell moment Yandex estava guanyant.
T'he parlat de mi, perquè ens poguem mans a l'obra.
Pas 0. Prepareu el lloc
En primer lloc, necessitem un lloc web que volem col·locar a Internet. Com que sóc desenvolupador d'Angular, faré una plantilla senzilla d'aplicació SPA, que després publicaré a Internet.
PS Qui entén Angular o coneix la seva documentació , anar a .
Instal·lem Angular-CLI per crear llocs SPA a Angular:
npm install -g @angular/cliCreem una aplicació Angular amb l'ordre següent:
ng new angular-habr-object-storageA continuació, aneu a la carpeta de l'aplicació i inicieu-la per comprovar-ne la funcionalitat:
cd angular-habr-object-storage
ng serve --open
L'aplicació s'ha creat, però encara no està preparada per a l'allotjament. Muntem l'aplicació en una petita compilació (Producció) per eliminar totes les coses innecessàries i deixar només els fitxers necessaris.
A Angular podeu fer-ho amb la següent comanda:
ng build --prodCom a resultat d'aquesta ordre, va aparèixer una carpeta a l'arrel de l'aplicació dist amb el nostre lloc web.
Obres. Ara passem a l'allotjament.
Pas 1.
Anem al lloc i feu clic al botó "Connexió".
Nota:
- Per utilitzar el servei Yandex, és possible que necessiteu el correu Yandex (però això no és segur)
- Per a algunes funcions, haureu de dipositar diners al vostre compte al vostre compte personal (mínim 500 rubles).
Després del registre i l'autorització exitosos, estem al vostre compte personal.
A continuació, a l'esquerra del menú, heu de trobar el servei "Emmagatzematge d'objectes", que utilitzarem per allotjar el lloc.
Breument en termes:
- Object Storage és un emmagatzematge de fitxers compatible amb la tecnologia similar d'AWS S3 d'Amazon, que també té la seva pròpia API per gestionar l'emmagatzematge des del codi i, com AWS S3, es pot utilitzar per allotjar un lloc estàtic.
- A Object Storage creem "cubs" (cubs), que són àrees d'emmagatzematge separades per als nostres fitxers.
Creem-ne un. Per fer-ho, a la consola de servei, feu clic al botó "Crea cub".
El formulari per crear un cub té els camps següents, anem a repassar-los:
- Nom del cub. Per simplificar, anomenem el projecte igual que Angular -
angular-habr-object-storage - Màx. mida. Apostem tant com pesi el nostre lloc, ja que el lloc no s'emmagatzema gratuïtament i per cada gigabyte assignat, pagarem a Yandex un bon cèntim.
- Accés per llegir objectes. L'hem configurat a "Públic", ja que l'usuari ha de rebre cada fitxer del nostre lloc estàtic per tal que el disseny s'hi pugui dibuixar correctament, es puguin processar scripts, etc.
- Accés a la llista d'objectes i Accés a la configuració de lectura. Deixeu-lo com a "Limitat". Això és necessari per utilitzar el cub com a emmagatzematge intern de fitxers per a les aplicacions.
- Classe d'emmagatzematge. Deixeu-lo com a "Estàndard". Això vol dir que el nostre lloc serà visitat amb freqüència i, per tant, els fitxers que componen el lloc es baixaran amb freqüència. A més, l'element afecta el rendiment i el pagament (insereix l'enllaç).
Feu clic a "Crea un cub" i es crearà el cub.
Ara hem de pujar el nostre lloc al bucket. La manera més senzilla és obrir una carpeta propera dist el nostre lloc i arrossegueu-lo directament a la pàgina mitjançant les nanses. Això és més convenient que fer clic al botó "Carga objectes", perquè en aquest cas les carpetes no es transfereixen i les hauràs de crear manualment en la seqüència correcta.
Per tant, el lloc es carrega a l'emmagatzematge, de manera que podem oferir als usuaris l'oportunitat d'accedir a l'emmagatzematge com a lloc web.
Per fer-ho, a la part esquerra del menú, feu clic a la pestanya "Lloc web".
A la pàgina per configurar un cub com a lloc, seleccioneu la pestanya "Allotjament". Aquí indiquem la pàgina principal del lloc, normalment index.html. Si teniu una aplicació SPA, probablement tots els errors també es processin a la pàgina principal, de manera que també indicarem index.html a la pàgina d'errors.
Immediatament veiem des de quin enllaç es podrà accedir al nostre lloc. Feu clic a desa.
Al cap d'uns 5 minuts, fent clic a l'enllaç, veiem que el nostre lloc ja està disponible per a tothom.
Gràcies a tots els que heu llegit fins al final! Aquest és el meu primer article, tinc previst descriure amb més detall altres serveis Yandex i la seva integració amb les tecnologies d'interfície i backend.
Escriviu als comentaris com us interessa conèixer altres serveis Yandex o l'ús d'Angular en el desenvolupament modern.
Font: www.habr.com
