AWS Amplify Guía del usuario de la consola - AWS Amplify: Guía del usuario de la consola - Amazon.com
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
AWS Amplify
Guía del usuario de la consola
AWS Amplify: Guía del usuario de la consola
Copyright © 2020 Amazon Web Services, Inc. and/or its affiliates. All rights reserved.
AWS Amplify Guía del usuario de la consola Amazon's trademarks and trade dress may not be used in connection with any product or service that is not Amazon's, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Amazon.
AWS Amplify Guía del usuario de la consola
Table of Contents
¿Qué es la consola de AWS Amplify? ................................................................................................... 1
¿Qué son las aplicaciones web modernas? .................................................................................... 1
Características de la consola de Amplify ........................................................................................ 1
Paso siguiente ........................................................................................................................... 2
Introducción ....................................................................................................................................... 3
Paso 1: Conectar un repositorio ................................................................................................... 3
Paso 2: Confirmar la configuración de compilaciones para el front-end ................................................ 4
Paso 3: Confirmar la configuración de compilaciones para el backend ................................................ 5
Paso 4: Añadir variables de entorno (Opcional) ............................................................................... 6
Paso 5: Guardar e implementar .................................................................................................... 6
Pasos siguientes ........................................................................................................................ 7
Configuración de dominios personalizados ............................................................................................. 8
Añadir un dominio personalizado administrado en Amazon Route 53 .................................................. 8
Añadir un dominio personalizado administrado por un proveedor de DNS de terceros ............................ 9
Incorporación de subdominios ..................................................................................................... 11
Guía para solucionar problemas .................................................................................................. 12
Terminología técnica ......................................................................................................... 13
¿Cómo verifico que mi CNAME llega a una resolución? .......................................................... 14
Mi dominio alojado con un tercero está bloqueado en estado Pending Verification (Verificación
pendiente) ........................................................................................................................ 15
Mi dominio alojado con AWS Route53 está bloqueado en estado Pending Verification
(Verificación pendiente) ...................................................................................................... 15
Error CNAMEAlreadyExistsException ................................................................................... 16
Conexión a dominios personalizados de terceros ................................................................................... 17
Conexión a un dominio GoDaddy ................................................................................................ 17
Conexión a un dominio de Google .............................................................................................. 20
Configuración de los ajustes de compilación ......................................................................................... 21
Sintaxis de especificación de YML .............................................................................................. 21
Configuración de compilación específica de ramificación ................................................................. 22
Acceso a una subcarpeta ........................................................................................................... 23
Implementación del backend con su front-end ............................................................................... 23
Configuración de la carpeta de salida .......................................................................................... 23
Instalación de paquetes como parte de la compilación .................................................................... 23
Uso de un registro npm privado .................................................................................................. 24
Instalación de paquetes de SO ................................................................................................... 24
Almacenamiento clave-valor para todas las compilaciones .............................................................. 24
Deshabilitación de las compilaciones automáticas .......................................................................... 25
Implementación de aplicaciones web sin servidor de pila completa ........................................................... 26
Implementaciones de ramificaciones de características ........................................................................... 29
Flujos de trabajo de equipo con entornos de backend de la CLI de Amplify ........................................ 30
Flujo de trabajo de ramificación de característica ................................................................... 13
Flujo de trabajo de GitFlow ................................................................................................ 33
Entorno de pruebas por desarrollador .................................................................................. 34
Implementaciones de ramificaciones de características de ramificaciones basadas en patrones ............. 36
Implementaciones manuales ............................................................................................................... 38
Arrastrar y colocar .................................................................................................................... 38
Amazon S3 o cualquier URL ...................................................................................................... 38
Botón de implementación con un clic ................................................................................................... 40
Incorporación del botón "Deploy to Amplify Console" (Implementar en la consola de Amplify) en su
repositorio o blog ...................................................................................................................... 40
Uso de redireccionamientos ............................................................................................................... 41
Tipos de redireccionamientos ..................................................................................................... 41
Partes de un redireccionamiento ................................................................................................. 42
Orden de redireccionamientos .................................................................................................... 42
iii
AWS Amplify Guía del usuario de la consola
Redireccionamientos y reescrituras sencillos ................................................................................. 43
Redireccionamientos para aplicaciones de página web única (SPA) .................................................. 44
Reescritura a proxy inverso ........................................................................................................ 44
Barras finales y URL limpias ...................................................................................................... 45
Marcadores de posición ............................................................................................................. 45
Consultar parámetros de cadenas y ruta ...................................................................................... 45
Redireccionamientos basados en región ....................................................................................... 46
Restricción del acceso ....................................................................................................................... 47
Variables de entorno ......................................................................................................................... 48
Configuración de variables de entorno ......................................................................................... 48
Acceso a las variables de entorno ............................................................................................... 49
Variables de entorno de la consola de Amplify .............................................................................. 49
Encabezados personalizados .............................................................................................................. 51
Ejemplo: encabezados de seguridad ............................................................................................ 51
Webhooks entrantes .......................................................................................................................... 53
Compilaciones personalizadas ............................................................................................................ 55
Imágenes de compilación personalizadas ..................................................................................... 55
Configuración de una imagen de compilación personalizada .................................................... 55
Requisitos de las imágenes de compilación personalizadas ..................................................... 56
Actualizaciones de paquetes en directo ........................................................................................ 56
Configuración de las actualizaciones en directo ..................................................................... 57
Compatibilidad con CloudFormation ..................................................................................................... 59
Creación de un rol de servicio ............................................................................................................ 60
Paso 1: Iniciar sesión en la consola de IAM .................................................................................. 60
Paso 2: Crear un rol de Amplify .................................................................................................. 60
Paso 3: Volver a la consola de Amplify ........................................................................................ 61
Administración del rendimiento de la aplicación ..................................................................................... 62
iv
AWS Amplify Guía del usuario de la consola
¿Qué son las aplicaciones web modernas?
¿Qué es la consola de AWS Amplify?
La consola de AWS Amplify es un servicio continuo de entrega y alojamiento para aplicaciones web
modernas. La consola de AWS Amplify simplifica la implementación del front-end y backend de la
aplicación. Conecte al repositorio de códigos y el front-end y el backend se implementan en un único
flujo de trabajo en cada confirmación de códigos. Así se garantiza que la aplicación web se actualice solo
después de haber realizado correctamente la implementación, lo que elimina inconsistencias entre el
front-end y el backend de la aplicación. La consola de AWS Amplify facilita el proceso de compilación,
implementación y alojamiento de sus aplicaciones web para dispositivos móviles, lo que le permite iterar
rápidamente comentarios y obtener nuevas características para los usuarios con mayor rapidez.
¿Qué son las aplicaciones web modernas?
Las aplicaciones web modernas se construyen como una sola página de aplicaciones web con un paquete
para todos los componentes de la aplicación en archivos estáticos. Las arquitecturas web de servidores
de cliente tradicionales conducen a experiencias pobres, cada clic o búsqueda necesita un trayecto de
recorrido al servidor, volver a representar la aplicación completa. Las aplicaciones web modernas ofrecen
experiencias de usuario similares a las aplicaciones mediante un front-end de aplicación, o interfaz de
usuario, de manera eficiente hacia los buscadores como archivos de HTML/JavaScript prediseñados que
pueden entonces invocar la funcionalidad de backend sin volver a cargar la página.
La funcionalidad de las aplicaciones web modernas se suele distribuir entre varios lugares, tales como
base de datos, servicios de autenticación, código de front-end que se ejecuta en el navegador y lógica
de negocio de backend o funciones AWS Lambda, que se ejecutan en la nube. Esto hace que la
implementación de aplicaciones sea compleja y que consuma mucho tiempo, ya que los desarrolladores
tienen que coordinar con cuidado implementaciones en el front-end y en el backend para evitar
implementaciones parciales o fallidas. La consola de AWS Amplify simplifica la implementación del front-
end y backend en un único flujo de trabajo.
La consola de AWS Amplify admite los marcos comunes de Single Page App (SPA) (por ejemplo, React,
Angular, Vue.js, Ionic, Ember), como así también los generadores estáticos de sitio como Gatsby,
Eleventy, Hugo, VuePress y Jekyll.
Características de la consola de Amplify
Con la consola de Amplify, puede hacer lo siguiente:
• Conecte su repositorio (GitHub, BitBucket, GitLab y AWS CodeCommit) y la consola de Amplify detecta
automáticamente la configuración de compilación de front-end junto con la funcionalidad de backend
aprovisionada con la CLI de Amplify (cadena de herramientas de línea de comando para crear backends
sin servidor).
• Administrar entornos de producción y ensayo para su front-end y backend conectando nuevas
ramificaciones.
• Las implementaciones atómicas eliminan las ventanas de mantenimiento al asegurar que la aplicación
web se actualice cuando se haya completado la implementación completa. Esto elimina las situaciones
en las que los archivos no se cargan correctamente.
• Conectar a su dominio personalizado. Si administra su dominio en Amazon Route 53, la consola de
Amplify conecta automáticamente la raíz (sudominio.com), subdominios www (www.sudominio.com) y
subdominios (https://dev.sudominio.com) de ramificación.
1
AWS Amplify Guía del usuario de la consola
Paso siguiente
• Obtenga capturas de pantalla de la aplicación en distintos dispositivos móviles para identificar problemas
de diseño.
• Configure las reescrituras y los redireccionamientos para mantener clasificaciones de SEO.
• Proteja su aplicación web mediante contraseña para poder trabajar en nuevas características sin hacer
que estén accesibles públicamente.
Paso siguiente
Empezar (p. 3) con la consola de Amplify.
2
AWS Amplify Guía del usuario de la consola
Paso 1: Conectar un repositorio
Introducción
En este tutorial, aprenderá a compilar, implementar y alojar de forma continua una aplicación web
moderna. Las aplicaciones web modernas incluyen marcos de trabajo Single Page App (SPA) (por
ejemplo, React, Angular o Vue) y generadores de sitios estáticos (SSG) (por ejemplo, Hugo, Jekyll o
Gatsby).
Para comenzar, inicie sesión en la consola de Amplify y elija Get Started (Empezar) en Deploy
(Implementar).
Paso 1: Conectar un repositorio
Conecte sus repositorios de GitHub, Bitbucket, GitLab o AWS CodeCommit. También tiene la opción
de cargar manualmente sus artefactos de compilación sin necesidad de conectar un repositorio de Git
(consulte el artículo sobre las implementaciones manuales (p. 38)). Después de autorizar la consola
de Amplify, Amplify obtiene un token de acceso del proveedor del repositorio, pero no lo almacena en los
servidores de AWS. Amplify obtiene acceso a su repositorio utilizando claves de implementación instaladas
solo en un repositorio específico.
Después de conectarse al proveedor de servicios de repositorio, seleccione un repositorio y, a
continuación, elija una ramificación correspondiente para compilar e implementar.
3
AWS Amplify Guía del usuario de la consola
Paso 2: Confirmar la configuración
de compilaciones para el front-end
Paso 2: Confirmar la configuración de
compilaciones para el front-end
Para la ramificación seleccionada, Amplify inspecciona el repositorio para detectar automáticamente la
secuencia de comandos de compilación que se va a ejecutar.
Importante: compruebe que el directorio de salida de compilación y comandos de compilación (es decir,
artifacts > baseDirectory [artefactos > baseDirectory]) es correcto. Si tiene que modificar esta información,
elija Edit (Editar) para abrir el editor YML. Puede guardar la configuración de compilación en nuestros
servidores, o bien puede descargar el archivo YML y añadirlo a la raíz de su repositorio (para monorepos,
almacene el archivo YML en el directorio raíz de la aplicación).
4
AWS Amplify Guía del usuario de la consola
Paso 3: Confirmar la configuración
de compilaciones para el backend
Para obtener más información, consulte Estructura de YML (p. 21).
Paso 3: Confirmar la configuración de
compilaciones para el backend
Si ha conectado un repositorio aprovisionado por la versión 1.0+ de la CLI de Amplify (ejecute amplify -
v para buscar la versión de la CLI), la consola de Amplify implementará o actualizará automáticamente
recursos de backend (cualquier recurso aprovisionado por la CLI de Amplify) en un solo flujo de trabajo
con la compilación de front-end. Puede elegir apuntar un entorno de backend existente a su ramificación, o
bien crear un entorno completamente nuevo. Para ver un tutorial paso a paso, consulte Implementación de
backends sin servidor con el front-end (Beta) (p. 26).
5
AWS Amplify Guía del usuario de la consola
Paso 4: Añadir variables de entorno (Opcional)
Para implementar la funcionalidad de backend mediante la interfaz de línea de comandos (CLI) de Amplify
durante la compilación, cree o reutilizar un rol de servicio de IAM. Los roles de IAM son una manera segura
de conceder permisos a la consola de Amplify para actuar en los recursos de su cuenta.
Nota: la interfaz de línea de comandos (CLI) de Amplify no ejecutará sin un rol de servicio de IAM
habilitado.
Paso 4: Añadir variables de entorno (Opcional)
Casi todas las aplicaciones necesitan obtener información de configuración en tiempo de ejecución.
Estas configuraciones pueden ser los detalles de conexión de base de datos, claves de API o parámetros
diferentes. Las variables de entorno proporcionan un medio de exponer estas configuraciones en el
momento de la compilación.
Paso 5: Guardar e implementar
Revise toda la configuración para garantizar que todo se haya configurado correctamente. Elija Save and
deploy (Guardar e implementar) para implementar su aplicación web en una red de entrega de contenido
(CDN) global. La compilación de front-end suele tardar de 1 a 2 minutos, pero puede variar en función del
tamaño de la aplicación.
Acceda a la pantalla de registros de compilación seleccionando un indicador de progreso en el mosaico de
la ramificación. Una compilación tiene las siguientes etapas:
1. Aprovisionamiento: el entorno de compilación se configura mediante una imagen de Docker en un host
con 4 vCPU, 7 GB de memoria. Cada compilación obtiene su propia instancia de host, lo que garantiza
que todos los recursos se aíslen de forma segura. Se muestra el contenido del archivo de Docker para
garantizar que la imagen predeterminada sea compatible con sus requisitos.
2. Compilación: la fase de compilación consta de tres etapas: configuración (clona el repositorio en
contenedor), implementar backend (ejecuta la CLI de Amplify para implementar recursos de backend) y
compilar front-end (compila los artefactos del front-end).
3. Implementación: cuando se completa el proceso de compilación, todos los artefactos se implementan
en un entorno de alojamiento administrado por Amplify. Cada implementación es atómica: las
implementaciones atómicas eliminan los períodos de mantenimiento asegurándose de que la aplicación
web solo se actualice después de haber completado toda la implementación.
6AWS Amplify Guía del usuario de la consola
Pasos siguientes
4. Verificación: para verificar que la aplicación funciona correctamente, Amplify reproduce capturas de
pantalla de index.html en varias resoluciones de dispositivos con Headless Chrome.
Pasos siguientes
• Añadir un dominio personalizado a su aplicación (p. 8)
• Administrar varios entornos (p. 29)
7AWS Amplify Guía del usuario de la consola
Añadir un dominio personalizado
administrado en Amazon Route 53
Configuración de dominios
personalizados
Puede conectar un dominio personalizado adquirido a través de registradores de dominio (por ejemplo,
Amazon Route 53, GoDaddy y Google Domains) para su aplicación. Al implementar su aplicación web con
la consola de Amplify, se aloja en:
https://branch-name.d1m7bkiki6tdw1.amplifyapp.com
Cuando se utiliza un dominio personalizado, los usuarios ven que la aplicación se aloja en una URL, como
la siguiente:
https://www.awesomedomain.com
La consola de Amplify emite un certificado SSL para todos los dominios conectados a su aplicación,
de modo que todo el tráfico se protege a través de HTTPS/2. El certificado SSL generado por Amazon
Certificate Manager es válido durante 30 días y se renueva automáticamente siempre y cuando la
aplicación se aloje con Amplify.
Temas
• Añadir un dominio personalizado administrado en Amazon Route 53 (p. 8)
• Añadir un dominio personalizado administrado por un proveedor de DNS de terceros (p. 9)
• Incorporación de subdominios (p. 11)
• Guía para solucionar problemas (p. 12)
Añadir un dominio personalizado administrado en
Amazon Route 53
Después de implementar la aplicación, puede añadir un dominio personalizado que administre mediante
Amazon Route 53.
1. En el panel de navegación izquierdo, seleccione App Settings (Configuración de aplicación), Domain
management (Administración de dominio) y, a continuación, Add domain (Añadir dominio).
2. En Enter your root domain (Introduzca su dominio raíz), introduzca su dominio raíz (https://
awesomedomain.com). A medida que comience a escribir, aparecen en la lista los dominios raíz que
8AWS Amplify Guía del usuario de la consola
Añadir un dominio personalizado administrado
por un proveedor de DNS de terceros
administre en Amazon Route 53 (https://awesomedomain.com). Seleccione el dominio que desea utilizar
y, a continuación, elija Configure Domain (Configurar dominio).
3. De forma predeterminada, la consola de Amplify añade automáticamente dos entradas para
https://www.myroute53domain.com y https://myroute53domain.com con una configuración de
redireccionamiento desde el subdominio www al dominio raíz (puede cambiarla eligiendo Rewrites and
redirects [Reescrituras y redireccionamientos] en el menú izquierdo). Puede modificar la configuración
predeterminada si desea añadir solo subdominios. Consulte la sección acerca de cómo conectar
subdominios (p. 11). Elija Save (Guardar) después de configurar su dominio.
Nota: El DNS puede tardar hasta 24 horas en propagarse y emitir el certificado SSL. Para obtener más
información acerca de los mensajes de estado, consulte Asociación de un dominio.
Añadir un dominio personalizado administrado por
un proveedor de DNS de terceros
Después de implementar la aplicación, puede añadir un dominio personalizado que administre con un
proveedor de DNS de terceros si no utiliza Amazon Route 53.
1. En el panel de navegación izquierdo, seleccione App Settings (Configuración de aplicación), Domain
management (Administración de dominio) y, a continuación, Add domain (Añadir dominio).
2. En Enter your root domain (Introduzca su dominio raíz), introduzca su dominio raíz (https://
awesomedomain.com) y, a continuación, elija Configure domain (Configurar dominio). Si el dominio está
9AWS Amplify Guía del usuario de la consola
Añadir un dominio personalizado administrado
por un proveedor de DNS de terceros
registrado, una alerta verde se lo notifica para continuar siempre que sea el propietario del dominio. Si el
dominio está disponible, adquiera un dominio en Amazon Route 53.
3. De forma predeterminada, la consola de Amplify añade dos entradas para https://
www.awesomedomain.com y https://awesomedomain.com con una configuración de redireccionamiento
desde el subdominio www al dominio raíz. Puede modificar la configuración predeterminada si desea
añadir solo subdominios. Consulte la sección acerca de cómo conectar subdominios (p. 11). Elija
Save (Guardar) después de configurar su dominio.
4. Dado que el dominio se administra externamente, debe configurar de forma manual su proveedor de
DNS (por ejemplo, GoDaddy o Google Domains). Elija View DNS records (Ver registros DNS) en el
banner de alerta.
5. Actualice los registros CNAME y ALIAS de los proveedores de DNS, tal y como se indica a continuación.
Para GoDaddy y Google Domains, consulte las instrucciones paso a paso en Conexión a dominios
personalizados de terceros (p. 17).
a. Para generar un certificado SSL para su dominio, la consola de Amplify necesita verificar la
propiedad. Configurar un CNAME para apuntar al servidor de validación. Una vez que la consola de
Amplify valide la propiedad de su dominio, todo el tráfico se servirá mediante HTTPS/2.
b. Configure el registro de CNAME para apuntar sus subdominios (https://*.awesomedomain.com) al
dominio amplifyapp. NOTA: Si tiene tráfico de producción, se recomienda que actualice su registro
CNAME una vez que el estado de su dominio sea AVAILABLE.
c. Configure el registro de ANAME/ALIAS para apuntar al dominio raíz (https://awesomedomain.com)
al dominio amplifyapp. Los registros ANAME le permiten apuntar la raíz de su dominio a un
nombre de host. Para los proveedores de DNS que no admiten ANAME/ALIAS, le recomendamos
encarecidamente migrar su DNS a Amazon Route 53.
**
10AWS Amplify Guía del usuario de la consola
Incorporación de subdominios
NOTA: Si tiene tráfico de producción, se recomienda que actualice su registro ANAME una vez que el
estado de su dominio sea AVAILABLE.*
Importante: la verificación de la propiedad del dominio y la propagación de DNS para dominios de terceros
puede tardar hasta 48 horas. Para obtener más información acerca de los mensajes de estado, consulte
Asociación de un dominio.
Incorporación de subdominios
Un subdominio es la parte de la URL que aparece antes de su nombre de dominio (por ejemplo, www.
amazon.com o aws. amazon.com).
1. Añada solo un subdominio: si ya tiene un sitio web de producción, es posible que solo quiera conectar
un subdominio (p. ej., https://alpha.mydomain.com). Puede hacerlo eligiendo Exclude root (Excluir raíz)
y modificando el subdominio a alpha (alfa) como se muestra a continuación.
2. Añada un subdominio multinivel: es posible que quiera conectar un subdominio multinivel (p. ej., https://
beta.alpha.mydomain.com). Puede hacerlo escribiendo alpha.mydomain.com en la barra de búsqueda
de dominios, eligiendo Exclude root (Excluir raíz) y modificando el subdominio a beta como se muestra a
continuación.
11AWS Amplify Guía del usuario de la consola
Guía para solucionar problemas
3. Administre subdominios: tras añadir su dominio, es posible que quiera añadir más subdominios. Elija
Manage subdomains (Administrar subdominios) en la pantalla Domain management (Administración de
dominios) y edite sus subdominios.
Guía para solucionar problemas
Esta guía le ayudará a solucionar aquellos problemas relativos a la configuración de un dominio
personalizado en la consola de AWS Amplify.
Temas
• Terminología técnica (p. 13)
• ¿Cómo verifico que mi CNAME llega a una resolución? (p. 14)
• Mi dominio alojado con un tercero está bloqueado en estado Pending Verification (Verificación
pendiente) (p. 15)
• Mi dominio alojado con AWS Route53 está bloqueado en estado Pending Verification (Verificación
pendiente) (p. 15)
• Error CNAMEAlreadyExistsException (p. 16)
12AWS Amplify Guía del usuario de la consola
Terminología técnica
Terminología técnica
1. CNAME: un CNAME (nombre de registro canónico) es un tipo de registro de DNS que le permite
enmascarar el dominio para un conjunto de páginas web y hacer que aparezcan como si se
encontrasen en otros lugares. Los CNAME apuntan un subdominio a un nombre de dominio completo
(FQDN). Por ejemplo, podemos crear un nuevo registro CNAME para asignar el subdominio
www.myawesomesite.com al dominio FQDN branch-name.d1m7bkiki6tdw1.amplifyapp.com asignado a
nuestra aplicación.
2. ANAME: un registro ANAME es como un registro CNAME, pero en el nivel raíz. Un ANAME apuntará la
raíz de su dominio a un FQDN. En realidad, dicho FQDN apuntará a una dirección IP.
3. Servidor de nombres: un servidor de nombres es un servidor de Internet especializado en gestionar
consultas acerca de la ubicación de los diversos servicios de un nombre de dominio. Si tiene su
configuración de dominio en AWS Route53, tendrá una lista de servidores de nombres asignados a su
dominio.
Configuración de dominios personalizados en la consola de AWS Amplify
Al crear un nuevo dominio en la consola de Amplify, hay varios pasos que deben seguirse para poder ver
su aplicación a través de su dominio personalizado.
1. Creación de SSL: la consola de AWS Amplify emite un certificado SSL para configurar un dominio
personalizado seguro.
2. Configuración/verificación de SSL: antes de emitir un certificado SSL, la consola de Amplify debe
verificar que es el propietario del dominio. Para los dominios administrados por Route53, actualizaremos
automáticamente el registro de verificación de DNS. Para los dominios administrados fuera de Route53,
tendrá que añadir manualmente el registro de verificación de DNS mostrado en el proveedor de DNS de
su dominio.
3. Activación del dominio: el dominio se verifica correctamente. Para los dominios administrados fuera
de Route53, tendrá que añadir manualmente los registros CNAME proporcionados en la consola en el
proveedor de DNS de su dominio.
13AWS Amplify Guía del usuario de la consola
¿Cómo verifico que mi CNAME llega a una resolución?
Descripción de la verificación de DNS
DNS son las siglas de sistema de nombres de dominio y se suele hacer referencia a estas siendo una
agenda de teléfonos, traduciendo nombres inteligibles (dominios) a direcciones idóneas para equipos
(direcciones IP).
Al escribir https://google.com en el navegador, se realiza una búsqueda en el proveedor de DNS para
encontrar la dirección IP del servidor que aloja el sitio web.
Los proveedores de DNS contienen registros de dominios y sus direcciones IP correspondientes. Estos
son los registros de DNS que se usan con más frecuencia.
1. Registro A: apunta el subdominio o dominio raíz a una dirección IP
2. Registro CNAME: apunta un subdominio a un FQDN (nombre de dominio completo)
3. Registro NS: apunta a servidores que buscarán los detalles de sus dominios.
Existen varios servicios gratuitos en Internet que puede usar para verificar sus registros de DNS. Por
ejemplo, whatsmydns.net.
La consola de Amplify usa un registro CNAME para verificar que posee su dominio personalizado. Si
aloja su dominio con AWS Route53, la verificación se lleva a cabo en su nombre. Sin embargo, si aloja su
dominio con un tercero, tendrá que ir manualmente a su configuración de DNS y añadir un nuevo registro
CNAME.
¿Cómo verifico que mi CNAME llega a una
resolución?
Tras su actualización de DNS, puede usar una herramienta como dig o un sitio web gratuito como
whatsmydns.net para verificar que sus registros CNAME llegan a una resolución.
Al hacer clic en la opción de búsqueda, debe comprobar que en los resultados se muestra que su CNAME
llega a una resolución.
14AWS Amplify Guía del usuario de la consola
Mi dominio alojado con un tercero está bloqueado en
estado Pending Verification (Verificación pendiente)
De forma similar, puede comprobar los otros registros de DNS.
Mi dominio alojado con un tercero está bloqueado en
estado Pending Verification (Verificación pendiente)
Lo primero que querrá hacer es verificar si sus registros CNAME llegan a una resolución. Consulte el paso
anterior para obtener instrucciones. Si los registros CNAME no llegan a una resolución, debe confirmar que
la entrada CNAME existe en su proveedor de DNS.
Note: If you added or updated your CNAME records a few hours after you
created your app, this will most likely cause your app to get stuck in
the pending verification state. It is important that you update your
CNAME records as soon as you create your custom domain.
Una vez que su aplicación se crea en la consola de Amplify, sus registros CNAME se comprueban cada
pocos minutos para determinar si llega a una resolución. Si no llega a una resolución transcurrida una
hora, la comprobación se realizará cada pocas horas, lo que puede provocar un retraso en su dominio listo
para usar.
Por último, si ha confirmado la existencia de los registros CNAME, puede haber un problema con su
proveedor de DNS. Puede contactar con el proveedor de DNS para diagnosticar el motivo por el cual el
CNAME de verificación de DNS no llega a una resolución o migrar su DNS a Route53.
Mi dominio alojado con AWS Route53 está bloqueado
en estado Pending Verification (Verificación pendiente)
Si ha transferido su dominio a AWS Route53, es posible que su dominio tenga unos servidores de nombres
distintos de los emitidos por la consola de Amplify al crearse su aplicación. Inicie sesión en la consola de
Route53, elija Hosted Zones (Zonas hospedadas) en el panel de navegación izquierdo y elija el dominio
que va a conectar. Registre los valores de servidor de nombres.
15AWS Amplify Guía del usuario de la consola
Error CNAMEAlreadyExistsException
A continuación, elija Registered domains (Dominios registrados) en el panel de navegación izquierdo.
Asegúrese de que los servidores de nombres de la pantalla de dominios registrados coinciden con lo que
ha copiado de la zona hospedada.
Si esto no ha resuelto el problema, envíe un mensaje de correo electrónico a aws-amplify-
customer@amazon.com.
Error CNAMEAlreadyExistsException
Esto significa que uno de los nombres de host que ha intentado conectar (podría ser un subdominio o
el dominio de ápex) ya se ha implementado en otra distribución de AWS CloudFront. A continuación se
explica cómo puede diagnosticar el problema:
1. Compruebe la consola de AWS CloudFront para ver si tiene este dominio implementado en cualquier
otra distribución. A la vez, solo puede tener un solo registro CNAME asociado a una distribución de
CloudFront.
2. ¿Está conectado este dominio a una aplicación de Amplify distinta de la que posee? En caso afirmativo,
asegúrese de que no intenta reutilizar uno de los nombres de host. Si usa www.domain.com en la otra
aplicación, no podrá utilizar www.domain.com con esta aplicación. Puede usar otros subdominios como
blog.domain.com.
3. Si tenía este dominio conectado correctamente a otra aplicación y se ha eliminado recientemente (en
la última hora), espere y vuelva a intentarlo más tarde. Si sigue viendo esta excepción transcurridas
6 horas, contacte con nosotros en aws-amplify-customer@amazon.com.
16AWS Amplify Guía del usuario de la consola
Conexión a un dominio GoDaddy
Conexión a dominios personalizados
de terceros
Conexión a un dominio GoDaddy
1. Siga las instrucciones para añadir un dominio (p. 8) de proveedores de terceros.
2. Inicie sesión en su cuenta en GoDaddy y elija DNS.
3. Añada registros CNAME para apuntar los subdominios al dominio de Amplify y otro registro CNAME
para apuntar al servidor de validación de Amazon Certificate Manager. Un único ACM validado genera
un certificado SSL para el dominio. Asegúrese de introducir solo el subdominio (por ejemplo, ) en
**Host* como se muestra a continuación (no escriba sunombrededominio.com).
GoDaddy no admite registros ANAME/ALIAS. Para proveedores de DNS que no admiten ANAME/ALIAS,
le recomendamos encarecidamente migrar su DNS a Amazon Route 53. Si desea mantener su proveedor
17AWS Amplify Guía del usuario de la consola
Conexión a un dominio GoDaddy
actual y actualizar el dominio raíz, añada Forwarding (Reenvío) y configure un reenvío de dominios. En
Forward to (Reenviar a), introduzca la información como se muestra a continuación:
18AWS Amplify Guía del usuario de la consola
Conexión a un dominio GoDaddy
19AWS Amplify Guía del usuario de la consola
Conexión a un dominio de Google
Conexión a un dominio de Google
1. Siga las instrucciones para añadir un dominio (p. 8) de proveedores de terceros.
2. Inicie sesión en su cuenta en https://domains.google y elija DNS.
3. En Registros de recurso personalizados, introduzca los registros de CNAME a donde desea apuntar
todos los subdominios (https://*.awesomedomain.com) al dominio amplifyapp y otro registro de CNAME
para apuntar al servidor de validación de Amazon Certificate Manager. Un único ACM validado genera
un certificado SSL para el dominio.
Los dominios de Google no admiten registros ANAME/ALIAS. Para proveedores de DNS que no admiten
ANAME/ALIAS, le recomendamos encarecidamente migrar su DNS a Amazon Route 53. Si desea
mantener su proveedor actual y actualizar el dominio raíz, añada un Synthetic Record (Registro sintético)
y configure un Subdomain Forward (Reenvío de subdominio). En Subdomain (Subdominio), introduzca el
símbolo @ y, a continuación, elija Forward path (Ruta de reenvío) como se muestra a continuación:
20AWS Amplify Guía del usuario de la consola
Sintaxis de especificación de YML
Configuración de los ajustes de
compilación
La consola de Amplify detecta automáticamente el marco de trabajo del front-end y la configuración de la
compilación asociada inspeccionando el archivo package.json en el repositorio. Dispone de las opciones
siguientes:
• Guarde la configuración de compilación en la consola de Amplify: la consola de Amplify detecta
automáticamente la configuración de la compilación y la guarda de forma que se pueda acceder a través
de la consola de Amplify. Esta configuración se aplica a todas las ramificaciones a menos que exista un
archivo que YML en el repositorio.
• Guarde la configuración de compilación en el repositorio: descargue el archivo amplify.yml y añádalo a la
raíz de su repositorio (o a la raíz de la carpeta de aplicación para monorepos).
Puede editar estos ajustes en la consola de Amplify eligiendo App Settings>Build settings (Configuración
de aplicación>Configuración de compilación). Esta configuración de compilación se aplica a todas las
ramificaciones de la aplicación, excepto a las ramificaciones que tienen un archivo YML guardado en el
repositorio.
Sintaxis de especificación de YML
El archivo YML de especificación de compilación contiene un conjunto de comandos de compilación y
ajustes relacionados que la consola de Amplify utiliza para ejecutar la compilación. El archivo YML está
estructurado del siguiente modo:
version: 1.0
env:
variables:
key: value
backend:
phases:
preBuild:
commands:
- *enter command*
build:
commands:
- *enter command*
postBuild:
commands:
- *enter command*
frontend:
phases:
preBuild:
commands:
- cd react-app
- npm ci
build:
commands:
- npm run build
21AWS Amplify Guía del usuario de la consola
Configuración de compilación específica de ramificación
artifacts:
files:
- location
- location
discard-paths: yes
baseDirectory: location
cache:
paths:
- path
- path
customHeaders:
- pattern: 'file-pattern'
headers:
- key: 'custom-header-name'
value: 'custom-header-value'
- key: 'custom-header-name'
value: 'custom-header-value'
• version: representa el número de versión de YML de la consola de Amplify.
• env: añade variables de entorno a esta sección. También puede añadir variables de entorno a través de
la consola.
• backend: ejecute comandos de la interfaz de línea de comandos (CLI) de Amplify para aprovisionar un
backend, actualizar las funciones Lambda o esquemas de GraphQL en el marco de la implementación
continua. Aprenda a implementar un backend con el front-end (p. 26).
• frontend: ejecute los comandos de compilación del front-end.
• Tanto el front-end como el backend tienen tres fases que representan la ejecución de comandos durante
cada secuencia de la compilación.
• preBuild: el script preBuild se ejecuta antes de que se inicie la compilación real, pero después de
haber instalado dependencias.
• build: los comandos de compilación.
• postBuild: el script post-build se ejecuta una vez que ha finalizado la compilación y hemos copiado
todos los artefactos necesarios en el directorio de salida.
• artifacts>base-directory: el directorio en el que están los artefactos de compilación.
• artifacts>files: especifique archivos desde el artefacto que desea implementar. **/* es para incluir todos
los archivos.
• customHeaders: reglas del encabezado personalizado establecidas en los archivos implementados.
Consulte el artículo sobre los encabezados personalizados (p. 51).
Configuración de compilación específica de
ramificación
Puede usar scripts de shell bash para establecer la configuración de compilación específica de
ramificación. Por ejemplo, el siguiente script usa la variable de entorno del sistema $AWS_BRANCH para
ejecutar un conjunto de comandos si el nombre de ramificación es maestra y otro conjunto de comandos si
el nombre de ramificación es desarrollo.
frontend:
phases:
build:
commands:
- if [ "${AWS_BRANCH}" = "master" ]; then echo "master branch"; fi
- if [ "${AWS_BRANCH}" = "dev" ]; then echo "dev branch"; fi
22AWS Amplify Guía del usuario de la consola
Acceso a una subcarpeta
Acceso a una subcarpeta
Para monorepos, los usuarios quieren poder utilizar cd en una carpeta para ejecutar la compilación.
Después de ejecutar el comando cd, se aplica a todas las etapas de la compilación por lo que no es
necesario que repita el comando en fases independientes.
version: 1.0
env:
variables:
key: value
frontend:
phases:
preBuild:
commands:
- cd react-app
- npm ci
build:
commands:
- npm run build
Implementación del backend con su front-end
amplifyPush es un script auxiliar que le ayuda con las implementaciones del backend. La configuración de
compilación siguiente determina automáticamente el entorno de backend correcto que se va a implementar
para la ramificación actual.
version: 1.0
env:
variables:
key: value
backend:
phases:
build:
commands:
- amplifyPush --simple
Configuración de la carpeta de salida
La siguiente configuración de compilación establece el directorio de salida en la carpeta pública.
frontend:
phases:
commands:
build:
- yarn run build
artifacts:
baseDirectory: public
Instalación de paquetes como parte de la
compilación
Puede utilizar npm o yarn para instalar paquetes durante la compilación.
23AWS Amplify Guía del usuario de la consola
Uso de un registro npm privado
frontend:
phases:
build:
commands:
- npm install -g pkg-foo
- pkg-foo deploy
- yarn run build
artifacts:
baseDirectory: public
Uso de un registro npm privado
Puede añadir referencias a un registro privado en la configuración de compilación o añadirlo como variable
de entorno.
build:
phases:
preBuild:
commands:
- npm config set
- npm config set registry https://registry.npmjs.org
- npm config set always-auth true
- npm config set email hello@amplifyapp.com
- yarn install
Instalación de paquetes de SO
Puede instalar paquetes de SO para las dependencias que faltan.
build:
phases:
preBuild:
commands:
- yum install -y
Almacenamiento clave-valor para todas las
compilaciones
envCache proporciona almacenamiento clave-valor en el momento de la compilación. Los valores
almacenados en envCache solo se pueden modificar durante una compilación y se pueden volver a utilizar
durante la siguiente compilación. Mediante envCache, podemos almacenar información en el entorno
implementado y hacer que esté disponible para el contenedor de compilación en compilaciones sucesivas.
A diferencia de los valores almacenados en envCache, los cambios en las variables de entorno durante
una compilación no se almacenan de forma persistente en futuras compilaciones.
Ejemplo de uso:
envCache --set
envCache --get
24AWS Amplify Guía del usuario de la consola
Deshabilitación de las compilaciones automáticas
Deshabilitación de las compilaciones automáticas
Puede configurar la consola de Amplify para deshabilitar las compilaciones automáticas en todas
las confirmaciones de código. Para la configuración, elija App settings > General (Configuración de
la aplicación > General) y, a continuación, desplácese hasta la sección con todas las ramificaciones
conectadas. Seleccione una ramificación y, a continuación, elija Action > Disable auto build (Acción >
Deshabilitar compilación automática). Las confirmaciones adicionales en esa ramificación dejarán de
desencadenar una nueva compilación.
25AWS Amplify Guía del usuario de la consola
Tutorial sin servidor: Implementación
del backend con su front-end
La consola de Amplify permite a los desarrolladores crear aplicaciones con el marco de trabajo de Amplify
para implementar de forma continua actualizaciones en su backend y front-end en cada confirmación de
código. Con la consola de Amplify puede implementar backends sin servidor con las API de GraphQL y
de REST, autenticación, análisis y almacenamiento creados por la interfaz de línea de comandos (CLI) de
Amplify. Nota: Esta característica solo funciona con la versión 1.0+ de la CLI de Amplify.
En este tutorial, vamos a crear e implementar una aplicación React que implementa un flujo de
autenticación básico para la inscripción o el inicio de sesión de usuarios, así como el direccionamiento del
lado del cliente protegido mediante AWS Amplify.
• Si usa otro marco de front-end o categoría de backend de Amplify, se pueden aplicar los mismos pasos
a la implementación de su backend o front-end con la consola de Amplify. El código final para este
proyecto está disponible como ejemplo en GitHub.
• Si ya tiene una aplicación de Amplify existente, salte al paso 6.
1. Instale la CLI de Amplify para inicializar un nuevo proyecto de Amplify.
npm install -g @aws-amplify/cli
2. Inicialice la CLI en la raíz de su proyecto y asigne a su entorno el nombre producción. Puede usar la CLI
de Amplify para añadir la funcionalidad de backend a su aplicación. La funcionalidad de backend incluye
todas las categorías de nube como, por ejemplo, autenticación, análisis, API y almacenamiento.
create-react-app myapp
cd myapp
amplify init
Enter a name for the environment: prod
3. Añada la autenticación con el inicio de sesión, la inscripción y la autenticación multifactor a su
aplicación. Acepte todos los valores predeterminados y envíe la configuración del proyecto actualizada a
AWS. Implementará un recurso de Amazon Cognito que permite la autenticación de usuario.
amplify add auth
...
amplify push
4. Actualice su código de front-end para añadir el componente HOC withAuthenticator a su App.js como
se muestra aquí. Pruebe su aplicación localmente para asegurarse de que ve una pantalla de inicio de
sesión.
npm start
5. Confirme su código y cárguelo en un proveedor de Git que elija (la consola de Amplify admite GitHub,
BitBucket, GitLab y AWS CodeCommit).
26AWS Amplify Guía del usuario de la consola
6. Inicie sesión en la consola de Amplify y elija Get Started (Empezar) en Deploy (Implementar). Conecte
su ramificación, repositorio y proveedor de Git y, a continuación, elija Next (Siguiente).
7. La consola de Amplify detecta automáticamente que su repositorio tiene un backend de Amplify. En el
menú desplegable, elija producción (el entorno que acaba de crear con la CLI). Esto hará que la consola
actualice automáticamente el backend de producción cada vez que confirme los cambios realizados en
su repositorio.
8. Elija Next (Siguiente) y Save and deploy (Guardar e implementar). La compilación de la aplicación se
iniciará implementando el backend seguido del front-end. Haga clic en su nombre de ramificación para
ver la compilación en ejecución. Cuando su compilación se realice correctamente, debe poder acceder a
su aplicación.
27AWS Amplify Guía del usuario de la consola
28AWS Amplify Guía del usuario de la consola
Implementaciones de ramificaciones
de características y flujos de trabajo
de equipo
La consola de Amplify se ha diseñado para trabajar con la ramificación de características y los flujos de
trabajo de GitFlow. La consola de Amplify utiliza ramificaciones de Git para crear nuevas implementaciones
cada vez que un desarrollador conecta una nueva ramificación en su repositorio. Después de conectar
su primera ramificación, puede crear una nueva implementación de ramificaciones de características
añadiendo una ramificación tal y como se indica a continuación:
1. En la página de lista de ramificación, seleccione Connect branch (Conectar ramificación).
2. Elija una ramificación de su repositorio.
3. Guarda y, a continuación, implemente su aplicación.
La aplicación ahora tiene dos implementaciones disponibles en https://master.appid.amplifyapp.com
y https://dev.appid.amplifyapp.com. Esto puede variar de un equipo a otro, pero normalmente la
ramificación maestra rastrea el código de versión y es su ramificación de producción. La ramificación de
desarrollo se usa como ramificación de integración para probar nuevas características. De esta forma, los
evaluadores beta pueden probar características que todavía no se han publicado en la implementación de
ramificaciones de desarrollo, sin que ello afecte a ningún usuario final de producción en la implementación
de ramificaciones maestras.
Temas
• Flujos de trabajo de equipo con entornos de backend de la CLI de Amplify (p. 30)
• Implementaciones de ramificaciones de características de ramificaciones basadas en
patrones (p. 36)
29También puede leer
