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

El costo total para alojar un sitio web estático en AWS depende del uso.

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

 
[*] Es posible que las cuentas creadas en las últimas 24 horas aún no tengan acceso a los servicios necesarios para este tutorial.

 Última actualización

27 de septiembre de 2022

Implementación

  • 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.

    amplify-getstarted

    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.

  • 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).

  • 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.

Pasos siguientes

Para poder continuar su recorrido con AWS, siga los pasos siguientes en la sección a continuación.

¿Le resultó útil esta página?