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

Resolução

Você pode usar o Amazon S3 para hospedar sites estáticos. Você também pode usar a integração do proxy HTTP ou a integração de serviços da AWS para configurar o API Gateway como um proxy para o site estático do Amazon S3.

Integração do proxy HTTP

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

Se ainda não tiver feito isso, siga o tutorial para configurar um site estático no Amazon S3.

Criar uma API REST

1. Abra o Console do API Gateway.
2. Em API REST, escolha Criar.
3. Em Nome da API, insira um nome para sua API REST.
4. Escolha a lista suspensa Tipo de endpoint, selecione o tipo de endpoint e, em seguida, escolha Criar API.
5. No painel de navegação, escolha Recursos abaixo do nome da sua API.
6. Escolha a lista suspensa Ações e, em seguida, selecione Criar recurso.
7. Em Nome do recurso, insira um nome. Por exemplo, key.
8. Em Caminho do recurso, insira um parâmetro de caminho. Por exemplo, {key}.
9. Escolha Criar recurso.

Criar o método para o recurso raiz

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

Implantar a API REST

1. Na lista suspensa Ações, escolha Implantar API.
2. Na lista suspensa Estágio de implantação, escolha [Novo estágio].
3. Em Nome do estágio, insira um nome. Por exemplo, Dev.
4. Escolha Implantar. No Editor de estágios de desenvolvimento, anote o URL Invoke. Você precisará dele mais tarde para testar sua API.
5. Use um comando curl semelhante ao seguinte para testar o proxy da API para o seu site do Amazon S3:

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

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.

1. Se ainda não tiver feito isso, siga o tutorial para configurar um site estático no Amazon S3.
   Observação: pule a Etapa 3 do tutorial e mantenha a configuração padrão Bloquear todo o acesso público habilitada.

2. Modifique a política de bucket na Etapa 4 do tutorial para permitir que o proxy da API acesse somente o bucket do Amazon S3, semelhante ao seguinte exemplo:

   {
     "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 (IAM) com a permissão para a API GetObject para o 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 do IAM criada na etapa anterior a esse novo perfil.

5. Copie o ARN de perfis do IAM. Você precisará disso em outra etapa.
   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"
     }]
   }

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

1. Abra o Console do API Gateway.
2. Escolha Criar API.
3. Escolha API REST e, em seguida, Criar.
4. Em Nome da API, insira um nome para sua API REST.
5. Em Tipo de endpoint, escolha o tipo de endpoint dependendo da 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.
6. Escolha Criar API.

Criar o método GET para o recurso raiz

O método raiz é configurado para solicitações de proxy de sites estáticos do Amazon S3.

1. Com o recurso raiz "/" selecionado, escolha a lista suspensa Ações e, em seguida, Criar método.
2. Selecione GET na lista suspensa e escolha o ícone de marca de seleção.
3. Em Tipo de integração, selecione Serviço da AWS.
4. Escolha a lista suspensa Regiões da AWS e, em seguida, selecione sua região.
5. Escolha a lista suspensa Serviço da AWS e, em seguida, selecione Simple Storage Service (S3).
6. Deixe o campo Subdomínio da AWS em branco.
7. Em Método HTTP, selecione GET.
8. Em Tipo de ação, escolha Usar substituição de caminho.
9. Em Substituição de caminho, insira o caminho do bucket do Amazon S3 semelhante a BUCKET_NAME/index.html.
10. Em Perfil de execução, cole o ARN do perfil do IAM que você criou anteriormente.
11. Escolha Salvar.

Essa configuração integra a solicitação da API de frontend GET https://your-api-host/stage/ ao backend 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 frontend. Por exemplo, GET https://your-api-host/stage/home.html para o backend do S3 GET https://your-s3-host/home.html.

1. Em Recursos, escolha a lista suspensa Ações e, em seguida, selecione Criar recurso.
2. Em Nome do recurso, insira um nome. Por exemplo, {object}.
3. Em Caminho do recurso, insira um caminho. Por exemplo, {object}.
4. Escolha Criar recurso.

Configurar um método GET para o recurso

1. Com o recurso {object} selecionado, escolha a lista suspensa Ações e, em seguida, selecione Criar método.
2. Escolha GET na lista suspensa e, em seguida, o ícone de marca de seleção.
3. Em Tipo de integração, selecione Serviço da AWS.
4. Escolha a lista suspensa Regiões da AWS e, em seguida, selecione sua região.
5. Escolha a lista suspensa Serviço da AWS e, em seguida, selecione Simple Storage Service (S3).
6. Deixe o campo Subdomínio da AWS em branco.
7. Em Método HTTP, escolha GET.
8. Em Tipo de ação, escolha Usar substituição de caminho.
9. Para Substituição de caminho, insira seu caminho de bucket do Amazon S3, semelhante a BUCKET_NAME/{object}.
10. Em Perfil de execução, cole o ARN do perfil do IAM que você criou anteriormente.
11. Escolha Salvar.
12. Escolha GET para Nome do recurso {object} e selecione Solicitação de integração.
13. Expanda Parâmetros de caminho de URL, insira informações em Objeto de valor de nome e Mapeado do valor method.request.path.object e 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 backend para a contraparte frontend. Isso garante que o navegador processe a resposta exitosamente com o tipo de conteúdo.

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

Testar o proxy da API

Você pode testar o proxy da API do seu site estático do Amazon S3 usando um navegador ou um comando curl semelhante ao seguinte:

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: Criar uma API REST como um proxy do Amazon S3 no API Gateway

Hospedagem de um site estático usando o Amazon S3

Criação de uma API REST no Amazon API Gateway

Implantar uma API REST pelo console do API Gateway