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

Resolução

Para usar o Amazon S3 para hospedar um site estático que usa o API Gateway como proxy, use uma integração HTTP ou uma integração de serviço da AWS.

Use uma integração HTTP

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

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.

Crie uma API REST

Conclua as etapas a seguir:

1. Abra o console do API Gateway.
2. Clique em Criar API.
3. Em API REST, selecione Criar.
4. Em Nome da API, insira um nome para sua API REST.
5. Na lista suspensa Tipo de endpoint de API, selecione o seu tipo de endpoint e, em seguida, clique em Criar API.
6. No painel de navegação, selecione Recursos abaixo do nome da sua API.
7. Clique em Criar recurso.
8. Em Caminho do recurso, mantenha como /.
9. Em Nome do recurso, insira um nome. Por exemplo, key.
10. Clique em Criar recurso.

Crie o método para o recurso raiz

Conclua as etapas a seguir:

1. Em Recursos, selecione o recurso que você criou. Por exemplo, /key.
2. Em Métodos, clique em Criar método.
3. Na lista suspensa Tipo de método, selecione GET.
4. Em Tipo de integração, clique em HTTP.
5. Selecione HTTP integração proxy.
6. Na lista suspensa Método HTTP, clique em GET.
7. No URL do endpoint, insira http://BUCKET_NAME.s3-website.REGION.amazonaws.com/key.<br id=hardline_break/> Observação: substitua BUCKET_NAME pelo nome do seu bucket, REGION pela região do seu bucket e key pelo nome do seu recurso.
8. Clique em Criar método.

Implante a API REST

Conclua as etapas a seguir:

1. Selecione Implantar API.
2. Na lista suspensa Estágio, clique em *New Stage*.
3. Em Nome do estágio, insira um nome. Por exemplo, STAGE_NAME.
4. Selecione Implantar.
5. Em Detalhes do estágio, anote o URL de invocação para testar sua API.
6. Para testar o proxy da API em seu site do S3, execute o seguinte comando curl:

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

   Observação: substitua API_ID pelo ID da sua API, REGION pela sua região e STAGE_NAME pelo nome do seu estágio.

Use uma integração de serviços da AWS

Configure o site estático do S3

Se o seu site estático do 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.<br id=hardline_break/> Observação: ao configurar o site estático, pule a seção Etapa 3: edite as configurações de Bloqueio de acesso público. Mantenha a configuração padrão Bloquear todo o acesso público ativada.
2. Modifique uma política de bucket que disponibilize publicamente o conteúdo do seu bucket para permitir que o proxy da API acesse somente o bucket do S3. Exemplo 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/"
           }
         }
     }]
   }

   Observação: substitua BUCKET_NAME pelo nome do seu bucket, REGION pela sua região, ACCOUNT_ID pelo ID da sua conta da AWS e API_ID pelo ID da sua API.
3. Crie uma política do AWS Identity and Access Management (AWS IAM) para permitir que a API GetObject acesse o bucket do S3. Exemplo de política do IAM:

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

   Observação: substitua BUCKET_NAME pelo nome do seu bucket.
4. Crie um perfil do IAM e anexe a política do IAM anterior.
5. Anote o nome do recurso da Amazon (ARN) do perfil do IAM.<br id=hardline_break/> Observação: 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"
     }]
   }

Crie um proxy da API REST para o serviço do S3

Conclua as etapas a seguir:

1. Abra o console do API Gateway.
2. Clique em Criar API.
3. Em API REST, selecione Criar.
4. Em Nome da API, insira um nome para sua API REST.
5. Em Tipo de endpoint de API, selecione o tipo de endpoint com base na origem da maior parte do tráfego do cliente.<br id=hardline_break/> Observação: é uma prática recomendada usar endpoints otimizados para borda para serviços públicos acessados pela internet. Se o tráfego do seu cliente acessar suas APIs somente de dentro da mesma região da AWS, use endpoints regionais.
6. Clique em Criar API.

Crie o método GET para o recurso raiz

Conclua as etapas a seguir:

1. Selecione o recurso raiz /.
2. Clique em Criar método.
3. Na lista suspensa Tipo de método, selecione GET.
4. Em Tipo de integração, clique em Serviço AWS.
5. Na lista suspensa Região da AWS, selecione sua região.
6. Na lista suspensa Serviço da AWS clique em Simple Storage Service (S3).
7. Em Subdomínio da AWS, mantenha o campo em branco.
8. Na lista suspensa Método HTTP, clique em GET.
9. Em Tipo de ação, selecione Usar substituição de caminho.
10. Em Substituição de caminho, insira o caminho do seu bucket do S3. Por exemplo, BUCKET_NAME/index.html.
11. Em Perfil de execução, insira o ARN do perfil do IAM.
12. Clique em Criar método.

Observação: a configuração integra a solicitação GET da API no frontend https://your-api-host/stage/ ao backend GET do S3 https://your-s3-host/index.html.

Crie um objeto de recurso de API

Conclua as etapas a seguir:

1. Clique em Criar recurso.
2. Em Caminho do recurso, mantenha como /.
3. Em Nome do recurso, insira um nome. Por exemplo, object.
4. Clique em Criar recurso.

Configure um método GET para o recurso

Conclua as etapas a seguir:

1. Em Recursos, selecione o recurso que você criou. Por exemplo, \object.
2. Conclua as etapas 2 a 12 da seção Crie o método GET para o recurso raiz.
3. Clique em GET e, em seguida, selecione Solicitação da integração.<br id=hardline_break/> Observação: substitua object pelo nome do seu recurso.
4. Clique em Editar.
5. Expanda Parâmetros do caminho do URL e selecione Adicionar parâmetro do caminho.
6. Em Nome, insira o nome do seu recurso.
7. Em Mapeado de, insira o valor como method.request.path.object.<br id=hardline_break/> Observação: substitua object pelo nome do seu recurso.
8. Clique em Salvar.

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

Você deve mapear o valor do parâmetro do cabeçalho do tipo de conteúdo de backend para a contraparte de frontend para que o navegador processe a resposta com o tipo de conteúdo.

Conclua as etapas a seguir:

1. Em Recursos, selecione /.
2. Clique em GET e, em seguida, selecione Resposta do método.
3. Em Resposta 200, clique em Editar.
4. Em Nome do cabeçalho, selecione Adicionar cabeçalho.
5. Defina o Nome como Content-Type.
6. Clique em Salvar.
7. Selecione Resposta de integração e, em seguida, Editar.
8. Em Mapeamentos de cabeçalho, ao lado de Content-Type, insira o Valor do mapeamento como integration.response.header.Content-Type.
9. Repita as etapas de 2 a 8 para o método GET no recurso /object.<br id=hardline_break/> Observação: substitua object pelo nome do seu recurso.

Implante a API REST

Conclua as etapas a seguir:

1. Selecione Implantar API.
2. Na lista suspensa Estágio, clique em *New Stage*.
3. Em Nome do estágio, insira um nome. Por exemplo, STAGE_NAME.
4. Selecione Implantar.
5. Em Detalhes do estágio, anote o URL de invocação para testar sua API.

Para testar o proxy da API em seu site estático do S3, execute um comando curl.

Observação: nos exemplos a seguir, substitua API_ID pelo ID da sua API, REGION pela sua região e STAGE_NAME pelo nome do seu estágio.

Para testar o recurso raiz, execute o seguinte comando curl:

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

Para testar o recurso do objeto, execute o seguinte comando curl:

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

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