Como faço para usar o Amazon S3 para hospedar um site estático que usa o API Gateway como proxy?

Resolução

Integração do proxy HTTP

Se o seu site estático estiver acessível publicamente, use a integração HTTP e forneça o URL do site estático do S3 para a API.

Primeiro, configure um site estático no Amazon S3. Em seguida, use o console do API Gateway para criar uma API REST e um método para o recurso raiz, e implante sua API REST.

Criar uma API REST

Conclua as etapas a seguir:

1. Em API REST, escolha Criar.
2. Em Nome da API, insira um nome para sua API REST.
3. No menu Tipo de endpoint, escolha seu tipo de endpoint e escolha Criar API.
4. No painel de navegação, escolha Recursos abaixo do nome da sua API.
5. No menu Ações, escolha Criar recurso.
6. Em Nome do recurso, insira um nome, por exemplo, chave.
7. Em Resource rath, insira um parâmetro de caminho, por exemplo, {key}.
8. Escolha Criar recurso.

Criar o método para o recurso raiz

Conclua as etapas a seguir:

1. Escolha o nome do recurso {key}b.
2. No menu Ações, escolha Criar método.
3. No menu {key}, escolha GET e, em seguida, escolha o ícone de marca de seleção.
4. Em Tipo de integração, escolha HTTP, selecione Usar a integração de proxy HTTP e mantenha o Método HTTP como GET.
5. No URL do endpoint, insira http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} e escolha Salvar.

Implantar a API REST

Conclua as etapas a seguir:

1. No menu Ações, escolha Implantar API.

2. No menu Estágio de implantação, escolha [New Stage].

3. Em Nome do estágio, insira um nome, por exemplo, Dev.

4. Escolha Implantar.

5. Em Dev Stage Editor, anote o URL de invocação para testar sua API.

6. Execute o comando a seguir para testar o proxy da API para seu site do Amazon S3:

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

   Observação: Substitua o URL de exemplo pelo seu URL de invocação.

Integração de serviços da AWS

Configurar o site estático do Amazon S3

Se o seu site estático do Amazon S3 estiver bloqueado para acesso público, configure o site para que ele seja acessado somente pelo proxy da API.

Conclua as etapas a seguir:

1. Configure um site estático no Amazon S3.
   Observação: Ao configurar o site estático, pule a etapa 3. Mantenha a configuração padrão Bloquear todo o acesso público ativada.

2. Modifique a política do bucket na etapa 4 para permitir que o proxy da API acesse somente o bucket do 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. Crie uma política do AWS Identity and Access Management (AWS IAM) para permitir que a API GetObject no bucket do Amazon S3:

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

4. Crie um perfil do IAM e anexe a política anterior do IAM.

5. Anote o ARN do perfil do IAM para usar em uma etapa posterior.
   O perfil do IAM deve conter a seguinte política de confiança para que o API Gateway assuma o perfil:

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

Use o console do API Gateway para concluir as etapas a seguir.

Criar um proxy da API REST para o serviço do Amazon S3

Conclua as etapas a seguir:

1. Escolha Criar API.
2. Escolha API REST e, em seguida, Criar.
3. Em Nome da API, insira um nome para sua API REST.
4. Em Tipo de endpoint, escolha o tipo de endpoint com base na origem da maior parte do tráfego do cliente.
   Observação: é uma prática recomendada usar endpoints otimizados para borda para serviços públicos acessados pela Internet. Endpoints regionais são usados principalmente para APIs que são acessadas na mesma região da AWS.
5. Escolha Criar API.

Criar o método GET para o recurso raiz

Para configurar o método raiz para solicitações de proxy para sites estáticos do Amazon S3, conclua as seguintes etapas:

1. Selecione o recurso raiz “/”.
2. No menu Ações, escolha Criar método.
3. Escolha GET e, em seguida, escolha o ícone de marca de seleção.
4. Em Tipo de integração, selecione Serviço AWS.
5. No menu Região da AWS, escolha sua região.
6. No menu Serviços da AWS, escolha Simple Storage Service (S3).
7. Em Subdomínio da AWS, mantenha o campo em branco.
8. Em Método HTTP, selecione GET.
9. Em Tipo de ação, escolha Usar substituição de caminho.
10. Em Substituição de caminho, insira o caminho do bucket do Amazon S3, por exemplo, BUCKET_NAME/index.html.
11. Em Perfil de execução, insira o ARN do perfil do IAM.
12. Escolha Salvar.

Essa configuração integra a solicitação da API GET de front-end https://your-api-host/stage/ ao back-end do S3 GET https://your-s3-host/index.html.

Criar um objeto de recurso de API

Para acessar objetos específicos de um bucket do S3, crie um recurso chamado {object} que mapeie o caminho do objeto na solicitação da API de front-end. Por exemplo, mapeie GET https://your-api-host/stage/home.html para o GET de back-end do S3 https://your-s3-host/home.html.

Conclua as etapas a seguir:

1. Escolha Recursos.
2. No menu Ações, escolha Criar recurso.
3. Em Nome do recurso, insira um nome, por exemplo, {object}.
4. Em Caminho do recurso, insira um caminho, por exemplo, {object}.
5. Escolha Criar recurso.

Configurar um método GET para o recurso

Conclua as etapas a seguir:

1. Selecione o {object}.
2. No menu Ações, escolha Criar método.
3. Escolha GET e, em seguida, escolha o ícone de marca de seleção.
4. Em Tipo de integração, selecione Serviço AWS.
5. No menu Região da AWS, escolha sua região.
6. No menu Serviços da AWS, escolha Simple Storage Service (S3).
7. Em Subdomínio da AWS, mantenha o campo em branco.
8. Em Método HTTP, escolha GET.
9. Em Tipo de ação, escolha Usar substituição de caminho.
10. Em Substituição de caminho, insira seu caminho de bucket do Amazon S3, por exemplo, BUCKET_NAME/{object}.
11. Em Perfil de execução, insira o ARN do perfil do IAM.
12. Escolha Salvar.
13. Escolha GET para Nome do recurso {object} e selecione Solicitação de integração.
14. Expanda Parâmetros de caminho de URL, insira informações em objeto de valor de nome e o valor mapeado de method.request.path.object e, em seguida, marque a caixa de seleção para salvar.

Configurar os mapeamentos do cabeçalho de resposta do método GET

Mapeie o valor do parâmetro do cabeçalho do tipo de conteúdo de back-end para a contraparte de front-end, para que o navegador processe com êxito a resposta com o tipo de conteúdo.

Conclua as etapas a seguir:

1. Escolha GET.
2. Em Recursos /, escolha Resposta do método.
3. Expanda a seta ao lado de HTTP Status 200.
4. Em Cabeçalhos de resposta para 200, escolha Adicionar cabeçalho.
5. Escolha o cabeçalho Name como Content-Type e, em seguida, selecione a caixa de seleção para salvar.
6. Escolha Execução de método.
7. Escolha Resposta de integração e então expanda a seta ao lado de Regex de status HTTP.
8. Expanda os mapeamentos de cabeçalho.
9. Em Content-Type, insira o valor do mapeamento como integration.response.header.Content-Type.
10. Repita as etapas de 1 a 6 para o método GET em Recurso /{object}.
11. Repita as etapas na seção Implantar a API REST deste artigo.

Testar o proxy da API

Para testar o proxy da API do seu site estático do Amazon S3, use um navegador ou um comando curl:

Root (/) resource

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

{Object} resource

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

Informações relacionadas

Tutorial: Crie uma API REST como um proxy do Amazon S3

Hospedagem de um site estático usando o Amazon S3

Desenvolver APIs REST no API Gateway

Crie uma implantação para uma API REST no API Gateway