Cómo alojar un sitio web estático usando Yandex.Cloud Object Storage

¡Hola, Habr!


En este artículo, le diré lo fácil que es alojar un sitio estático utilizando tecnologías Yandex, a saber, almacenamiento de objetos .



Al final, tendrá un sitio alojado en la web al que podrá acceder a través de un enlace externo.



Este artículo será útil si



  • Desarrollador novato que recién está aprendiendo programación;
  • Un desarrollador que ha creado una cartera y desea que esté disponible públicamente para mostrarla a amigos y empleadores.


Sobre mí



Recientemente, desarrollé un servicio SaaS, una especie de mercado donde la gente encuentra entrenadores deportivos para entrenamiento personal. Usó la pila de Amazon Web Services (en adelante, AWS). Pero cuanto más me sumergí en el proyecto, más matices aprendí sobre los diferentes procesos de organización de una startup.



Me encontré con los siguientes problemas:



  • AWS estaba consumiendo mucho dinero. Después de trabajar durante 3 años en empresas empresariales, me acostumbré a placeres como Docker, Kubernetes, CI / CD, implementación azul verde y, como programador de inicio novato, quería implementar lo mismo. Como resultado, llegué a la conclusión de que AWS consumía entre 300 y 400 dólares mensuales. El más caro resultó ser Kubernetes, alrededor de 100 dólares, con un salario mínimo con un clúster y un nodo.

    PD: Al principio, no es necesario que haga esto.
  • Luego, pensando en el aspecto legal, me enteré de la Ley 152-FZ, que decía algo como lo siguiente: "Los datos personales de los ciudadanos de la Federación Rusa deben almacenarse en el territorio de la Federación Rusa" , de lo contrario multas, que no quería. Decidí abordar estos problemas hasta que me vino "desde arriba" :).


Amazon Web Services ., .



. :



  • 2-3 ( )
  • , .


, .



, .



0.



, . Angular , SPA , .



P.S. Angular https://angular.io/guide/setup-local, 1.



Angular-CLI SPA- :



npm install -g @angular/cli


Angular :



ng new angular-habr-object-storage


, :



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


Aplicación SPA Angular Static



, . (Production), .

:



ng build --prod


dist .



. .





1.



https://console.cloud.yandex.ru/ "".



:



  • ( )
  • ( 500 ).


, .



Interfaz de cuenta personal de Yandex.Cloud



"Object Storage", .



:



  • Object Storage — , AWS S3, API AWS S3 .
  • Object Storage "" (bucket / ), .


Interfaz de servicio Yandex.Cloud Object Storage



. " ".



Interfaz para crear un depósito en Yandex.Cloud



, :



  • . , — angular-habr-object-storage
  • . . , , , .
  • . "", , , .
  • . "". , .
  • . "". , , , . ( ).


" " .



Yandex.Cloud Bucket creado



. — dist . , " ", .



Subió nuestro sitio web al depósito



, , , .

"-".



Configurar un depósito para un sitio web



, "". , index.html. SPA , , index.html.



, . .



5, .



Alojamiento de aplicaciones angulares con Yandex.Cloud Object Storage



! , frontend backend .



Escriba en los comentarios lo interesante que es para usted aprender sobre otros servicios de Yandex o sobre el uso de Angular en el desarrollo moderno.




All Articles