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

Resolución

Integración de proxy HTTP

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

En primer lugar, configure un sitio web estático en Amazon S3. A continuación, utilice la consola de API Gateway para crear una API de REST y un método para el recurso raíz. Luego, despliegue su API de REST.

Creación de una API de REST

Siga estos pasos:

1. En API de REST, seleccione Crear.
2. En Nombre de API, introduzca un nombre para la API de REST.
3. En el menú Tipo de punto de enlace, elija el tipo de punto de enlace y, a continuación, elija Crear API.
4. En el panel de navegación, seleccione Recursos en el nombre de la API.
5. En el menú Acciones, seleccione Crear recurso.
6. En Nombre del recurso, introduzca un nombre, como clave.
7. En Ruta de recurso, introduzca un parámetro de ruta, como, {key}.
8. Elija Crear recurso.

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

Siga estos pasos:

1. Elija el nombre del recurso {key}b.
2. En el menú Acciones, seleccione Crear método.
3. En el menú {key}, seleccione GET y, después, el icono de marca de verificación.
4. En Tipo de integración, elija HTTP, seleccione Usar la integración de proxy HTTP y, a continuación, mantenga el Método HTTP como GET.
5. En URL del punto de enlace, introduzca http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} y, a continuación, seleccione Guardar.

Despliegue de la API de REST

Siga estos pasos:

1. En el menú Acciones, seleccione Desplegar API.

2. En el menú Etapa de despliegue, elija [Nueva etapa].

3. En Nombre de etapa, introduzca un nombre, por ejemplo Dev.

4. Seleccione Desplegar.

5. En Dev Stage Editor, anote la URL de invocación para probar la API.

6. Use el siguiente comando para probar el proxy de la API de su sitio web de Amazon S3:

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

   Nota: Sustituya la URL de ejemplo por la URL de invocación.

Integración de servicios de AWS

Configuración del sitio web estático de Amazon S3

Si su sitio web estático de Amazon S3 está bloqueado al acceso público, configúrelo para que solo se pueda acceder a él desde el proxy de la API.

Siga estos pasos:

1. Configure un sitio web estático en Amazon S3.
   Nota: Al configurar el sitio web estático, omita el paso 3. Mantenga activada la configuración predeterminada Bloquear todo el acceso público.

2. Modifique la política de bucket en el paso 4 para permitir que el proxy de la API acceda solo al bucket de Amazon S3:

   {
     "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:API_ID/*/GET/"
           }
         }
     }]
   }

3. Cree una política de AWS Identity and Access Management (IAM) que permita que la API GetObject acceda al bucket de Amazon S3:

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

4. Cree un rol de IAM y, a continuación, adjunte la política de IAM anterior.

5. Anote el ARN del rol de IAM para usarlo en un paso posterior.
   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"
     }]
   }

Utilice la consola de API Gateway para completar los pasos siguientes.

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

Siga estos pasos:

1. Seleccione Crear API.
2. Elija API de REST y, a continuación, elija Crear.
3. En Nombre de API, introduzca un nombre para la API de REST.
4. En Tipo de punto de enlace, elija el tipo de punto de enlace en función del lugar desde el que se origine la mayoría del tráfico de clientes.
   Nota: Se recomienda utilizar puntos de enlace optimizados para la periferia para los servicios públicos a los que se accede desde Internet. Los puntos de enlace regionales se utilizan principalmente para las API a las que se accede desde la misma región de AWS.
5. Seleccione Crear API.

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

Para configurar el método raíz para las solicitudes de proxy a los sitios web estáticos de Amazon S3, siga estos pasos:

1. Seleccione el recurso raíz "/".
2. En el menú Acciones, seleccione Crear método.
3. Seleccione GET y, a continuación, seleccione el icono de la marca de verificación.
4. En Tipo de integración, elija Servicio de AWS.
5. En el menú Región de AWS, seleccione su región.
6. En el menú Servicio de AWS, elija Simple Storage Service (S3).
7. En Subdominio de AWS, deje el campo en blanco.
8. En Método HTTP, seleccione GET.
9. En Tipo de acción, elija Usar sustitución de ruta.
10. En Sustitución de ruta, introduzca la ruta del bucket de Amazon S3, como BUCKET_NOMBRE/index.html.
11. En Rol de ejecución, introduzca el ARN del rol de IAM.
12. Seleccione Guardar.

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

Para acceder a objetos específicos desde un bucket de S3, cree un recurso denominado {object} que asigne la ruta del objeto en la solicitud de la API de frontend. Por ejemplo, asigne GET https://your-api-host/stage/home.html al backend de S3 GET https://your-s3-host/home.html.

Siga estos pasos:

1. Elija Recursos.
2. En el menú Acciones, elija Crear recurso.
3. En Nombre del recurso, introduzca un nombre, por ejemplo {object}.
4. En Ruta de recurso, introduzca una ruta, por ejemplo, {object}.
5. Elija Crear recurso.

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

Siga estos pasos:

1. Seleccione el {object}.
2. En el menú Acciones, seleccione Crear método.
3. Seleccione GET y, a continuación, seleccione el icono de la marca de verificación.
4. En Tipo de integración, elija Servicio de AWS.
5. En el menú Región de AWS, seleccione su región.
6. En el menú Servicio de AWS, elija Simple Storage Service (S3).
7. En Subdominio de AWS, deje el campo en blanco.
8. En Método HTTP, elija GET.
9. En Tipo de acción, elija Usar sustitución de ruta.
10. En Sustitución de ruta, introduzca la ruta del bucket de Amazon S3, por ejemplo BUCKET_NOMBRE/{object}.
11. En Rol de ejecución, introduzca el ARN del rol de IAM.
12. Seleccione Guardar.
13. Elija GET en Nombre del recurso {object} y, a continuación, elija Solicitud de integración.
14. Expanda Parámetros de ruta de URL, introduzca un objeto de valor de nombre e indique que se ha asignado de method.request.path.object. Active la casilla de verificación para guardar.

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

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

Siga estos pasos:

1. Elija GET.
2. En Resources /, elija Respuesta de método.
3. Expanda la flecha situada junto a HTTP Status 200.
4. En Encabezados de respuesta para 200, seleccione Agregar encabezado.
5. Elija el Nombre del encabezado como Content-Type y, a continuación, seleccione la casilla de verificación para guardar.
6. Elija Ejecución de método.
7. Elija Respuesta de integración y expanda la flecha situada junto a Expresión regular de estado de HTTP.
8. Amplíe Asignaciones de encabezados.
9. En Content-Type, introduzca el valor de asignación como integration.response.header.Content-Type.
10. Repita los pasos 1-6 para el método GET en Resource /{object}.
11. Repita los pasos de la sección Despliegue de la API de REST de este artículo.

Probar el proxy de la API

Puede usar un navegador o un comando curl para probar el proxy de la API de su sitio web estático de Amazon S3:

Recurso raíz (/)

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

Recurso {Object}

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