Como fazer upload de uma imagem ou arquivo PDF no Amazon S3 por meio do API Gateway?

Breve descrição

Para usar o API Gateway para fazer upload de uma imagem ou PDF como um arquivo binário em um bucket do Amazon S3, ative o suporte binário.

Para conceder ao API Gateway acesso ao seu bucket do S3, crie um perfil do AWS Identity and Access Management (AWS IAM). O perfil do IAM deve incluir permissões para o API Gateway executar as ações PutObject e GetObject no seu bucket do S3.

Resolução

Observação: se você receber erros ao executar comandos da AWS Command Line Interface (AWS CLI), consulte Solução de problemas da AWS CLI. Além disso, verifique se você está usando a versão mais recente da AWS CLI.

Criar um perfil do IAM para o API Gateway

Conclua as etapas a seguir:

1. Abra o console do IAM.
2. No painel de navegação, escolha Perfis.
3. Selecione Criar perfil.
4. Em Tipo de entidade confiável, selecione Serviço da AWS.
5. Em Serviço ou caso de uso, escolha API Gateway.
6. Em Caso de uso, selecione API Gateway.
7. Escolha Avançar. Em seguida, escolha Avançar novamente.
8. Em Nome do perfil, insira um nome para sua política. Por exemplo, api-gateway-upload-to-s3.
9. (Opcional) Para adicionar tags ao perfil do IAM, escolha Adicionar nova tag.
10. Selecione Criar perfil.

Criar e anexar uma política do IAM ao perfil do API Gateway

Conclua as etapas a seguir:

1. Abra o console do IAM.
2. No painel de navegação, escolha Perfis.
3. Na caixa de pesquisa, insira o nome do perfil do IAM do API Gateway e selecione o perfil na coluna Nome do perfil.
4. Na seção Políticas de permissões, escolha Adicionar permissões e, em seguida, Criar política em linha.
5. Na guia Editor visual, na seção Selecionar um serviço, escolha Escolher um serviço.
6. Insira S3 e, em seguida, escolha S3.
7. Em Ações permitidas, insira PutObject e escolha PutObject. Insira GetObject e escolha GetObject.
8. Expanda Recursos e escolha Específico.
9. Escolha Adicionar ARN.
10. Em Nome do bucket do recurso, insira o nome do seu bucket. Inclua o prefixo, se aplicável.
11. Em Nome do objeto do recurso, insira um nome de objeto.
    Observação: o nome do bucket especifica a localização dos arquivos carregados. O nome do objeto especifica o padrão que o objeto deve seguir para alinhamento de políticas. Para mais informações, consulte Regras de nomenclatura de buckets de uso geral e Visão geral de objetos do Amazon S3.
12. Escolha Adicionar ARNs.
13. Escolha Avançar.
14. Em Nome, insira o nome da sua política.
15. Selecione Criar política.

Criar uma API REST do API Gateway

Para criar uma API para entregar suas solicitações, conclua as etapas a seguir:

1. Abra o console do API Gateway.
2. No painel de navegação, escolha APIs.
3. Selecione Criar API.
4. Na página Escolher um tipo de API, em API REST, escolha Criar.
5. Em Nome da API, insira um nome para sua API e escolha Criar API.

Para criar recursos para sua API, conclua as etapas a seguir:

1. No painel Recursos da sua página de API, selecione /.
2. Escolha Criar recurso.
3. Em Caminho do recurso, escolha /.
4. Em Nome do recurso, insira {bucket}.
   Observação: bucket é um nome de variável que o usuário pode alterar.
5. Escolha Criar recurso.
6. No painel Recursos, selecione o recurso /{bucket}.
7. Escolha Criar recurso.
8. Em Caminho do recurso, escolha /{bucket}/.
9. Em Nome do recurso, digite {proxy+}.
10. Escolha Criar recurso.

Para criar um método PUT para sua API fazer upload de imagens ou arquivos PDF, conclua as etapas a seguir:

1. Na seção Métodos, escolha Criar método.
2. Em Tipo de método, escolha PUT.
3. Em Tipo de integração, selecione AWS Service.
4. Em Região da AWS, escolha us-east-1 ou a região da AWS que aparece na página Propriedades do bucket.
5. Em Serviço da AWS, escolha Simple Storage Service (S3).
6. Mantenha o Subdomínio da AWS vazio.
7. Em Método HTTP, escolha PUT.
8. Em Tipo de ação, escolha Usar substituição de caminho.
9. Em Substituição de caminho, insira {bucket}/{proxy}.
10. Em Perfil de execução, insira o Nome do recurso da Amazon (ARN) para o perfil do IAM.
11. Em Manuseio de conteúdo, escolha Passagem.
12. Escolha Criar método.

Configurar mapeamentos de parâmetros para o método PUT

Conclua as etapas a seguir:

1. No painel Recursos da sua página de API, escolha PUT.
2. Escolha Solicitação de integração e, em seguida, escolha Editar.
3. Expanda os parâmetros do caminho do URL.
4. Escolha Adicionar parâmetro de caminho.
5. Em Nome, insira bucket.
6. Em Mapeado de, insira method.request.path.bucket.
7. Repita as etapas 4 a 6; no entanto, para a etapa 5, defina Nome como key. Na etapa 6, defina Mapeado de como method.request.path.proxy.
8. Selecione Salvar.

Criar um método GET para a API recuperar uma imagem

Conclua as etapas a seguir:

1. No painel Recursos da sua página de API, escolha /{object}.
2. Na seção Métodos, escolha Criar método.
3. Em Tipo de método, escolha GET.
4. Em Tipo de integração, selecione AWS Service.
5. Em Região da AWS, escolha us-east-1 ou a região que aparece na página Propriedades do bucket.
6. Em Serviço da AWS, escolha Simple Storage Service (S3).
7. Mantenha o Subdomínio da AWS vazio.
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 {bucket}/{key}.
11. Em Perfil de execução, insira o ARN do perfil do IAM.
12. Em Manuseio de conteúdo, escolha Passagem.
13. Escolha Criar método.

Configurar mapeamentos de parâmetros para o método GET

Conclua as etapas a seguir:

1. No painel Recursos da sua página de API, escolha GET.
2. Escolha Solicitação de integração e, em seguida, escolha Editar.
3. Expanda os parâmetros do caminho do URL.
4. Escolha Adicionar parâmetros de caminho.
5. Em Nome, insira bucket.
6. Em Mapeado de, insira method.request.path.folder.
7. Repita as etapas 4 a 6; no entanto, para a etapa 5, defina Nome como key. Na etapa 6, defina Mapeado de como method.request.path.object.
8. Selecione Salvar.

Configurar o mapeamento de respostas para ver a imagem ou o PDF no navegador

Conclua as etapas a seguir:

1. No painel Recursos da sua página de API, escolha GET.
2. Escolha Resposta de método.
3. Em Resposta 200, escolha Editar.
4. Em Corpo da resposta, remova application/json.
5. Em Nome do cabeçalho, escolha Adicionar cabeçalho.
6. Em Nome, insira content-type.
7. Selecione Salvar.
8. Escolha Resposta de integração e, em seguida, Editar.
9. Em Código de status de resposta do método 200, insira image/jpeg para um arquivo de imagem ou application/pdf para um arquivo PDF.
10. Selecione Salvar.

Configurar tipos de mídia binária para a API

Conclua as etapas a seguir:

1. No painel de navegação da sua página de API, escolha Configurações de API.
2. Na seção Tipos de mídia binários, escolha Gerenciar tipos de mídia.
3. Escolha Adicionar tipo de mídia binário e, em seguida, adicione a string / na caixa de texto.
   Observação: não coloque a string entre aspas. É possível substituir um curinga por um tipo específico de Multipurpose Internet Mail Extensions (MIME) para gerenciar como um tipo de mídia binário. Por exemplo, para que o API Gateway gerencie imagens JPEG como tipos de mídia binários, escolha image/jpeg. Se você adicionar */*, o API Gateway gerenciará todos os tipos de mídia como binários.
4. Escolha Salvar alterações.

Resolver o erro de CORS com configurações binárias para API

Observação: se você usar as APIs PUT e GET em um aplicativo web, poderá receber um erro de compartilhamento de recursos entre origens (CORS). Para mais informações, consulte Erros de CORS no site do Mozilla.

Para resolver o erro CORS com as configurações binárias ativadas, conclua as etapas a seguir:

1. Abra o console do API Gateway.
2. Selecione sua API.
3. No painel Recursos da sua página de API, selecione /{object}.
4. Escolha Ativar CORS.
5. Em Respostas do gateway, escolha Default 4xx, Default 5xx.
6. Em Access-Control-Allow-Methods, escolha GET e PUT.
7. Selecione Salvar.
8. Execute o comando update-integration da AWS CLI:

   aws apigateway update-integration --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

   Observação: substitua rest-api-id pelo ID da API REST, RESOURCE_id pelo ID do recurso e AWS_REGION pela sua região.
9. Execute o comando update-integration-response:

   aws apigateway update-integration-response --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --status-code 200 --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

   Observação: substitua rest-api-id pelo ID da API REST, RESOURCE_id pelo ID do recurso e AWS_REGION pela sua região. Para que o API Gateway execute solicitações de opções, é preciso executar os comandos update-integration e update-integration-response um após o outro.

Implantar sua API

Conclua as etapas a seguir:

1. No painel de navegação da sua página de API, escolha Recursos.
2. Escolha Implantar API.
3. Na janela Implantar API, em Estágio, escolha *New stage*.
4. Em Nome do estágio, insira v1.
5. Escolha Implantar.
6. No painel de navegação, escolha Estágios.
7. Escolha o estágio v1.
8. Observe o URL de invocação que aparece.

Para mais informações, consulte Implantar APIs REST no API Gateway.

Invocar API REST para fazer upload de um arquivo de imagem no Amazon S3

Conclua as etapas a seguir:

1. Adicione o nome do bucket e o nome do arquivo do objeto ao URL de invocação da sua API.
2. Use seu cliente preferido para fazer uma solicitação HTTP PUT. Por exemplo, é possível baixar e usar o Postman. Para mais informações, consulte Download Postman (Baixar Postman) no site do Postman.
3. Escolha Corpo e depois binário. Quando o botão Selecionar arquivo for exibido, selecione um arquivo local para fazer upload.

Veja a seguir um exemplo de comando curl que é possível executar para fazer uma solicitação HTTP PUT para fazer upload de uma imagem ou PDF:

curl -i --location --request PUT 'https://abc12345.execute-api.us-west-2.amazonaws.com/v1/testfolder/testimage.jpeg' --header 'Content-Type: text/plain' --data-binary '@/Path/to/file/image.jpeg'

Observação: substitua abc12345 pelo ID da API, testfolder pelo bucket do S3 e testimage.jpeg pelo arquivo local que você carregou.

Se você incluiu */* na lista de tipos de mídia binários, será possível fazer uma solicitação PUT para fazer upload do arquivo. Se você incluiu image.jpeg na lista de tipos de mídia binários, adicione o cabeçalho Content-Type à sua solicitação PUT e envie para image/jpeg. Como o navegador da web faz uma solicitação GET, é possível visualizar a imagem ou o PDF em um navegador da web com a mesma URL.

Informações relacionadas

Habilitar o suporte a binários usando a API REST do API Gateway

Ativar o CORS em um recurso usando o console do API Gateway