¡Hola, Habr!
En este artículo, le diré cómo alojar de manera fácil y sencilla un sitio web estático utilizando tecnologías Yandex, a saber Almacenamiento de objetos.
Al final, tendrá un sitio web alojado en la web al que se podrá acceder a través de un enlace externo.
Este artículo te será útil si
- Un desarrollador principiante que recién está aprendiendo a programar;
- Un desarrollador que ha creado un portafolio y quiere ponerlo en el dominio público para mostrárselo a amigos y empleadores.
Acerca de mí
Recientemente, estuve desarrollando un servicio SaaS, una especie de mercado donde la gente encuentra entrenadores deportivos para su entrenamiento personal. Se utilizó 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.
Encontré los siguientes problemas:
- AWS consumía mucho dinero. Después de haber trabajado durante 3 años en empresas empresariales, me acostumbré a placeres como Docker, Kubernetes, CI/CD, implementación azul y verde y, como aspirante a programador de startups, quería implementar lo mismo. Como resultado, llegué a la conclusión de que AWS consumía entre 300 y 400 dólares mensuales. Kubernetes resultó ser el más caro, unos 100 dólares, con un salario mínimo de un clúster y un nodo.
PD: No es necesario hacer esto al principio. - Luego, pensando en el aspecto legal, conocí la ley 152-FZ, que decía algo como lo siguiente: "Los datos personales de los ciudadanos de la Federación de Rusia deben almacenarse en el territorio de la Federación de Rusia"De lo contrario, multas que no quería. Decidí abordar estos problemas antes de que me llegaran desde arriba :).
Inspirado En cuanto a la migración de infraestructura de Amazon Web Services a Yandex.Cloud, decidí estudiar la pila de Yandex con más detalle.
Para mí, las características clave de Yandex.Cloud fueron las siguientes:
- 2-3 veces más barato (según el artículo anterior y las listas de precios públicas)
- , que la gran Amazonía aún no puede lograr.
Estudié a otros competidores de este servicio, pero en ese momento Yandex estaba ganando.
Te he hablado de mí para que podamos ponernos manos a la obra.
Paso 0. Prepara el sitio
Primero, necesitamos un sitio web que queramos colocar en Internet. Como soy desarrollador de Angular, crearé una plantilla de aplicación SPA sencilla y luego la publicaré en Internet.
PD ¿Quién entiende Angular o conoce su documentación? , ir a .
Instalemos Angular-CLI para crear sitios SPA en Angular:
npm install -g @angular/cliCreemos una aplicación Angular usando el siguiente comando:
ng new angular-habr-object-storageA continuación, vaya a la carpeta de la aplicación y ejecútela para comprobar su funcionalidad:
cd angular-habr-object-storage
ng serve --open
La aplicación ha sido creada, pero aún no está lista para hospedarse. Juntemos la aplicación en una compilación pequeña (Producción) para eliminar todo lo innecesario y dejar solo los archivos necesarios.
En Angular puedes hacer esto con el siguiente comando:
ng build --prodComo resultado de este comando, apareció una carpeta en la raíz de la aplicación. dist con nuestro sitio web.
Obras. Ahora pasemos al hosting.
Paso 1.
Ir al sitio web y haga clic en el botón “Conectar”.
Nota:
- Para utilizar el servicio Yandex, es posible que necesite el correo Yandex (pero esto no es seguro)
- Para algunas funciones, deberá depositar dinero en su cuenta personal (mínimo 500 rublos).
Después de un registro y autorización exitosos, estamos en su cuenta personal.
A continuación, a la izquierda del menú, debe encontrar el servicio "Almacenamiento de objetos", que utilizaremos para alojar el sitio.
Brevemente en términos:
- Object Storage es un almacenamiento de archivos compatible con la tecnología AWS S3 similar de Amazon, que también tiene su propia API para administrar el almacenamiento a partir de código y, al igual que AWS S3, se puede utilizar para alojar un sitio estático.
- En Object Storage creamos "buckets" (cubos), que son áreas de almacenamiento separadas para nuestros archivos.
Creemos uno de ellos. Para hacer esto, en la consola de servicio, haga clic en el botón "Crear depósito".
El formulario para crear un depósito tiene los siguientes campos, repasémoslos:
- Nombre del cubo. Para simplificar, llamemos al proyecto de la misma manera que Angular:
angular-habr-object-storage - Máx. tamaño. Apostamos tanto como pesa nuestro sitio, ya que el sitio no se almacena de forma gratuita y por cada gigabyte asignado le pagaremos a Yandex un centavo.
- Acceso para leer objetos. Lo configuramos en "Público", ya que el usuario debe recibir cada archivo de nuestro sitio estático para que el diseño se pueda dibujar correctamente en él, se puedan procesar los scripts, etc.
- Acceso a la lista de objetos y Acceso a lectura de configuraciones. Déjelo como "Limitado". Esto es necesario para utilizar el depósito como almacenamiento interno de archivos para aplicaciones.
- Clase de almacenamiento. Déjelo como "Estándar". Esto significa que nuestro sitio será visitado con frecuencia y por lo tanto los archivos que componen el sitio se descargarán con frecuencia. Además, el artículo afecta el rendimiento y el pago (insertar enlace).
Haga clic en "Crear un depósito" y se creará el depósito.
Ahora necesitamos cargar nuestro sitio en el depósito. La forma más sencilla es abrir una carpeta cercana. dist nuestro sitio y arrástrelo directamente a la página usando manijas. Esto es más conveniente que hacer clic en el botón "Cargar objetos", porque en este caso las carpetas no se transfieren y tendrás que crearlas manualmente en la secuencia correcta.
Entonces, el sitio se carga en el almacenamiento, por lo que podemos brindar a los usuarios la oportunidad de acceder al almacenamiento como un sitio web.
Para hacer esto, en el lado izquierdo del menú, haga clic en la pestaña "Sitio web".
En la página para configurar un depósito como sitio, seleccione la pestaña "Alojamiento". Aquí indicamos la página principal del sitio, normalmente index.html. Si tiene una aplicación SPA, probablemente todos los errores también se procesen en la página principal, por lo que también indicaremos index.html en la página de error.
Inmediatamente vemos a través de qué enlace se podrá acceder a nuestro sitio. Clic en Guardar.
Después de unos 5 minutos, haciendo clic en el enlace, vemos que nuestro sitio ya está disponible para todos.
¡Gracias a todos los que leyeron hasta el final! Este es mi primer artículo; planeo describir con más detalle otros servicios de Yandex y su integración con tecnologías frontend y backend.
Escriba en los comentarios si está interesado en conocer otros servicios de Yandex o sobre el uso de Angular en el desarrollo moderno.
Fuente: habr.com