Desplegar un sitio web en AWS S3

1Requisitos previos

Antes de comenzar, repasaremos qué intentamos lograr y qué recursos necesitarás tener listos. Asumiremos que ya tienes tu página web (archivos HTML, CSS y posiblemente carpetas de imágenes) guardada en tu computadora.

2Crear y configurar un S3 Bucket

El primer paso es crear el "contenedor" donde vivirán los archivos de tu página web. En el ecosistema de AWS, este contenedor para guardar archivos se llama S3 Bucket.

1. Crear el bucket
Inicia sesión en la consola de AWS. En la barra de búsqueda superior, escribe S3 y haz clic en el primer resultado. Una vez dentro de S3, busca un botón naranja grande que dice "Create bucket" y haz clic en él.

En la siguiente pantalla, sigue estas reglas:

• Bucket name: Dale un nombre. Regla de oro: El nombre debe ser único en todo el mundo (nadie más en AWS puede estar usándolo). Usa solo letras minúsculas, números y guiones, sin espacios (ej. mi-pagina-web-2026).
• AWS Region: Selecciona la región que esté más cerca geográficamente de ti o de tus usuarios (ej. us-east-1 o us-west-2).

2. Permitir el acceso público
Por defecto, AWS bloquea todo acceso a tus archivos para que nadie en internet pueda verlos. Como queremos hacer una página web pública, debemos quitar este candado.

En esa misma pantalla, desplázate hacia abajo hasta encontrar la sección "Block Public Access settings for this bucket":

• Desmarca la casilla principal que dice "Block all public access".
• Al desmarcarla, aparecerá un cuadro amarillo de advertencia. Marca la pequeña casilla en ese cuadro para confirmar que entiendes que tus archivos serán públicos.
• Baja hasta el final de toda la página y haz clic en el botón naranja "Create bucket".

3. Configurar como sitio web estático
Ahora verás una lista con tu bucket recién creado. Haz clic sobre su nombre (en texto azul) para entrar. En la parte superior verás varias pestañas (Objects, Properties, Permissions...). Haz clic en la pestaña "Properties".

• Desplázate hasta el fondo absoluto de la página, hasta encontrar la sección "Static website hosting".
• Haz clic en el botón "Edit".
• Selecciona "Enable" (Habilitar).
• En el campo "Index document", escribe exactamente index.html (este será el archivo principal de tu web).
• Baja y haz clic en "Save changes".

4. Añadir la Política de Permisos (Bucket Policy)
Aunque quitaste el candado general, necesitas decirle a S3 que específicamente permita a los navegadores web "leer" tus archivos. Ve a la pestaña superior llamada "Permissions".

• Baja un poco hasta la sección "Bucket policy" y haz clic en el botón "Edit".
• Verás un cuadro de texto en blanco. Pega exactamente el siguiente código allí.
• ¡Atención! Debes borrar donde dice TU-NOMBRE-DE-BUCKET y escribir el nombre exacto que le diste a tu bucket en el paso 1.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::TU-NOMBRE-DE-BUCKET/*"
    }
  ]
}

Haz clic en "Save changes". Si todo salió bien, en la pestaña de Permisos verás una insignia roja que dice "Publicly accessible".

3Subir tus archivos a S3

Ahora que tu "contenedor" está listo para funcionar como un servidor web, vamos a subir los archivos de tu computadora.

1. Dentro de tu bucket, haz clic en la primera pestaña llamada "Objects".
2. Haz clic en el botón naranja "Upload".
3. Aquí puedes arrastrar y soltar los archivos y carpetas de tu página web desde tu computadora directamente al cuadro en la pantalla. Alternativamente, puedes usar los botones "Add files" (para archivos sueltos como tu index.html) o "Add folder" (si tienes carpetas como css o images).
4. Una vez que veas todos tus archivos listados en la pantalla, baja y haz clic en el botón naranja "Upload" en la parte inferior.
5. Espera a que la barra de progreso termine y veas un mensaje verde de éxito (Success). Luego, haz clic en el botón "Close" arriba a la derecha.

4Obtener y compartir tu enlace público gratuito

¡Felicidades! En este punto, tu página web ya está viva en internet. No necesitas comprar un dominio ni configurar nada más si tu único objetivo es compartir tu página con amigos, profesores, clientes o para tu portafolio.

AWS te proporciona automáticamente una URL (dirección web) gratuita vinculada directamente a tu bucket. Así es como la encuentras para compartirla:

1. Asegúrate de estar dentro de tu bucket en la consola de AWS.
2. Haz clic en la pestaña "Properties" (la segunda pestaña en la parte superior).
3. Usa la rueda de tu ratón para desplazarte hasta el fondo absoluto de esa página.
4. Busca la sección llamada "Static website hosting".
5. Bajo el texto "Bucket website endpoint", verás un enlace azul. Tendrá un formato parecido a este: http://tu-nombre-de-bucket.s3-website-us-east-1.amazonaws.com.
6. Haz clic en ese enlace. ¡Se abrirá una nueva pestaña en tu navegador mostrando tu página web! Copia esa dirección de la barra de tu navegador y mándasela a quien quieras.

5Preparar tu dominio con Route 53 (Opcional)

Si deseas que tu sitio tenga una dirección como midominio.com, usaremos el servicio Route 53 de AWS para conectar un dominio que ya hayas comprado en un registrador externo (GoDaddy, Namecheap, etc.).

1. Usa la barra de búsqueda superior de AWS, escribe Route 53 y haz clic en el servicio.
2. En el menú de la izquierda (si está oculto, haz clic en el icono de tres líneas o hamburguesa), busca y haz clic en "Hosted zones".
3. Haz clic en el botón naranja "Create hosted zone".
4. En el campo "Domain name", escribe tu nombre de dominio (sin www, solo midominio.com). Asegúrate de que el tipo debajo diga "Public hosted zone" y haz clic en "Create hosted zone" abajo.
5. El paso vital: En la tabla que aparece en pantalla, busca la fila donde la columna "Type" dice NS (Name Servers). En la columna de la derecha ("Value"), verás 4 direcciones de internet que terminan en .com, .net, etc. Copia esas 4 direcciones.
6. Abre una nueva pestaña en tu navegador, ve a la página de la empresa donde compraste tu dominio (GoDaddy, Namecheap, etc.) y busca la configuración de DNS o Nameservers (Servidores de nombres). Reemplaza los predeterminados de la empresa pegando los 4 que te dio AWS. (Nota: AWS a veces pone un punto al final de cada dirección; bórralo si tu proveedor de dominio no te deja guardarlos con el punto final).

6Obtener un Certificado SSL (Opcional)

Para que tu dominio muestre el candado de sitio seguro (HTTPS), conseguiremos un certificado gratuito con AWS Certificate Manager (ACM).

1. Usa la barra de búsqueda superior, escribe Certificate Manager y entra al servicio.
2. Haz clic en el botón "Request a certificate" (Solicitar un certificado), elige "Request a public certificate" y presiona Next.
3. En "Fully qualified domain name", escribe tu nombre de dominio (ej. midominio.com).
4. Deja el método de validación en "DNS validation" y haz clic en "Request" abajo.
5. Verás una lista de certificados y el tuyo dirá Pending validation (Pendiente). Haz clic sobre el ID (los números/letras azules) de tu certificado para abrir sus detalles.
6. Busca la sección "Domains" a mitad de página. A la derecha verás un botón que dice "Create records in Route 53". Haz clic en él y luego en el botón naranja "Create records". Esto crea automáticamente un registro especial que le prueba a AWS que tú eres el dueño del dominio.

Ahora debes tener paciencia. Espera unos minutos (puede tomar entre 5 y 30 minutos) hasta que el estado del certificado cambie de azul a verde y diga "Issued" (Emitido).

7Hacer el sitio rápido y seguro con CloudFront (Opcional)

S3 por sí solo no sabe cómo usar tu nuevo certificado de seguridad. Usaremos CloudFront, un servicio que hace copias de tu página y las pone en servidores por todo el mundo, envolviéndola con tu certificado seguro.

1. Usa la barra de búsqueda superior, escribe CloudFront y entra al servicio. Haz clic en "Create a CloudFront distribution".
2. En el campo "Origin domain", haz clic en el cuadro en blanco. Aparecerá una lista desplegable; selecciona tu bucket de S3. (Ignora cualquier mensaje amarillo de advertencia recomendando "OAC", para este sitio estático público no lo necesitamos).
3. Baja hasta la sección "Default cache behavior". Bajo "Viewer protocol policy", selecciona "Redirect HTTP to HTTPS".
4. ¡Muy Importante! Baja hasta encontrar la sección "Web Application Firewall (WAF)". Asegúrate de seleccionar "Do not enable security protections". Si habilitas el firewall sin saberlo, AWS podría cobrarte mensualidades inesperadas por un servicio avanzado de protección que no necesitas para un sitio estático simple.
5. Sigue bajando hasta la sección "Settings".
6. En "Alternate domain name (CNAME)", haz clic en "Add item" y escribe tu dominio (ej. midominio.com).
7. En "Custom SSL certificate", haz clic en el cuadro y selecciona el certificado que creaste en el paso 6 (si no aparece, asegúrate de haber esperado a que diga "Issued" en Virginia).
8. En el campo final "Default root object", escribe index.html.
9. Haz clic en "Create distribution" al fondo de la página.

Verás una barra superior diciendo que la distribución se está desplegando ("Deploying"). Anota la URL que aparece bajo la sección "Distribution domain name" (es un enlace largo que termina en .cloudfront.net). Este proceso puede tardar unos 10 minutos.

8Conectar tu dominio final a CloudFront (Opcional)

El último paso es decirle a tu dominio (que ya está gestionado por Route 53) que cuando alguien escriba tu dirección web, lo mande a la red rápida de CloudFront.

1. Busca en la barra superior nuevamente Route 53 y entra a "Hosted zones".
2. Haz clic en el nombre de tu dominio.
3. Haz clic en el botón naranja "Create record".
4. Asegúrate de que "Record type" esté en A - Routes traffic to an IPv4 address.
5. A la derecha del campo "Value", activa el pequeño interruptor (toggle) que dice "Alias".
6. Aparecerá un campo llamado "Route traffic to". Haz clic en la primera caja y elige "Alias to CloudFront distribution".
7. En la caja de búsqueda que aparece justo debajo, pega la URL larga de CloudFront que copiaste en el paso anterior (la que termina en .cloudfront.net).
8. Haz clic en el botón "Create records".

¡Listo! Los sistemas de internet (DNS) pueden tardar desde 5 minutos hasta un par de horas en actualizarse en todo el mundo. Pronto, al escribir tu propio dominio en el navegador, verás tu página web cargar al instante, con su candado de seguridad activado.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["s3:PutObject", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject"],
      "Resource": [
        "arn:aws:s3:::TU-NOMBRE-DE-BUCKET",
        "arn:aws:s3:::TU-NOMBRE-DE-BUCKET/*"
      ]
    }
  ]
}

name: Deploy to S3
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v4
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: us-east-1 # Cambia esto a la región de tu bucket
    - name: Deploy static site to S3
      run: aws s3 sync ./ s3://TU-NOMBRE-DE-BUCKET --delete

Verificación

Recursos relacionados

• Amazon S3 — Portal del servicio
• Documentación de AWS — Alojamiento de sitios web estáticos