🥇Cómo alojar un sitio estático utilizando Yandex.Cloud Object Storage

¡Hola, Habr!

En este artículo, les explicaré cómo alojar un sitio web estático de manera fácil y sencilla utilizando las tecnologías de Yandex, es decir, Object Storage.

Al final, tendrán un sitio web alojado en línea, accesible a través de un enlace externo.

Este artículo será útil si usted

Es un desarrollador principiante que está aprendiendo a programar;
Es un desarrollador que ha creado un portafolio y desea publicarlo para mostrarlo a amigos y empleadores.

Acerca de mí

Recientemente, desarrollé un servicio SaaS, similar a un mercado, donde las personas pueden encontrar entrenadores deportivos para entrenamientos personalizados. Utilicé la pila de Amazon Web Services (en adelante AWS). Pero cuanto más profundo me sumergía en el proyecto, más matices descubrí sobre los diferentes procesos de organización de una startup.

Me enfrenté a los siguientes problemas:

AWS consumía mucho dinero. Después de trabajar 3 años en empresas de gran escala, me acostumbré a cosas como Docker, Kubernetes, CI/CD, despliegue azul-verde, y, como un programador principiante en startups, quise implementar lo mismo. Al final, llegué a que mensualmente AWS consumía entre 300 y 400 dólares. Lo más caro fue Kubernetes, unos 100 dólares, con una mínima configuración de un cluster y un nodo.
P.D. Al principio no es necesario hacerlo así.
Después, reflexionando sobre el aspecto legal, supe de la ley 152-FZ, que decía más o menos lo siguiente: "Los datos personales de los ciudadanos de la Federación Rusa deben ser almacenados en el territorio de la Federación Rusa", de lo contrario, hay multas, algo que no quería. Decidí ocuparme de estos asuntos antes de que me llegara una notificación desde "arriba" : ).

Inspirado artículo por la migración de la infraestructura de Amazon Web Services a Yandex.Cloud, decidí estudiar la pila de Yandex más a fondo.

Para mí, las características clave de Yandex.Cloud eran las siguientes:

Más barato de 2 a 3 veces (según el artículo anterior y precios públicos)
Almacenamiento de datos personales de los usuarios en el territorio de la Federación Rusa, lo que el gran Amazon todavía no puede lograr.

Estudié a otros competidores de este servicio, pero en ese momento Yandex estaba ganando.

Después de compartir un poco sobre mí, podemos pasar al tema.

Paso 0. Prepararemos el sitio

Para comenzar, necesitaremos el sitio web que queremos alojar en Internet. Como soy un desarrollador de Angular, crearé una plantilla simple de una aplicación SPA, que luego alojaré en Internet.

P.D. Quien conozca Angular o sepa sobre su documentación https://angular.io/guide/setup-local, pase a Paso 1.

Instalaremos Angular-CLI para crear sitios SPA en Angular:

npm install -g @angular/cli

Crearemos una aplicación Angular utilizando el siguiente comando:

ng new angular-habr-object-storage

Luego pasamos a la carpeta de la aplicación y la iniciamos para verificar que funcione:

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

La aplicación ha sido creada, pero aún no está lista para ser alojada en un servidor. Compilaremos la aplicación en un pequeño build (Producción), para eliminar todo lo innecesario y dejar solo los archivos necesarios.
En Angular, esto se puede hacer con el siguiente comando:

ng build --prod

Como resultado de este comando, apareció una carpeta en la raíz de la aplicación dist con nuestro sitio web.

Funciona. Ahora pasamos al alojamiento.

Paso 1.

Visitemos el sitio https://console.cloud.yandex.ru/ y hacemos clic en el botón "Conectar".

Nota:

Para utilizar el servicio de Yandex, puede que necesitemos un correo de Yandex (aunque no es seguro)
Para algunas funciones, tendremos que depositar dinero en la cuenta de usuario (mínimo 500 rublos).

Después de un registro y autenticación exitosos, estamos en el panel de usuario.

Luego, en el menú de la izquierda, debemos encontrar el servicio "Object Storage", que vamos a utilizar para alojar el sitio web.

Resumiendo los términos:

Object Storage es un almacenamiento de archivos compatible con la tecnología similar de Amazon AWS S3, que también tiene su propia API para gestionar el almacenamiento desde el código y, al igual que AWS S3, se puede utilizar para alojar un sitio web estático.
En Object Storage creamos "buckets" (bucket / Canasta), que son almacenamientos separados para nuestros archivos.

Crearemos uno de ellos. Para esto, en la consola del servicio hacemos clic en el botón "Crear bucket".

En el formulario de creación del bucket hay los siguientes campos, los recorreremos:

Nombre del bucket. Para simplificar, lo llamaremos igual que el proyecto Angular — angular-habr-object-storage
Tamaño máximo. Establecemos tanto como pesa nuestro sitio, ya que el sitio no se almacena de forma gratuita y por cada gigabyte asignado, pagaremos a Yandex un pequeño monto.
Acceso para lectura de objetos. Establecemos "Público", ya que el usuario debe poder acceder a cada archivo de nuestro sitio web estático para que el diseño se renderice correctamente, los scripts funcionen, etc.
Acceso a la lista de objetos y Acceso a la lectura de configuraciones. Dejamos "Restringido". Esto es necesario para utilizar el bucket como un almacenamiento interno de archivos para aplicaciones.
Clase de almacenamiento. Dejamos "Estándar". Esto significa que nuestro sitio será visitado con frecuencia, lo que implica que los archivos que componen el sitio serán descargados con regularidad. Además, este aspecto influye en el rendimiento y el pago (insertar enlace).

Hacemos click en "Crear bucket" y el bucket ha sido creado.

Ahora necesitamos cargar nuestro sitio en el bucket. La forma más sencilla es abrir la carpeta de nuestro sitio al lado dist y arrastrar manualmente directamente a la página. Es más conveniente que hacer clic en el botón "Cargar objetos", porque en ese caso las carpetas no se transfieren y tendríamos que crearlas manualmente en el orden correcto.

Así que el sitio ha sido cargado en el almacenamiento, y ahora podemos ofrecer a los usuarios la posibilidad de acceder al almacenamiento como si fuera un sitio.
Para esto, a la izquierda en el menú, hacemos clic en la pestaña "Sitio web".

En la página de configuración del bucket como sitio, elegimos la pestaña "Alojamiento". Aquí especificamos la página principal del sitio, que generalmente es index.html. Si tienes una aplicación SPA, es probable que todos los errores también se manejen en la página principal, así que indicaremos index.html también en la página de error.

Vemos inmediatamente qué enlace estará disponible para nuestro sitio. Hacemos clic en guardar.

En unos 5 minutos, al ir al enlace, vemos que ahora nuestro sitio está disponible para todos.

¡Gracias a todos los que leyeron hasta el final! Este es mi primer artículo, planeo describir otros servicios de Yandex y su integración con tecnologías de frontend y backend.

Escriban en los comentarios cuánto les interesa conocer sobre otros servicios de Yandex o sobre el uso de Angular en el desarrollo moderno.

Fuente: habr.com