¿Cómo puedo usar Amazon S3 para alojar un sitio web estático que usa API Gateway como proxy?

Resolución

Si quieres utilizar Amazon S3 para alojar un sitio web estático que utilice API Gateway como proxy, usa una integración HTTP o una integración de servicios de AWS.

Uso de una integración HTTP

Si tu sitio web estático es de acceso público, usa la integración HTTP y proporciona la URL del sitio web estático de S3 para la API.

Configura un sitio web estático en Amazon S3. A continuación, usa la consola de API Gateway para crear una API de REST y un método para el recurso raíz. Luego, despliega tu API de REST.

Creación de una API de REST

Sigue estos pasos:

1. Abre la consola de API Gateway.
2. Selecciona Crear API.
3. En API de REST, selecciona Crear.
4. En Nombre de API, introduce un nombre para la API de REST.
5. En la lista desplegable Tipo de punto de enlace, elige tu tipo de punto de enlace y, a continuación, elige Crear API.
6. En el panel de navegación, selecciona Recursos en el nombre de la API.
7. Elige Crear recurso.
8. En Ruta del recurso, mantén el valor como**/**.
9. En Nombre del recurso, introduce un nombre. Por ejemplo, clave.
10. Elige Crear recurso.

Creación del método para el recurso raíz

Sigue estos pasos:

1. En Recursos, selecciona el recurso que creaste. Por ejemplo, /key.
2. En Métodos, elige Crear método.
3. En la lista desplegable Tipo de método, elige GET.
4. En Tipo de integración, elige HTTP.
5. Selecciona una integración de proxy HTTP.
6. En la lista desplegable Método HTTP, elige GET.
7. En URL del punto de enlace, introduce http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}.<br id=hardline_break/> **Nota:Sustituye ** BUCKET\ _NAME por el nombre de tu bucket, REGION por la región del bucket y key por el nombre de tu recurso.
8. Selecciona Crear método.

Despliegue de la API de REST

Sigue estos pasos:

1. Elige Desplegar API.
2. En la lista desplegable Etapa, elige *Nueva etapa*.
3. En Nombre de la etapa, introduce un nombre. Por ejemplo, STAGE_NAME.
4. Selecciona Desplegar.
5. En Detalles de la etapa, anota la URL de invocación para probar tu API.
6. Para probar el proxy de API para el sitio web de S3, ejecuta el siguiente comando curl:

   curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/index.html

   **Nota:**Sustituye API_ID por tu ID de API, REGION por tu región y STAGE_NAME por el nombre de la etapa.

Uso de una integración de servicios de AWS

Configuración del sitio web estático de S3

Si tu sitio web estático de S3 está bloqueado al acceso público, configúralo para que solo puedas acceder a él desde el proxy de la API.

Sigue estos pasos:

1. Configura un sitio web estático en Amazon S3.<br id=hardline_break/> Nota: Al configurar el sitio web estático, omite la sección Paso 3: Configuración para editar el acceso público. Mantenga activada la configuración predeterminada Bloquear todo el acceso público.
2. Modifica una política de bucket que haga que el contenido del bucket esté disponible públicamente para permitir que el proxy de la API acceda solo al bucket de S3. Ejemplo de política de bucket:

   {  
     "Version": "2012-10-17",
     "Statement": [{
         "Sid": "APIProxyBucketPolicy",
         "Effect": "Allow",
         "Principal": {
           "Service": "apigateway.amazonaws.com"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::BUCKET_NAME/*",
         "Condition": {
           "ArnLike": {
             "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT_ID:API_ID/*/GET/"
           }
         }
     }]
   }

   Nota: Sustituye BUCKET_NAME por el nombre de tu bucket, REGION por tu región, ACCOUNT_ID por el ID de tu cuenta de AWS y API_ID por tu ID de API.
3. Crea una política de AWS Identity and Access Management (IAM) que permita que la API GetObject acceda al bucket de S3. Ejemplo de política de IAM:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Action": ["s3:GetObject"],
       "Resource": [
           "arn:aws:s3:::BUCKET_NAME/*"
       ]
     }]
   }

   Nota: Sustituye BUCKET_NAME por el nombre de tu bucket.
4. Crea un rol de IAM y, a continuación, adjunta la política de IAM anterior.
5. Anota el nombre de recurso de Amazon (ARN) del rol de IAM.<br id=hardline_break/> Nota: El rol de IAM debe contener la siguiente política de confianza para que API Gateway lo asuma:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Sid": "",
       "Effect": "Allow",
       "Principal": {
           "Service": "apigateway.amazonaws.com"
       },
       "Action": "sts:AssumeRole"
     }]
   }

Creación de un proxy de API de REST para el servicio de S3

Sigue estos pasos:

1. Abre la consola de API Gateway.
2. Selecciona Crear API.
3. En API de REST, selecciona Crear.
4. En Nombre de API, introduce un nombre para la API de REST.
5. En la lista desplegable Tipo de punto de enlace de API, elige el tipo de punto de enlace en función del lugar desde el que se origine la mayoría del tráfico de clientes.<br id=hardline_break/> Nota: Se recomienda utilizar puntos de enlace optimizados para la periferia para los servicios públicos a los que el tráfico de clientes accede desde Internet. Si el tráfico de clientes accede a tus API solo desde la misma región de AWS, usa puntos de enlace regionales.
6. Selecciona Crear API.

Creación del método GET para el recurso raíz

Sigue estos pasos:

1. Selecciona el recurso raíz /.
2. Selecciona Crear método.
3. En la lista desplegable Tipo de método, elige GET.
4. En Tipo de integración, elige Servicio de AWS.
5. En la lista desplegable Región de AWS, elige tu región.
6. Elige la lista desplegable Servicios de AWS y, a continuación, elige Simple Storage Service (S3).
7. En Subdominio de AWS, deja el campo en blanco.
8. En la lista desplegable Método HTTP, elige GET.
9. En Tipo de acción, elige Usar sustitución de ruta.
10. Para anular la ruta de acceso, introduce la ruta de tu bucket de S3. Por ejemplo, BUCKET_NAME/index.html.
11. En Rol de ejecución, introduce el ARN del rol de IAM.
12. Selecciona Crear método.

Nota: Esta configuración integra la solicitud de la API GET de frontend https://your-api-host/stage/ en el backend de S3 GET** https://your-s3-host/index.html**.

Creación de un objeto de recurso de API

Sigue estos pasos:

1. Elige Crear recurso.
2. En Ruta del recurso, mantén el valor como**/**.
3. En Nombre del recurso, introduce un nombre. Por ejemplo, {object}.
4. Elige Crear recurso.

Configuración de un método GET para el recurso

Sigue estos pasos:

1. En Recursos, selecciona el recurso que creaste. Por ejemplo, /objec.
2. Completa los pasos 2 a 12 de la sección Crear método GET para el recurso raíz.
3. Selecciona GET y, a continuación, selecciona Solicitud de integración.<br id=hardline_break/> Nota: Sustituye el objeto por el nombre de tu recurso.
4. Selecciona Editar.
5. Amplía los parámetros de ruta URL y, a continuación, elige Agregar parámetro de ruta.
6. En Nombre, escribe el nombre de tu recurso.
7. En Asignado desde, introduce el valor como method.request.path.object.<br id=hardline_break/> Nota: Sustituye el objeto por el nombre de tu recurso.
8. Selecciona Guardar.

Configuración las asignaciones de encabezados de respuesta para el método GET

Asigna el valor del parámetro de encabezado del tipo de contenido del backend a la contraparte del frontend para que el navegador procese la respuesta con el tipo de contenido.

Sigue estos pasos:

1. En Recursos, selecciona /.
2. Elige GET y, a continuación, elige Método de respuesta.
3. En Respuesta 200, elige Editar.
4. En Nombre del encabezado, selecciona Agregar encabezado.
5. Establece el nombre como tipo de contenido.
6. Selecciona Guardar.
7. Selecciona Respuesta de integración y, a continuación, elige Editar.
8. Amplía Asignaciones de encabezado, en Tipo de contenido e introduce el valor de asignación como integration.response.header.Content-Type.
9. Repite los pasos 2 a 8 para el método GET en el recurso /object.<br id=hardline_break/> Nota: Sustituye el objeto por el nombre de tu recurso.

Despliegue de la API de REST

Sigue estos pasos:

1. Elige Desplegar API.
2. En la lista desplegable Etapa, elige *Nueva etapa*.
3. En Nombre de la etapa, introduce un nombre. Por ejemplo, STAGE_NAME.
4. Selecciona Desplegar.
5. En Detalles de la etapa, anota la URL de invocación para probar tu API.

Para probar el proxy de API en tu sitio web estático de S3, ejecuta un comando curl.

Nota: En los siguientes ejemplos, sustituye API_ID por tu ID de API, REGION por tu región y STAGE_NAME por el nombre de la etapa.

Para probar el recurso raíz, ejecuta el siguiente comando curl:

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

Para probar el recurso del objeto, ejecuta el siguiente comando curl:

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

Información relacionada

Tutorial: Creación de una API de REST como proxy de Amazon S3

Alojamiento de un sitio web estático mediante Amazon S3

Desarrollo de las API de REST en API Gateway

Creación de una implementación de una API de REST en API Gateway