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.

Implementación

  • Crear y conectar el repositorio

    Para este tutorial, necesitará crear e iniciar 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)

    Front End GitHub Repository Module 1

    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 seleccione Get started (Introducción) en Deploy (Implementar).

    1-gettingstarted

    Conecte los repositorios 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.

    2-connectrepository

    Luego de conectar el proveedor de servicio de repositorios, elija un repositorio y luego seleccione una de las ramificaciones correspondientes para crear e implementar.

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

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

    8-saveanddeploy

¿Este tutorial le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Alojar un sitio web estático con Amazon S3

Además, puede utilizar Amazon S3 para alojar el sitio web estático. Alojar un sitio web estático en Amazon S3 entrega un sitio escalable y de alto rendimiento en una fracción del costo de un servidor web tradicional.

Para alojar un sitio web estático en Amazon S3, configure un bucket de Amazon S3 destinado al alojamiento del sitio web y cargue el contenido. Con la consola de administración de AWS, puede configurar el bucket de Amazon S3 como un sitio web estático sin escribir ningún código. Según los requisitos del sitio web, además puede utilizar algunas configuraciones opcionales, incluidos los redireccionamientos, el registro del tráfico web y los documentos de errores personalizados.

Para obtener más información sobre el alojamiento de un sitio web estático en Amazon S3, incluidas las instrucciones y las explicaciones paso a paso, consulte la guía de implementación.

¡Felicitaciones!

¡Creó correctamente una aplicación web estática en AWS! Como un gran próximo paso, profundice sus conocimientos sobre AWS Amplify y consulte el conjunto completo de herramientas y servicios para el desarrollo de aplicaciones web y móviles en AWS.