Cómo alojar un sitio estático en la nube en cuatro pasos

Los sitios estáticos pueden albergar todo tipo de sitios web, desde su cartera personal hasta la página de inicio de una empresa o incluso un blog.

La principal ventaja de los sitios estáticos es que son fáciles de administrar. También son muy rentables. Y con los sitios estáticos, no necesita servicios complejos de administración de contenido (CMS) que se ejecutan en servidores todo el tiempo (incluso si no tiene tráfico).

En esta publicación, aprenderá a alojar un sitio web estático en la nube de AWS en 4 pasos, utilizando AWS Amplify y Route 53. ¿Y la mejor parte? No le costará casi nada todos los meses.

¿Qué es un sitio web estático?

Los sitios web estáticos son sitios web servidos desde un servidor de almacenamiento o una red de entrega de contenido (CDN). No es necesario tener un servidor en ejecución que cree los archivos HTML.

Estos sitios web están preconstruidos como archivos HTML que se almacenan en algún lugar de Internet y luego se sirven como se crearon.

Los sitios estáticos pueden tener contenido dinámico, pero se maneja en el lado del cliente mediante JavaScript o algunas integraciones de terceros mediante API.

Algunos beneficios de usar un sitio estático son:

  • Son fáciles de escalar
  • Si usa una CDN, los tiempos de carga son rápidos
  • Son rentables
  • Son fáciles de mantener

Por ejemplo, mi sitio web personal es un buen ejemplo de un sitio estático:

Sitio web personal de Marcia

¿Qué es AWS?

AWS son las siglas de Amazon Web Services y es la plataforma en la nube más adoptada. Tiene muchos servicios diferentes para ayudarlo a desarrollar y alojar sus aplicaciones.

AWS también tiene centros de datos en todo el mundo y millones de clientes lo utilizan.

Al usar la nube para sus aplicaciones, reducirá los costos, lo ayudará a ser más ágil y le permitirá innovar más rápido que si estuviera usando sus propios servidores locales.

Paso 1: configure su cuenta de AWS

El primer paso de este proceso es obtener una cuenta de AWS. Vas a alojar tu página estática en la nube, y para eso debes tener una cuenta AWS válida.

Si acaba de crear su cuenta, el nivel gratuito debería ser suficiente para este proyecto. El nivel gratuito le dará acceso a una gran cantidad de servicios de AWS de forma gratuita durante los primeros 12 meses.

Por ejemplo, obtendrá 5 GB de almacenamiento gratuito. Eso es genial, ya que necesitamos almacenamiento para guardar nuestro sitio estático en la nube.

Tenga en cuenta que tener una cuenta de AWS es gratis si no utiliza ningún servicio. No se le cobrará por crear la cuenta y, si no la usa, no se le cobrará nada.

Para crear una cuenta de AWS, puede seguir los pasos de este video:

Paso 2: cree su sitio estático y configúrelo con AWS Amplify

Ahora mismo, después de leer ese titular, es posible que se pregunte: ¿qué es AWS Amplify?

AWS Amplify es un marco de código abierto que proporciona funciones para ayudarlo a crear aplicaciones móviles y web nativas de la nube. Tiene 4 componentes:

  • la CLI de Amplify
  • las bibliotecas Amplify
  • los componentes de la interfaz de usuario de Amplify, y
  • la Consola Amplify.

La CLI de Amplify lo ayuda a configurar todos los servicios que necesita para crear un backend en la nube para su aplicación utilizando la interfaz de línea de comandos.

Las bibliotecas lo ayudan a integrar sus aplicaciones cliente directamente con los servicios de backend.

Los componentes de Amplify UI son bibliotecas de UI específicas para React, React Native, Angular, Ionic y Vue que lo ayudarán a desarrollar fácilmente su aplicación nativa de la nube.

Por último, Amplify Console es un servicio de AWS que proporciona un flujo de trabajo basado en git para la implementación continua y para alojar aplicaciones web y móviles de pila completa.

En esta publicación no vamos a utilizar todas las capacidades de AWS Amplify, solo vamos a utilizar la Consola. Pero le recomiendo que consulte algunos tutoriales sobre cómo crear aplicaciones más complejas con AWS Amplify.

Crea el sitio estático

Ahora, tiene todo lo que necesita para comenzar con su sitio estático. Para esta demostración, funcionará cualquier HTML estático. Acabo de crear un archivo llamado index.html y agregué este código dentro de él:

Hello Foobar

This is my super simple site

Súbelo a la consola de AWS Amplify

Una vez que tenemos el sitio estático, el siguiente paso es ir al servicio AWS Amplify en la consola de AWS.

Encontrar el servicio AWS Amplify en la consola de AWS

Luego, cuando se abra ese servicio, verá algo como esto:

Consola de AWS Amplify

Haga clic en el botón Conectar la aplicación y luego se le presentará esta página:

Opciones para implementar su proyecto existente

Luego, puede seleccionar Implementar sin un proveedor de Git y continuar.

Se le presentará una página para implementar manualmente su aplicación. Allí, eliges un nombre de aplicación y un nombre de entorno y luego puedes arrastrar la carpeta de tu aplicación al navegador.

Inicio de una implementación manual en AWS Amplify

Cuando la aplicación termine de cargarse, verá un mensaje que dice "Implementación completada con éxito".

Ahora su sitio web está alojado en la nube. Vaya al enlace que se encuentra debajo del texto del dominio . Eso lo llevará a su sitio estático recién implementado.

Paso 3: compre un dominio para su sitio web

Ahora es el momento de obtener un dominio para su sitio web. Compartir ese enlace de dominio no es muy práctico y un dominio puede ser una forma más sencilla de nombrar su sitio web.

Para eso, debe ingresar a su cuenta de AWS a un servicio llamado Route53.

Encontrar el servicio Route53 en la consola de AWS

Luego, cuando se abre Route 53, puede ir a un enlace que dice Registrar dominio y aparece una página como esta.

Aquí debe elegir un nombre de dominio. Los dominios se facturan anualmente y tienen diferentes costos según el final (como .com, .net, etc.).

Después de elegir un nombre de dominio, puede agregarlo a la tarjeta. Luego, siga las instrucciones que proporciona Route53.

Paso 4: configure el dominio en su aplicación AWS Amplify

Ahora que tiene el dominio, es hora de volver a su aplicación AWS Amplify, la que acaba de configurar.

Luego, a la izquierda, hace clic en el enlace Administración de dominio y se abre esta página:

Agregar un dominio a su sitio

El cuadro de texto del dominio le sugerirá el dominio que acaba de registrar. Simplemente selecciónelo, acepte todas las configuraciones predeterminadas y luego haga clic en Guardar .

Después de eso, será dirigido a una página donde se configurará el dominio y el certificado SSL. No necesita hacer nada en ese paso, solo espere hasta que todo esté configurado. Toma un tiempo, así que ten paciencia.  

Ahora que ha terminado, puede ir a su nuevo dominio y ver su página estática.

Cómo actualizar este sitio

Ahora, cada vez que necesite cambiar algo en su sitio estático, debe ir a AWS Amplify y actualizar los archivos. Básicamente, solo colocará el directorio en la aplicación Amplify.

Actualizar su sitio estático

Conclusión

Ahora tienes un sitio estático alojado en la nube. Este sitio es muy escalable y confiable. El sitio está alojado usando AWS CDN llamado AWS CloudFormation, por lo que esto hará que su sitio sea muy rápido para sus usuarios.

El costo total de alojamiento después de que su cuenta de AWS tenga más de 12 meses será de alrededor de $ 0.50 USD a $ 4 USD por mes, según el tamaño de su sitio y la cantidad de tráfico que obtenga.

El otro costo anual que tendrá es el dominio que puede comenzar desde $ 9 USD por año.

Y si desea que esto sea un poco más automatizado, le recomiendo mirar las implementaciones automáticas de AWS Amplify usando Github.

Gracias por leer.

Soy Marcia Villalba, defensora de desarrolladores de AWS y presentadora de un canal de YouTube llamado FooBar, donde tengo más de 250 tutoriales en video sobre prácticas de ingeniería de software, AWS y sin servidor.

  • Gorjeo: //twitter.com/mavi888uy
  • Youtube: //youtube.com/foobar_codes