= Cómo usar AWS Amplify para implementar una aplicación React =
== Una guía para implementar aplicaciones React con AWS Amplify ==
Desde que comencé a consultar como ingeniero de software, he querido armar un sitio web de cartera que muestre los
Proyectos personales y profesionales en los que he trabajado. En estas vacaciones de invierno, pasé tiempo diseñando, desarrollando e implementando el sitio de mi cartera y, en este artículo, le mostraré cómo lo implementé con AWS Amplify. Puede ver el sitio web en dan-murphy.com y el código en GitHub.
= Breves antecedentes =
La mayor parte de mi trabajo profesional implica la creación de aplicaciones basadas en datos y la optimización de las canalizaciones de datos. Para realizar estas tareas, uso regularmente Python y Ruby e incorporo JavaScript para cualquier trabajo de interfaz. En un esfuerzo por sentirme más cómodo con React, decidí usar el marco para construir el sitio web de mi cartera.
= Configuración de la aplicación =
El primer paso que di fue decidir cómo estructurar la aplicación. yo utilicé
create-react-app como plantilla base para mis directorios y luego reestructuré la aplicación con algunas carpetas adicionales. La configuración finalizada se ve así:
origen
componentes
âÃÂÃÂarchivos
âÃÂÃÂextras
âÃÂÃÂdatos
âÃÂÃÂimgs
paginas
âÃÂÃÂcontenido
âÃÂÃÂdatos
estilos
pruebas
accesorios
Algunos de los cambios notables son la
**componentes**
, y
**páginas**
directorios.
**estilos**
,
: Aquí es donde almaceno todos los componentes de la aplicación. Al almacenar los componentes en una carpeta centralizada, es más fácil reutilizar y refactorizar mi código y más intuitivo para que otros lo entiendan. Algunos de los componentes que componen el sitio web de mi cartera son
componentes
Encabezamiento,
Pie de página, y
Barra lateral del proyecto.
: Aquí es donde construyo las distintas páginas para la aplicación. Importo los componentes necesarios desde el
paginas
carpeta y luego agregarlos para diseñar la página. Aquí hay un ejemplo de cómo hice esto para el
página de inicio de componentes:
: Aquí es donde defino estilos CSS globales para la aplicación. me encanta usar
estilos
componentes con estilo para componentes individuales, pero también lo he encontrado útil para crear estilos globales que están disponibles para cada página.
Por último, para asignar las solicitudes a las páginas correctas, usamos
reaccionar-enrutador-dom. Las rutas se definen en el
Archivo App.js como se muestra a continuación:
Esto mapeará
Página principal,
/solicitudes de proyectos a
Página de proyectos,
/acerca de las solicitudes a
Acerca de la página y
/solicitudes de estantería a
Página de libro. Ahora que el desarrollo de la aplicación está completo, ¡necesitamos implementarla para que otros puedan usarla!
/solicitudes a
= Implementación con AWS Amplify =
== Resumen ==
Hay varias formas de implementar un sitio web de React, pero he descubierto que una de las más simples es usar
**AWS Amplify Amplify se describe como la forma más rápida y sencilla de crear aplicaciones móviles y web escalables. Para lograr esto, AWS extrapola todas las complicaciones de configurar un servidor, instalar dependencias y crear una compilación de producción de su sitio web, lo que le permite concentrarse únicamente en crear una experiencia de usuario intuitiva. Para obtener más información sobre lo que ofrece AWS Amplify para aplicaciones basadas en datos (específicamente, sitios web con **frontend** y **backend, consulte su documentación.
== Conectando tu Repositorio ==
Para alojar su aplicación web en AWS Amplify, primero debe conectarse al repositorio que contiene su código fuente. Para ello, puede navegar a la
*AWS Amplify* *Primeros pasos* **Aloje mi aplicación web y haga clic en **Conectar repositorio de aplicaciones *página, desplácese hasta*página, desplácese hasta )
Luego, serás redirigido a una página separada donde puedes conectarte al repositorio que contiene tu código fuente. Para este ejemplo, elegiré GitHub, pero AWS Amplify también admite BitBucket, GitLab, AWS CodeCommit e incluso la implementación sin un proveedor de Git.
Después de una autorización exitosa, puede seleccionar qué repositorio desea implementar y seleccionar la rama que debe usar AWS Amplify para las compilaciones de producción.
Después de eso, haga clic en
**Siguiente** y AWS le pedirá que configure sus ajustes de *compilación* y *prueba*. La plantilla base que proporciona AWS se muestra a continuación.
versión 1
Interfaz:
etapas:
preconstruir:
comandos:
- compilación de instalación de npm:
comandos:
- compilación de ejecución de npm
artefactos:
directorio base: construir
archivos:
-
cache:
caminos:
- node_modules
Adicionalmente, bajo el
Alternar **configuración avanzada**, puede establecer variables de entorno y un contenedor de compilación personalizado.
Finalmente, después de revisar la configuración de su aplicación, haga clic en
**Guardar e implementar **y **AWS comenzará a configurar e implementar su aplicación. Cuando AWS termine de implementar, puede navegar a la página de inicio de Amplify y ver su aplicación recién implementada. AWS comenzará a configurar e implementar su aplicación. Cuando AWS termine de implementar, puede navegar a la página de inicio de Amplify y ver su aplicación recién implementada.
Ahora, vamos a personalizar la URL usando
**Gestión de dominios de AWS Amplify
== Agregar un dominio personalizado ==
Para comenzar a agregar un dominio personalizado, navegue a la barra lateral izquierda y seleccione
**administración de dominios
Configuración de **administración de dominio**.
Luego, seleccione
**agregar dominio **configurar dominio **ingrese su nombre de dominio (como se muestra a continuación) y haga clic**ingrese su nombre de dominio (como se muestra a continuación) y haga clic en 
Después de esto, puede configurar cualquier redireccionamiento que sea necesario para su dominio. Por ejemplo, en el siguiente ejemplo, creo una redirección de httpsdan-murphy.com a httpswww.dan-murphy.com.
Finalmente, después de que su dominio personalizado esté configurado correctamente, AWS le proporcionará un
**Certificado de validación También puede ver este certificado en la consola de AWS Certificate Manager.
== Agregar un registro CNAME ==
El último paso para configurar su dominio personalizado es agregar un registro CNAME. En el siguiente ejemplo, uso Google Domains, pero los conceptos fundamentales siguen siendo los mismos en diferentes registradores de dominios.
Primero, desplácese hacia abajo hasta
**Registros de recursos personalizados** en Google Domains. Cree un registro *CNAME *que dirija todos los subdominios al dominio de AWS Amplify: Nombre: ingrese el nombre del subdominio. Si el subdominio es www.dominio.com, ingrese . Si es www app.domain.com, ingrese app. Datos: en la página de administración del dominio, haga clic en Acciones y luego seleccione Ver registros DNS. Luego, ingrese el dominio de AWS Amplify disponible en Configurar proveedor de DNS. 
Página **Administración de dominios**, seleccione **Acciones **Ver registros DNS**
En conjunto, el registro de recursos personalizado tendrá el siguiente aspecto:
A continuación, agregue uno más
Registro *CNAME* que apunta al servidor de validación de AWS Certificate Manager. El AWS Certificate Manager validado maneja TLS para su aplicación: Nombre: ingrese el subdominio del servidor de validación. Si el registro DNS para verificar la propiedad de su dominio es _1234.example.com, ingrese solo _1234. Datos: ingrese el certificado de validación de ACM. Si el servidor de validación es _1234.abcdefg.acm-validations.aws., ingrese _1234.abcdefg.acm-validations.aws.
Toda la información de sus Certificados de Validación se encuentra en la consola de AWS Certificate Manager. Después del segundo
Se agrega *CNAME*, sus registros personalizados deberían verse así: 
Por último, agreguemos un
**Registro sintético** para configurar un reenvío de subdominio: Subdominio: ingrese la URL del dominio: www. 
= Resumiendo =
En general, en este artículo, aprendimos cómo estructurar aplicaciones React e implementarlas con AWS Amplify. Primero, discutimos cómo modularizar una aplicación de reacción en
*componentes* *páginas* carpetas. Luego, aprendimos sobre **AWS Amplify** y cómo implementar aplicaciones estáticas y basadas en datos con él. Finalmente, aprendimos sobre el uso de **AWS Amplify Domain Management** y **Google Domains **para personalizar el dominio de nuestra aplicación. **y y
Si tiene alguna pregunta, inquietud o comentario sobre este artículo o el sitio de mi cartera, no dude en comentar o enviarme un correo electrónico a
*
[email protected]*. ¡Gracias por leer!
