Como posso usar o AWS CloudFront e o API Gateway lado a lado para o mesmo domínio?

Question

Estou colocando os recursos estáticos do meu site no S3 e configurando o CloudFront para distribuí-los. Essencialmente, eles armazenam o conteúdo que os usuários precisariam para qualquer solicitação GET no meu site, para caminhos existentes, ou seja, com um erro para erros.

Eu também tenho algumas solicitações POST que preciso tratar. Formulário de envios, envio de e-mails, notificações, interagindo com o banco de dados.

Como posso configurar o Lambda (ou o API Gateway) lado a lado com o CloudFront para o mesmo domínio para que o CloudFront manipule solicitações GET, e o API Gateway lida com solicitações com um corpo ou solicitações de POST. Ou posso fazê-lo por URL individual de alguma forma?

    

Answer 1

Eu executo vários aplicativos da web exatamente com o design proposto, e eu extraí gofaas , um aplicativo educativo Go e Lambda, para compartilhar as técnicas.

Você precisa de dois domínios separados, por exemplo, www.gofaas.net para S3 + CloudFront e api.gofaas.net para o API Gateway + Lambda.

Em seguida, você pode deixar seu site estático interagir com a API com uma configuração de CORS de API Gateway e algum JavaScript:

fetch('https://api.gofaas.net/work', {
    method: "POST",
    mode: "cors",
    headers: {
        "Accept": "application/json",
        ...
    },
    body: JSON.stringify(...)
})
    .then(function(response) {
        return response.json();
    })
    .then(function (json) {
        // use response
    })
    .catch(function (err) {
        console.log("fetch error", err);
    });

Aqui estão alguns guias para configurar tudo isso:

Sites estáticos com S3, CloudFront e ACM

API Security com Lambda, API Gateway, CORS e JWT

    

Answer 2

Do ponto de vista da conexão, "alguma coisa" precisa responder às suas solicitações (GET, POST, PUT, tudo). Primeiro de tudo você tem uma conexão TCP e "alguma coisa" precisa ter certeza de que está entendendo a camada 7 e fazendo sentido dos bytes que o cliente está enviando. Somente nesse momento é possível manipular solicitações GET de maneira diferente das solicitações POST ou uma URL que outra URL. Então, no final, você precisa de um serviço que seja capaz de entender e rotear o HTTP. Os seguintes serviços são capazes de fazer isso: CloudFront ELB / ALB Gateway de API (limitação vem depois)

O API Gateway usa o CloudFront internamente (sem lhe dar a chance de realmente configurar nada no nível do CloudFront) - isso significa que não há como executar o CloudFront e o API Gateway lado a lado, pois no final isso significaria CloudFront com CloudFront lado a lado.

O CloudFront lhe dá a chance de selecionar diferentes origens baseadas em padrões - mas você só pode selecionar S3 ou ELB / ALBs como origem - não as funções do Lambda (além da funcionalidade Lambda @ Edge).

O ALB / ELB só pode usar instâncias do EC2 como back-end - não há Lambda ou S3 aqui.

As únicas maneiras em que posso pensar sobre o que você pode fazer são:

• Você usa o API Gateway e roteia um caminho "asset" específico para uma função do Lambda que faz o tipo de proxy reverso do S3 (então, canalizando os recursos estáticos pelo lambda) - esteja ciente dos custos do Lambda aqui!
• Você poderia fazer o mesmo, mas em vez de canalizar o ativo pelo Lambda, basta gerar um URL assinado dentro do Lambda um redirecionamento diretamente para o S3 para exibição (pode ser mais eficiente)
• Usando diferentes subdomínios para seus ativos do que o restante de seu aplicativo - esse é um padrão muito comum, pois você pode dividir facilmente no nível DNS e usar serviços diferentes para os diferentes casos de uso (CloudFront para ativos e API Gateway para o partes não estáticas)

Portanto, minha chamada seria a última opção - mas isso significa que você precisa apontar os clientes / navegadores para um subdomínio separado para todos os ativos estáticos (ou para todas as solicitações POST).

Parece que você quer dar uma olhada em tecnologias como AngularJS ou React para criar um aplicativo verdadeiramente orientado por API no navegador. Com essa abordagem, você está executando uma API real que está lidando com todas as solicitações "dinâmicas" com um gateway de API e entregando o próprio aplicativo do S3 como um ativo estático. Talvez olhar para eles possa ajudá-lo a encontrar o seu caminho - mesmo que você não os use, o padrão arquitetural de como construir coisas como essas é o que você está pedindo para imho.

    

Answer 3

Você pode criar uma função lambda, configurar o gateway da API e, em seguida, configurar o CloudFront para encaminhar determinados caminhos (por exemplo, / rest / *) para o gateway da API e servir todo o restante de um intervalo do S3.

Aqui está uma demonstração completa de como fazer isso: link

    

Answer 4

Eu tenho a mesma configuração. Os recursos estáticos no S3, as funções do Lambda são servidos por meio do gateway de API e compartilham o mesmo nome de domínio.

Eu uso o gateway de API que já usa o CloudFront e expõe algumas de suas funcionalidades, como o cache. Em seguida, configuro os URIs que mapeiam para ativos estáticos. No API Gateway, um recurso pode ser uma função do Lambda, uma função da AWS, uma simulação ou outra URL. Eu os faço apontar para minhas URLs S3.

Os URIs também podem ser configurados para subpaths glob /assets/* .