Crear una presencia en línea es un aspecto clave de cualquier negocio. En los últimos años, la industria ha pasado de las aplicaciones instalables a las aplicaciones web. Este cambio ha supuesto muchos beneficios tanto para los usuarios como para los desarrolladores: los usuarios ahora pueden acceder a las aplicaciones desde cualquier dispositivo con un navegador y los desarrolladores ahora pueden centrarse en crear la aplicación en lugar de preocuparse por la infraestructura necesaria para alojarla. A lo largo de los años, se han desarrollado muchas estrategias y tecnologías para facilitar el desarrollo de aplicaciones web. En esta serie de artículos analizaremos uno de ellos: una aplicación Full Stack nativa de la nube de AWS que utilice las siguientes tecnologías:
Esta publicación asume que tiene Node y Yarn instalados en su máquina. Si no los tiene instalados, puede descargarlos desde aquí y aquí. El nodo 18 se utilizará a lo largo de este artículo. El AWS CDK se utilizará para implementar la aplicación. Si no la tiene instalada, puede instalarla con el siguiente comando:
A lo largo de este artículo, se crearán los recursos de AWS. Para ello, también se necesita una cuenta de AWS. Si no tiene una cuenta de AWS, puede crear una aquí. Para comprender mejor los costos asociados a los recursos que se crearán, puede consultar los precios de cada servicio aquí.
La CLI de AWS se utilizará para interactuar con AWS. Si no la tiene instalada, puede instalarla de la siguiente manera esto guía.
Una vez instalado, debe configurarse con las credenciales de un usuario de AWS que tenga los permisos necesarios para crear los recursos que se utilizarán en este artículo. Si no tiene un usuario de AWS con los permisos necesarios, puede crear uno de los siguientes esto guía.
El código completo de este artículo se encuentra en su repositorio.
Para resolver el desafío en cuestión, utilizaremos un conjunto de tecnologías que se utilizan ampliamente en la industria. Este es un diagrama de alto nivel de lo que se desarrollará:
La parte delantera será un Reacciona aplicación alojada en AWS S3 y servida mediante AWS CloudFront. React es una biblioteca de JavaScript para crear interfaces de usuario mantenida por Facebook y una gran comunidad de desarrolladores. Esta biblioteca se basa en el concepto de componentes. Los componentes son fragmentos de código reutilizables que se pueden usar para crear interfaces de usuario. Una vez compiladas, las aplicaciones de React son solo un conjunto de archivos estáticos que pueden ser servidos por cualquier servidor web, lo que hace que sea muy fácil alojarlas COMO S3. S3 es un servicio de almacenamiento en la nube que se puede utilizar para almacenar cualquier tipo de objetos o archivos. Es un servicio muy económico y fiable que también proporciona la funcionalidad de servidor web que necesitamos.
El back-end será un Node.js API REST que se alojará en AWS Lambda y se sirve usando Puerta de enlace de API de AWS. Node.js es un entorno de ejecución de JavaScript que permite a los desarrolladores ejecutar código JavaScript fuera del navegador.
Tanto la parte delantera como la trasera estarán encabezadas por un CloudFront distribución. CloudFront es una capa de red de entrega de contenido (CDN) que permite distribuir los activos desde ubicaciones periféricas de todo el mundo. Sin embargo, en este caso, se utilizará principalmente para terminar las conexiones SSL y (junto con Ruta 53) proporcionan un nombre de dominio personalizado.
Para proteger toda la aplicación, utilizaremos AWS Cognito. AWS Cognito es un servicio de identidad totalmente gestionado que permite a los desarrolladores añadir el registro, el inicio de sesión y el control de acceso de los usuarios a las aplicaciones web y móviles de forma rápida y sencilla.
Por último, utilizaremos AWS DynamoDB como nuestra base de datos. DynamoDB es un servicio de bases de datos NoSQL totalmente gestionado que proporciona un rendimiento rápido y predecible con una escalabilidad perfecta.
Para inicializar la aplicación React, utilizaremos Vite. Vite es una herramienta de creación rápida que proporciona una excelente experiencia para los desarrolladores.
Vamos a crear un nuevo directorio para nuestro proyecto e inicialicemos la aplicación React con los siguientes comandos:
Como sugiere la CLI de Vite, ahora instalaremos las dependencias e iniciaremos el servidor de desarrollo:
Si la instalación se realizó correctamente, debería ver un mensaje como el siguiente:
Ahora puede abrir su navegador y navegar hasta http://localhost:5173/ para ver la aplicación React ejecutándose.
Ahora que hemos inicializado nuestra aplicación React, inicializaremos el proyecto CDK que se utilizará para implementar la aplicación en AWS. Kit de desarrollo en la nube de AWS (CDK) es un marco que permite a los desarrolladores definir la infraestructura mediante código. Es compatible con varios lenguajes de programación, pero en este artículo utilizaremos TypeScript.
Volvamos al directorio raíz de nuestro proyecto e inicialicemos el proyecto del CDK con los siguientes comandos:
Esto creará un nuevo directorio llamado cdk e inicializará un CDK proyecto en su interior.
Lo primero que tendrás que hacer después de inicializar un proyecto es arrancarlo. Esto creará un bucket en su cuenta de AWS que se utilizará para almacenar los activos que utilizará el proyecto CDK. Para hacerlo, ejecute el siguiente comando:
Abre el archivo cdk/bin/cdk.ts y cambie el nombre de la pila a su gusto cambiando el segundo parámetro del Pila de CDK constructor. Para implementar la pila, ejecuta el siguiente comando:
Esto implementará la pila en su cuenta y región de AWS predeterminadas. Si desea implementarlo en una cuenta o región diferente, puede usar el —perfil y —región banderas, respectivamente.
Como se mencionó anteriormente, utilizaremos AWS S3 para alojar nuestra aplicación React compilada. Sin embargo, veremos que S3 por sí solo puede ayudarnos a alojar nuestra aplicación, pero no satisfará todas nuestras necesidades (más sobre esto en las siguientes secciones). Para ello, necesitaremos usar CloudFront y Route53.
Para empezar a crear recursos, actualicemos nuestra pila. Abre el archivo cdk/lib/cdk-stack.ts y añada el siguiente código al Pila de CDK clase:
El código anterior creará un bucket configurado para tener acceso público y servir el archivo. index.html cuando se solicita la raíz del bucket. Puede verificarlo abriendo la consola de AWS y navegando hasta el servicio S3. Debería ver un bucket llamado bucket de sitio web en la lista de cubos. Si subes un archivo HTML válido llamado index.html al bucket, deberías poder acceder a él mediante la URL del bucket (esta se puede recuperar consultando la pestaña de propiedades del bucket, justo al final).
Incluso puedes hacer un esfuerzo adicional y adjuntar un dominio de Route 53, lo que te permitirá publicar tu página dentro de tu dominio favorito. Sin embargo, si observas detenidamente tu navegador, es posible que notes que te está avisando de que la conexión no es segura. Esto se debe a que el bucket se sirve mediante HTTP en lugar de HTTPS. Esto no se puede resolver con el propio bucket (el alojamiento de sitios web de S3 solo permite el uso de HTTP), pero se puede resolver con CloudFront. Como se ha dicho, CloudFront es una red de entrega de contenido (CDN) que se puede usar para servir contenido de diferentes fuentes, incluidos cubos de S3, instancias EC2 o incluso otras CDN. Además del almacenamiento en caché, CloudFront también proporciona la terminación SSL, lo que nos permite servir nuestro contenido mediante HTTPS.
Volvamos a nuestra pila y añadamos el siguiente código al Pila de CDK clase:
De nuevo, puede verificarlo yendo a la consola de AWS y navegando hasta el servicio CloudFront. Debería ver una distribución llamada distribución de sitios web en la lista de distribuciones. La primera propiedad que se muestre debe ser su nombre DNS. Si abres esa URL en tu navegador, deberías ver la misma página que antes, pero ahora se publica mediante HTTPS (no te preocupes, añadiremos una URL fácil de usar más adelante).
Lo único que tenemos que hacer es crear la aplicación y subir los archivos de compilación estáticos al bucket. La creación de la aplicación es solo cuestión de ejecutar el siguiente comando:
Esto creará un distensión directorio en el front-end directorio que contiene todos los archivos que deben cargarse al bucket.
Para subir los archivos al bucket, utilizaremos la CLI de AWS. Para hacerlo, ejecute el siguiente comando:
Debería poder ver la aplicación React ejecutándose si navega hasta la URL de CloudFront.
Ahora que tenemos nuestra aplicación en ejecución, podemos agregarle un dominio personalizado. Para ello, utilizaremos Route 53. Route 53 es un servicio de DNS que se puede usar para registrar dominios y administrar registros de DNS.
Registrar un dominio está fuera del alcance de este artículo, pero puedes encontrar más información al respecto aquí. Esta publicación asume que ya tienes un dominio registrado y una zona alojada configurada para usarlo.
Hay varios pasos necesarios para lograrlo.
1. Actualice la configuración del bucket para hacerlo privado e inhabilite la funcionalidad del servidor web
2. Obtenga una instancia de la zona alojada
Las zonas alojadas son específicas de cada región, así que asegúrate de usar la misma región en la que está registrado el dominio. Para ello, descomente la siguiente línea en bin.cdk.ts y asegúrese de tener configuradas las variables de entorno.
3. Genere un certificado para el dominio:
4. Actualice la distribución para usar el nombre de dominio y el certificado
5. Agregue un registro DNS a la zona hospedada para que apunte a la distribución
Tras implementar la pila, debería poder acceder a la aplicación mediante el nombre de dominio.
Si alguna vez deseas eliminar todos los recursos creados, puedes hacerlo ejecutando el siguiente comando:
En el siguiente artículo de esta serie, agregaremos lógica de back-end para ofrecer contenido dinámico, así como autenticación y persistencia.
Crear una presencia en línea es un aspecto clave de cualquier negocio. En los últimos años, la industria ha pasado de las aplicaciones instalables a las aplicaciones web. Este cambio ha supuesto muchos beneficios tanto para los usuarios como para los desarrolladores: los usuarios ahora pueden acceder a las aplicaciones desde cualquier dispositivo con un navegador y los desarrolladores ahora pueden centrarse en crear la aplicación en lugar de preocuparse por la infraestructura necesaria para alojarla. A lo largo de los años, se han desarrollado muchas estrategias y tecnologías para facilitar el desarrollo de aplicaciones web. En esta serie de artículos analizaremos uno de ellos: una aplicación Full Stack nativa de la nube de AWS que utilice las siguientes tecnologías:
Esta publicación asume que tiene Node y Yarn instalados en su máquina. Si no los tiene instalados, puede descargarlos desde aquí y aquí. El nodo 18 se utilizará a lo largo de este artículo. El AWS CDK se utilizará para implementar la aplicación. Si no la tiene instalada, puede instalarla con el siguiente comando:
A lo largo de este artículo, se crearán los recursos de AWS. Para ello, también se necesita una cuenta de AWS. Si no tiene una cuenta de AWS, puede crear una aquí. Para comprender mejor los costos asociados a los recursos que se crearán, puede consultar los precios de cada servicio aquí.
La CLI de AWS se utilizará para interactuar con AWS. Si no la tiene instalada, puede instalarla de la siguiente manera esto guía.
Una vez instalado, debe configurarse con las credenciales de un usuario de AWS que tenga los permisos necesarios para crear los recursos que se utilizarán en este artículo. Si no tiene un usuario de AWS con los permisos necesarios, puede crear uno de los siguientes esto guía.
El código completo de este artículo se encuentra en su repositorio.
Para resolver el desafío en cuestión, utilizaremos un conjunto de tecnologías que se utilizan ampliamente en la industria. Este es un diagrama de alto nivel de lo que se desarrollará:
La parte delantera será un Reacciona aplicación alojada en AWS S3 y servida mediante AWS CloudFront. React es una biblioteca de JavaScript para crear interfaces de usuario mantenida por Facebook y una gran comunidad de desarrolladores. Esta biblioteca se basa en el concepto de componentes. Los componentes son fragmentos de código reutilizables que se pueden usar para crear interfaces de usuario. Una vez compiladas, las aplicaciones de React son solo un conjunto de archivos estáticos que pueden ser servidos por cualquier servidor web, lo que hace que sea muy fácil alojarlas COMO S3. S3 es un servicio de almacenamiento en la nube que se puede utilizar para almacenar cualquier tipo de objetos o archivos. Es un servicio muy económico y fiable que también proporciona la funcionalidad de servidor web que necesitamos.
El back-end será un Node.js API REST que se alojará en AWS Lambda y se sirve usando Puerta de enlace de API de AWS. Node.js es un entorno de ejecución de JavaScript que permite a los desarrolladores ejecutar código JavaScript fuera del navegador.
Tanto la parte delantera como la trasera estarán encabezadas por un CloudFront distribución. CloudFront es una capa de red de entrega de contenido (CDN) que permite distribuir los activos desde ubicaciones periféricas de todo el mundo. Sin embargo, en este caso, se utilizará principalmente para terminar las conexiones SSL y (junto con Ruta 53) proporcionan un nombre de dominio personalizado.
Para proteger toda la aplicación, utilizaremos AWS Cognito. AWS Cognito es un servicio de identidad totalmente gestionado que permite a los desarrolladores añadir el registro, el inicio de sesión y el control de acceso de los usuarios a las aplicaciones web y móviles de forma rápida y sencilla.
Por último, utilizaremos AWS DynamoDB como nuestra base de datos. DynamoDB es un servicio de bases de datos NoSQL totalmente gestionado que proporciona un rendimiento rápido y predecible con una escalabilidad perfecta.
Para inicializar la aplicación React, utilizaremos Vite. Vite es una herramienta de creación rápida que proporciona una excelente experiencia para los desarrolladores.
Vamos a crear un nuevo directorio para nuestro proyecto e inicialicemos la aplicación React con los siguientes comandos:
Como sugiere la CLI de Vite, ahora instalaremos las dependencias e iniciaremos el servidor de desarrollo:
Si la instalación se realizó correctamente, debería ver un mensaje como el siguiente:
Ahora puede abrir su navegador y navegar hasta http://localhost:5173/ para ver la aplicación React ejecutándose.
Ahora que hemos inicializado nuestra aplicación React, inicializaremos el proyecto CDK que se utilizará para implementar la aplicación en AWS. Kit de desarrollo en la nube de AWS (CDK) es un marco que permite a los desarrolladores definir la infraestructura mediante código. Es compatible con varios lenguajes de programación, pero en este artículo utilizaremos TypeScript.
Volvamos al directorio raíz de nuestro proyecto e inicialicemos el proyecto del CDK con los siguientes comandos:
Esto creará un nuevo directorio llamado cdk e inicializará un CDK proyecto en su interior.
Lo primero que tendrás que hacer después de inicializar un proyecto es arrancarlo. Esto creará un bucket en su cuenta de AWS que se utilizará para almacenar los activos que utilizará el proyecto CDK. Para hacerlo, ejecute el siguiente comando:
Abre el archivo cdk/bin/cdk.ts y cambie el nombre de la pila a su gusto cambiando el segundo parámetro del Pila de CDK constructor. Para implementar la pila, ejecuta el siguiente comando:
Esto implementará la pila en su cuenta y región de AWS predeterminadas. Si desea implementarlo en una cuenta o región diferente, puede usar el —perfil y —región banderas, respectivamente.
Como se mencionó anteriormente, utilizaremos AWS S3 para alojar nuestra aplicación React compilada. Sin embargo, veremos que S3 por sí solo puede ayudarnos a alojar nuestra aplicación, pero no satisfará todas nuestras necesidades (más sobre esto en las siguientes secciones). Para ello, necesitaremos usar CloudFront y Route53.
Para empezar a crear recursos, actualicemos nuestra pila. Abre el archivo cdk/lib/cdk-stack.ts y añada el siguiente código al Pila de CDK clase:
El código anterior creará un bucket configurado para tener acceso público y servir el archivo. index.html cuando se solicita la raíz del bucket. Puede verificarlo abriendo la consola de AWS y navegando hasta el servicio S3. Debería ver un bucket llamado bucket de sitio web en la lista de cubos. Si subes un archivo HTML válido llamado index.html al bucket, deberías poder acceder a él mediante la URL del bucket (esta se puede recuperar consultando la pestaña de propiedades del bucket, justo al final).
Incluso puedes hacer un esfuerzo adicional y adjuntar un dominio de Route 53, lo que te permitirá publicar tu página dentro de tu dominio favorito. Sin embargo, si observas detenidamente tu navegador, es posible que notes que te está avisando de que la conexión no es segura. Esto se debe a que el bucket se sirve mediante HTTP en lugar de HTTPS. Esto no se puede resolver con el propio bucket (el alojamiento de sitios web de S3 solo permite el uso de HTTP), pero se puede resolver con CloudFront. Como se ha dicho, CloudFront es una red de entrega de contenido (CDN) que se puede usar para servir contenido de diferentes fuentes, incluidos cubos de S3, instancias EC2 o incluso otras CDN. Además del almacenamiento en caché, CloudFront también proporciona la terminación SSL, lo que nos permite servir nuestro contenido mediante HTTPS.
Volvamos a nuestra pila y añadamos el siguiente código al Pila de CDK clase:
De nuevo, puede verificarlo yendo a la consola de AWS y navegando hasta el servicio CloudFront. Debería ver una distribución llamada distribución de sitios web en la lista de distribuciones. La primera propiedad que se muestre debe ser su nombre DNS. Si abres esa URL en tu navegador, deberías ver la misma página que antes, pero ahora se publica mediante HTTPS (no te preocupes, añadiremos una URL fácil de usar más adelante).
Lo único que tenemos que hacer es crear la aplicación y subir los archivos de compilación estáticos al bucket. La creación de la aplicación es solo cuestión de ejecutar el siguiente comando:
Esto creará un distensión directorio en el front-end directorio que contiene todos los archivos que deben cargarse al bucket.
Para subir los archivos al bucket, utilizaremos la CLI de AWS. Para hacerlo, ejecute el siguiente comando:
Debería poder ver la aplicación React ejecutándose si navega hasta la URL de CloudFront.
Ahora que tenemos nuestra aplicación en ejecución, podemos agregarle un dominio personalizado. Para ello, utilizaremos Route 53. Route 53 es un servicio de DNS que se puede usar para registrar dominios y administrar registros de DNS.
Registrar un dominio está fuera del alcance de este artículo, pero puedes encontrar más información al respecto aquí. Esta publicación asume que ya tienes un dominio registrado y una zona alojada configurada para usarlo.
Hay varios pasos necesarios para lograrlo.
1. Actualice la configuración del bucket para hacerlo privado e inhabilite la funcionalidad del servidor web
2. Obtenga una instancia de la zona alojada
Las zonas alojadas son específicas de cada región, así que asegúrate de usar la misma región en la que está registrado el dominio. Para ello, descomente la siguiente línea en bin.cdk.ts y asegúrese de tener configuradas las variables de entorno.
3. Genere un certificado para el dominio:
4. Actualice la distribución para usar el nombre de dominio y el certificado
5. Agregue un registro DNS a la zona hospedada para que apunte a la distribución
Tras implementar la pila, debería poder acceder a la aplicación mediante el nombre de dominio.
Si alguna vez deseas eliminar todos los recursos creados, puedes hacerlo ejecutando el siguiente comando:
En el siguiente artículo de esta serie, agregaremos lógica de back-end para ofrecer contenido dinámico, así como autenticación y persistencia.
Lorem ipsum dolor sit amet consectetur. Sit sit vel eu sed proin. Arcu bibendum in mauris urna erat magna volutpat eget. Lectus commodo consectetur egestas quis ut lobortis nunc.
.png)
Lorem ipsum dolor sit amet consectetur. Sit sit vel eu sed proin. Arcu bibendum in mauris urna erat magna volutpat eget. Lectus commodo consectetur egestas quis ut lobortis nunc.
.jpeg)
