Ola Habr!
Neste artigo, vouche dicir como aloxar de xeito sinxelo e sinxelo un sitio web estático usando tecnoloxías Yandex, a saber Almacenamento de obxectos.
Ao final, terás un sitio web aloxado na web ao que se poderá acceder a través dunha ligazón externa.
Este artigo será útil se vostede
- Un programador principiante que só está aprendendo a programar;
- Un programador que fixo unha carteira e quere colocala no dominio público para mostrala a amigos e empresarios.
Sobre min
Recentemente, estiven desenvolvendo un servizo SaaS, unha especie de mercado onde a xente atopa adestradores deportivos para o adestramento persoal. Utilizou a pila Amazon Web Services (en diante AWS). Pero canto máis me mergullaba no proxecto, máis matices aprendía sobre os diferentes procesos de organización dunha startup.
Atopei os seguintes problemas:
- AWS estaba a consumir moito diñeiro. Traballando durante 3 anos en empresas Enterprise, afaceime a alegrías como Docker, Kubernetes, CI/CD, implementación azul verde e, como aspirante a programador de startups, quería implementar o mesmo. Como resultado, cheguei á conclusión de que AWS consumía 300-400 dólares ao mes. Kubernetes resultou ser o máis caro, cuns 100 dólares, cun salario mínimo dun clúster e un nodo.
PS Non é necesario facelo ao principio. - A continuación, pensando no lado legal, souben da lei 152-FZ, que dicía algo así como o seguinte: "Os datos persoais dos cidadáns da Federación Rusa deben almacenarse no territorio da Federación Rusa", senón multas, que non quería. Decidín abordar estes problemas antes de que me chegasen dende arriba :).
Inspirado sobre a migración da infraestrutura de Amazon Web Services a Yandex.Cloud, decidín estudar a pila de Yandex con máis detalle.
Para min, as principais características de Yandex.Cloud foron as seguintes:
- 2-3 veces máis barato (segundo o artigo anterior e as listas de prezos públicos)
- , que o gran Amazonas aínda non pode conseguir.
Estudei outros competidores deste servizo, pero nese momento estaba gañando Yandex.
Falei de min, para que nos poñamos mans á obra.
Paso 0. Prepara o sitio
En primeiro lugar, necesitamos un sitio web que queremos colocar en Internet. Como son un programador de Angular, farei un modelo de aplicación SPA sinxelo, que despois publicarei en Internet.
PD Quen entende Angular ou coñece a súa documentación , Ir a .
Imos instalar Angular-CLI para crear sitios SPA en Angular:
npm install -g @angular/cliImos crear unha aplicación Angular usando o seguinte comando:
ng new angular-habr-object-storageA continuación, vai ao cartafol da aplicación e lánzaa para comprobar a súa funcionalidade:
cd angular-habr-object-storage
ng serve --open
A aplicación creouse, pero aínda non está lista para aloxarse. Imos montar a aplicación nunha pequena compilación (Produción) para eliminar todas as cousas innecesarias e deixar só os ficheiros necesarios.
En Angular podes facelo co seguinte comando:
ng build --prodComo resultado deste comando, apareceu un cartafol na raíz da aplicación dist coa nosa páxina web.
Obras. Agora imos pasar ao hospedaxe.
Paso 1.
Imos ao sitio e fai clic no botón "Conectar".
Nota:
- Para usar o servizo Yandex, pode que necesites o correo Yandex (pero isto non é certo)
- Para algunhas funcións terás que depositar diñeiro na túa conta na túa conta persoal (mínimo 500 rublos).
Despois do rexistro e autorización exitosos, estamos na súa conta persoal.
A continuación, á esquerda no menú, debes atopar o servizo "Almacenamento de obxectos", que utilizaremos para aloxar o sitio.
Brevemente en termos:
- O almacenamento de obxectos é un almacenamento de ficheiros compatible coa tecnoloxía AWS S3 similar de Amazon, que tamén ten a súa propia API para xestionar o almacenamento desde código e, como AWS S3, pódese usar para aloxar un sitio estático.
- En Object Storage creamos "buckets" (cubos), que son áreas de almacenamento separadas para os nosos ficheiros.
Imos crear un deles. Para iso, na consola de servizos, fai clic no botón "Crear cubo".
O formulario para crear un depósito ten os seguintes campos, imos percorrelos:
- Nome do cubo. Para simplificar, chamemos ao proxecto o mesmo que Angular -
angular-habr-object-storage - Máx. tamaño. Apostamos polo que pese o noso sitio, xa que o sitio non se almacena de forma gratuíta e por cada gigabyte asignado, pagaremos a Yandex un bonito centavo.
- Acceso para ler obxectos. Puxémolo en "Público", xa que o usuario debe recibir cada ficheiro do noso sitio estático para que o deseño poida debuxarse correctamente nel, se poidan procesar guións, etc.
- Acceso á lista de obxectos e Acceso á configuración de lectura. Déixao como "Limitado". Isto é necesario para usar o depósito como almacenamento de ficheiros interno para as aplicacións.
- Clase de almacenamento. Déixao como "Estándar". Isto significa que o noso sitio será visitado con frecuencia e, polo tanto, os ficheiros que compoñen o sitio descargaranse con frecuencia. Ademais, o elemento afecta o rendemento e o pago (inserir ligazón).
Fai clic en "Crear un cubo" e créase o balde.
Agora necesitamos cargar o noso sitio ao balde. O xeito máis sinxelo é abrir un cartafol preto dist noso sitio e arrástreo directamente á páxina usando asas. Isto é máis cómodo que facer clic no botón "Cargar obxectos", porque neste caso os cartafoles non se transfiren e terás que crealos manualmente na secuencia correcta.
Así, o sitio cárgase no almacenamento, polo que podemos ofrecer aos usuarios a oportunidade de acceder ao almacenamento como un sitio web.
Para iso, no lado esquerdo do menú, fai clic na pestana "Sitio web".
Na páxina para configurar un balde como sitio, seleccione a pestana "Aloxamento". Aquí indicamos a páxina principal do sitio, normalmente index.html. Se tes unha aplicación SPA, probablemente todos os erros tamén se procesen na páxina principal, polo que tamén indicaremos index.html na páxina de erros.
Inmediatamente vemos a que ligazón se poderá acceder ao noso sitio. Fai clic en gardar.
Despois duns 5 minutos, facendo clic na ligazón, vemos que o noso sitio xa está dispoñible para todos.
Grazas a todos os que ledes ata o final! Este é o meu primeiro artigo; planeo describir outros servizos de Yandex e a súa integración coas tecnoloxías frontend e backend.
Escribe nos comentarios o teu interese en coñecer outros servizos de Yandex ou o uso de Angular no desenvolvemento moderno.
Fonte: www.habr.com