Alojar un sitio web estático
Alojar un sitio web sencillo de marketing o una aplicación web en AWS
Introducción
Los sitios web estáticos suministran HTML, JavaScript, imágenes, videos y otros archivos a las personas que visitan el sitio web. Los sitios web estáticos tienen un costo muy bajo, brindan un nivel de fiabilidad alto, casi no requieren administración de TI y ajustan su escala para tráfico de nivel empresarial sin esfuerzo adicional.
Consulte las preguntas frecuentes para obtener más información >>
Lo que aprenderá
- Alojar un sitio web estático con AWS Amplify en la consola de AWS. AWS Amplify proporciona alojamiento completamente administrado para sitios y aplicaciones web estáticos. La solución de alojamiento de Amplify aprovecha Amazon CloudFront y Amazon S3 para suministrar los activos del sitio mediante la red de entrega de contenido (CDN) de AWS.
- Configurar implementaciones continuas: Amplify ofrece un flujo de trabajo basado en Git con implementación continua, lo que permite que ejecute actualizaciones automáticamente en el sitio en cada confirmación de código.
Experiencia de AWS
Principiante
Tiempo de realización
10 minutos
Costo de realización
- Fuera de los límites del nivel gratuito de AWS: generalmente de 1 a 3 USD al mes.
- Dentro de los límites de la capa gratuita de AWS: generalmente 0,50 USD al mes.
Para ver un desglose de los servicios utilizados y los costos asociados, consulte los precios de AWS Amplify y Amazon Route 53.
Requisitos previos del tutorial
- Una cuenta de AWS con acceso de administrador* Regístrese en AWS.
- Proveedor Git: puede utilizar AWS CodeCommit (incluido en el nivel gratuito de AWS) o GitHub.
Última actualización
27 de septiembre de 2022
Implementación
-
Creación y conexión de un repositorio
Para comenzar este tutorial, deberá crear e inicializar un repositorio. La forma más fácil de hacerlo es con el comando create-react-app. Instale este paquete mediante el siguiente comando en el símbolo del sistema o la terminal.
¿Ya tiene un repositorio para conectar? Vaya al paso c a continuación.¿Desea implementarlo sin conectar al proveedor Git? Comience por hacer clic aquí.npx create-react-app amplifyapp cd amplifyapp npm start
En este paso, creará un repositorio de GitHub, a donde luego enviará el código. Para completar este paso necesitará una cuenta de GitHub; si no tiene una, regístrese aquí.
a. Cree un nuevo repositorio de GitHub para su aplicación (enlace)
b. Inicie Git y, para enviar la aplicación al nuevo repositorio de GitHub, ejecute los siguientes comandos en la interfaz de línea de comandos:
git init git remote add origin git@github.com:username/reponame.git git add . git commit -m “initial commit” git push origin master
c. Para conectar el repositorio, inicie sesión en la consola de Amplify y elija Get started (Introducción) en la parte superior de la página. Luego, haga clic en Get Started en Amplify Hosting.
Conecte los repositorios de GitHub, Bitbucket, GitLab o AWS CodeCommit. También tiene la opción de cargar manualmente los artefactos de compilación sin conectar un repositorio Git (consulte Implementaciones manuales). Después de autorizar la consola de Amplify, ésta busca un token de acceso del proveedor de repositorios, pero no almacena el token en los servidores de AWS. Amplify accede al repositorio mediante las claves de implementación instaladas solo en un repositorio específico.
Luego de conectar el proveedor de servicio de repositorios, elija un repositorio y luego seleccione una de las ramificaciones correspondientes para crear e implementar.
-
Confirmar la configuración de creación
Para la ramificación seleccionada, Amplify inspecciona el repositorio a fin de detectar automáticamente la secuencia de comandos de creación que debe ejecutarse. Confirme las configuraciones de creación y haga clic en Next (Siguiente).
-
Guardar e implementar
Revise todas los ajustes para garantizar que todo se configuró correctamente. Seleccione Save and deploy (Guardar e implementar) para implementar la aplicación web en una red de entrega de contenido global (CDN). La creación del frontend suele tomar 1 o 2 minutos, pero puede variar en función del tamaño de la aplicación.
¡Felicitaciones!
Finalizó el tutorial Alojar un sitio web estático en AWS.