Share Your AWS re:Post Experience - Quick 3 Question Survey
Help us improve AWS re:Post! We're interested in understanding how you use re:Post and its impact on your AWS journey. Please take a moment to complete our brief 3-question survey.
¿Cómo puedo usar Amazon S3 para alojar un sitio web estático que usa API Gateway como proxy?
Quiero usar Amazon API Gateway para crear una API como proxy para mi sitio web estático y alojar el sitio web en Amazon Simple Storage Service (Amazon S3).
Resolución
Integración de proxy HTTP
Si tu sitio web estático es de acceso público, utiliza la integración HTTP y proporciona la URL del sitio web estático de S3 para la API.
En primer lugar, configura un sitio web estático en Amazon S3. A continuación, utiliza 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:
- En API de REST, selecciona Crear.
- En Nombre de API, introduce un nombre para la API de REST.
- En el menú Tipo de punto de enlace, elige el tipo de punto de enlace y, a continuación, elige Crear API.
- En el panel de navegación, selecciona Recursos en el nombre de la API.
- En el menú Acciones, selecciona Crear recurso.
- En Nombre del recurso, introduce un nombre, como clave.
- En Ruta de recurso, introduce un parámetro de ruta, como, {key}.
- Elige Crear recurso.
Creación del método para el recurso raíz
Sigue estos pasos:
- Elige el nombre del recurso {key}b.
- En el menú Acciones, selecciona Crear método.
- En el menú {key}, selecciona GET y, después, el icono de marca de verificación.
- En Tipo de integración, elige HTTP, selecciona Usar la integración de proxy HTTP y, a continuación, mantén el Método HTTP como GET.
- En URL del punto de enlace, introduce http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} y, a continuación, selecciona Guardar.
Despliegue de la API de REST
Sigue estos pasos:
-
En el menú Acciones, selecciona Implementar API.
-
En el menú Etapa de implementación, elige [Nueva etapa].
-
En Nombre de etapa, introduce un nombre, por ejemplo Dev.
-
Selecciona Desplegar.
-
En Dev Stage Editor, anota la URL de invocación para probar la API.
-
Usa el siguiente comando para probar el proxy de la API de tu sitio web de Amazon S3:
curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/index.html
Nota: Sustituye 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 tu sitio web estático de Amazon S3 está bloqueado al acceso público, configúralo para que solo se pueda acceder a él desde el proxy de la API.
Sigue estos pasos:
-
Configura un sitio web estático en Amazon S3.
Nota: Al configurar el sitio web estático, omite el paso 3. Mantén activada la configuración predeterminada Bloquear todo el acceso público. -
Modifica 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/" } } }] }
-
Crea 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": "*" }] }
-
Crea un rol de IAM y, a continuación, adjunta la política de IAM anterior.
-
Anota 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" }] }
Utiliza 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
Sigue estos pasos:
- Selecciona Crear API.
- Elija API de REST y , a continuación, elija Crear.
- En Nombre de API, introduce un nombre para la API de REST.
- En Tipo de punto de enlace, 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.
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 conexión regionales se utilizan principalmente para las API a las que se accede desde la misma región de AWS. - Selecciona 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, sigue estos pasos:
- Selecciona el recurso raíz "/".
- En el menú Acciones, selecciona Crear método.
- Selecciona GET y, a continuación, selecciona el icono de la marca de verificación.
- En Tipo de integración, elige Servicio de AWS.
- En el menú Región de AWS, selecciona tu región.
- En el menú Servicio de AWS, elige Simple Storage Service (S3).
- En Subdominio de AWS, deja el campo en blanco.
- En Método HTTP, selecciona GET.
- En Tipo de acción, elige Usar sustitución de ruta.
- En Sustitución de ruta, introduce la ruta del bucket de Amazon S3, como BUCKET_NOMBRE/index.html.
- En Rol de ejecución, introduce el ARN del rol de IAM.
- Selecciona 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, crea un recurso denominado {object} que asigne la ruta del objeto en la solicitud de la API de frontend. Por ejemplo, asigna GET https://your-api-host/stage/home.html al backend de S3 GET https://your-s3-host/home.html.
Sigue estos pasos:
- Elige Recursos.
- En el menú Acciones, elige Crear recurso.
- En Nombre del recurso, introduce un nombre, por ejemplo {object}.
- En Ruta de recurso, introduce una ruta, por ejemplo, {object}.
- Elige Crear recurso.
Configuración de un método GET para el recurso
Sigue estos pasos:
- Selecciona el {object}.
- En el menú Acciones, selecciona Crear método.
- Selecciona GET y, a continuación, selecciona el icono de la marca de verificación.
- En Tipo de integración, elige Servicio de AWS.
- En el menú Región de AWS, selecciona tu región.
- En el menú Servicio de AWS, elige Simple Storage Service (S3).
- En Subdominio de AWS, deja el campo en blanco.
- En Método HTTP, elige GET.
- En Tipo de acción, elige Usar sustitución de ruta.
- En Sustitución de ruta, introduce la ruta del bucket de Amazon S3, por ejemplo BUCKET_NOMBRE/{object}.
- En Rol de ejecución, introduce el ARN del rol de IAM.
- Selecciona Guardar.
- Elige GET en Nombre del recurso {object} y, a continuación, elige Solicitud de integración.
- Expande Parámetros de ruta de URL, introduce un objeto de valor de nombre e indica que se ha asignado de method.request.path.object. Activa la casilla de verificación para 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 correctamente la respuesta con el tipo de contenido.
Sigue estos pasos:
- Elige GET.
- En Resources /, elige Respuesta de método.
- Expande la flecha situada junto a HTTP Status 200.
- En Encabezados de respuesta para 200, selecciona Agregar encabezado.
- Elige el Nombre del encabezado como Content-Type y, a continuación, selecciona la casilla de verificación para guardar.
- Elige Ejecución de método.
- Elige Respuesta de integración y expande la flecha situada junto a Expresión regular de estado de HTTP.
- Amplía Asignaciones de encabezados.
- En Content-Type, introduce el valor de asignación como integration.response.header.Content-Type.
- Repite los pasos 1-6 para el método GET en Resource /{object}.
- Repite los pasos de la sección Despliegue de la API de REST de este artículo.
Probar el proxy de la API
Puedes usar un navegador o un comando curl para probar el proxy de la API de tu 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

Contenido relevante
- preguntada hace 24 díaslg...
- preguntada hace 2 meseslg...
- preguntada hace 2 meseslg...
- preguntada hace un díalg...
- preguntada hace un meslg...
- OFICIAL DE AWSActualizada hace 7 meses
- OFICIAL DE AWSActualizada hace 3 meses