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

Solución

Puede utilizar Amazon S3 para alojar sitios web estáticos. También puede utilizar la integración de proxy HTTP o la integración de servicios de AWS para configurar API Gateway como proxy para el sitio web estático de Amazon S3.

Integración de proxy HTTP

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

Si aún no lo ha hecho, siga el tutorial para configurar un sitio web estático en Amazon S3.

Crear una API de REST

1. Abra la consola de API Gateway.
2. En API de REST, seleccione Crear.
3. Para el Nombre de la API, introduzca un nombre para la API de REST.
4. Elija la lista desplegable Tipo de punto de enlace, elija su tipo de punto de enlace y, a continuación, elija Crear API.
5. En el panel de navegación, seleccione Recursos en el nombre de su API.
6. Elija la lista desplegable Acciones y, a continuación, elija Crear recurso.
7. En Nombre del recurso, introduzca un nombre. Por ejemplo, clave.
8. En Ruta de recurso, introduzca un parámetro de ruta. Por ejemplo, {clave}.
9. Elija Crear recurso.

Crear el método para el recurso raíz

1. Elija el nombre del recurso {key}, elija la lista desplegable Acciones y, a continuación, elija Crear método.
2. En la lista desplegable, seleccione {key} y, a continuación, seleccione GET y, después, el icono de marca de verificación.
3. Para el 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.
4. Para la URL del punto de enlace, introduzca http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} y, a continuación, seleccione Guardar.

Implementar la API de REST

1. En la lista desplegable Acciones, seleccione Implementar API.
2. En la lista desplegable de Etapa de implementación, elija [Nueva etapa].
3. En Nombre de la etapa, introduzca un nombre. Por ejemplo, Dev.
4. Elija Implementar. Desde Dev Stage Editor, anote la URL de invocación. La necesitará más adelante para probar su API.
5. Utilice un comando curl similar al siguiente 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

Integración de servicios de AWS

Configurar el sitio web estático de Amazon S3

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

1. Si aún no lo ha hecho, siga el tutorial para configurar un sitio web estático en Amazon S3.
   Nota: Omita el paso 3 del tutorial y mantenga activada la configuración predeterminada Bloquear todo el acceso público.

2. Modifique la política de bucket en el Paso 4 del tutorial para permitir que el proxy de API acceda solo al bucket de Amazon S3, de forma similar al siguiente ejemplo:

   {
     "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) con permiso para la API GetObject en el bucket de Amazon S3.

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

4. Cree un rol de IAM y asocie la política de IAM creada en el paso anterior a este nuevo rol.

5. Copie el ARN del rol de IAM. Lo necesitará 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"
     }]
   }

Crear un proxy de API de REST para el servicio Amazon S3

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

Crear el método GET para el recurso raíz

El método raíz está configurado para las solicitudes de proxy a sitios web estáticos de Amazon S3.

1. Con el recurso raíz «/» seleccionado, elija la lista desplegable Acciones y, a continuación, elija Crear método.
2. En la lista desplegable, seleccione GET y, a continuación, seleccione el icono de marca de verificación.
3. En Tipo de integración, elija Servicio de AWS.
4. Elija la lista desplegable Región de AWS y, a continuación, elija su región.
5. Elija la lista desplegable Servicios de AWS y, a continuación, elija Simple Storage Service (S3).
6. Para el Subdominio de AWS, deje este campo en blanco.
7. Para el Método HTTP, seleccione GET.
8. En Tipo de acción, elija Usar sustitución de ruta.
9. En Sustitución de ruta, introduzca la ruta del bucket de Amazon S3 similar a BUCKET_NAME/index.html.
10. En Rol de ejecución, pegue el ARN del rol de IAM que creó anteriormente.
11. Elija Guardar.

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

Crear 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, GET https://your-api-host/stage/home.html al backend de S3 GET https://your-s3-host/home.html.

1. En Recursos, seleccione la lista desplegable Acciones y, a continuación, seleccione Crear recurso.
2. En Nombre del recurso, introduzca un nombre. Por ejemplo, {object}.
3. En Ruta del recurso, introduzca una ruta. Por ejemplo, {object}.
4. Elija Crear recurso.

Configurar un método GET para el recurso

1. Con el recurso {object} seleccionado, elija la lista desplegable Acciones y, a continuación, elija Crear método.
2. En la lista desplegable, seleccione GET y, a continuación, seleccione el icono de marca de verificación.
3. En Tipo de integración, elija Servicio de AWS.
4. Elija la lista desplegable Región de AWS y, a continuación, elija su región.
5. Elija la lista desplegable Servicios de AWS y, a continuación, elija Simple Storage Service (S3).
6. Para el Subdominio de AWS, deje este campo en blanco.
7. Para el método HTTP, elija GET.
8. En Tipo de acción, elija Usar sustitución de ruta.
9. En Sustitución de ruta, introduzca la ruta del bucket de Amazon S3 similar a BUCKET_NAME/{object}.
10. En Rol de ejecución, pegue el ARN del rol de IAM que creó anteriormente.
11. Elija Guardar.
12. Elija GET para el Nombre del recurso {object} y, a continuación, elija Solicitud de integración.
13. Expanda los Parámetros de la ruta URL, introduzca un objeto de valor de nombre y Mapped from value method.request.path.object y active la casilla de verificación para guardar.

Configurar las asignaciones de encabezados de respuesta para el método GET

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

1. Elija GET, en Resources /, elija Respuesta de método.
2. Expanda la flecha situada junto a HTTP Status 200 y, en Response Headers for 200, elija Agregar encabezado.
3. Elija el Nombre del encabezado como Content-Type y, a continuación, seleccione la casilla de verificación para guardar.
4. Elija Ejecución de método.
5. Elija Respuesta de integración y expanda la flecha situada junto a Expresión regular de estado de HTTP.
6. Amplíe Mapeos de encabezado, para Content-Type, introduzca el valor de mapeo como integration.response.header.Content-Type.
7. Repita los pasos 1-6 para el método GET en Resource/{object}.
8. Repita los pasos de la sección Implementar la API de REST.

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: Crear una API de REST como proxy de Amazon S3 en API Gateway

Alojamiento de un sitio web estático mediante Amazon S3

Creación de una API REST en Amazon API Gateway

Implementación de una API de REST desde la consola de API Gateway