Wie kann ich AWS CloudFront und API Gateway nebeneinander für dieselbe Domain verwenden?

9

Ich stelle diese statischen Assets meiner Website auf S3 und richte CloudFront ein, um sie zu verteilen. Diese enthalten im Wesentlichen die Inhalte, die Benutzer für jede GET-Anforderung auf meiner Website benötigen, zu vorhandenen Pfaden, dh mit einem Catchall für Fehler.

Ich habe auch einige POST-Anfragen, die ich bearbeiten muss. Senden Sie Formulare, senden Sie E-Mails, Benachrichtigungen und interagieren Sie mit der Datenbank.

Wie kann ich Lambda (oder API-Gateway) neben CloudFront für dieselbe Domäne einrichten, sodass CloudFront GET-Anforderungen und API-Gateway Anforderungen mit einem Hauptteil oder POST-Anforderungen verarbeitet. Oder kann ich es irgendwie über eine individuelle URL machen?

Costa
quelle

Antworten:

2

Ich führe mehrere Web-Apps genau mit Ihrem vorgeschlagenen Design aus und extrahiere Gofaas , eine pädagogische Go- und Lambda-App, um die Techniken zu teilen.

Sie benötigen zwei separate Domänen, z. B. www.gofaas.netfür S3 + CloudFront und api.gofaas.netfür API Gateway + Lambda.

Anschließend können Sie Ihre statische Site mit einer API Gateway CORS-Konfiguration und etwas JavaScript mit der API interagieren lassen:

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);
    });

Hier sind einige Anleitungen zum Einrichten:

Statische Websites mit S3, CloudFront und ACM

API-Sicherheit mit Lambda, API Gateway, CORS und JWT

Noah Zoschke
quelle
Das Testen der Seite wird hier immer interessant. Es ist schwierig, die AWS-Infrastruktur lokal zu replizieren, damit Sie Integrationstests lokal durchführen können. Ich verwende eine Route anstelle einer Subdomain. Das hilft beim Testen. Beseitigt auch CORS-Herausforderungen. Dann wird API Gateway ein Ursprung für CloudFront für diese Route.
Costa
6

Sie können eine Lambda-Funktion erstellen, das API-Gateway einrichten und dann CloudFront so konfigurieren, dass bestimmte Pfade (z. B. / rest / *) an das API-Gateway weitergeleitet werden und alles andere aus einem S3-Bucket bereitgestellt wird.

Hier finden Sie eine vollständige Anleitung: https://www.codeengine.com/articles/process-form-aws-api-gateway-lambda/

Grodriguez
quelle
2

Aus der Sicht der Verbindung muss "etwas" Ihre Anfragen beantworten (GET, POST, PUT, alles). Zunächst haben Sie eine TCP-Verbindung und "etwas" muss sicherstellen, dass es Schicht 7 versteht und aus den vom Client gesendeten Bytes einen Sinn ergibt. Nur zu diesem Zeitpunkt ist es möglich, GET-Anforderungen anders als POST-Anforderungen oder eine URL als eine andere URL zu behandeln. Am Ende benötigen Sie also einen Dienst, der HTTP verstehen und weiterleiten kann. Die folgenden Dienste können dies tun: CloudFront ELB / ALB API Gateway (Einschränkung kommt später)

API Gateway verwendet CloudFront intern (ohne dass Sie die Möglichkeit haben, tatsächlich etwas auf CloudFront-Ebene zu konfigurieren). Dies bedeutet, dass CloudFront und API Gateway nicht nebeneinander ausgeführt werden können, da dies letztendlich bedeuten würde, dass Sie CloudFront mit CloudFront ausführen Seite an Seite.

CloudFront bietet Ihnen die Möglichkeit, verschiedene Ursprünge basierend auf Mustern auszuwählen. Sie können jedoch nur S3 oder ELB / ALBs als Ursprung auswählen - keine Lambda-Funktionen (neben der Lambda @ Edge-Funktionalität).

ALB / ELB kann nur EC2-Instanzen als Backend verwenden - hier kein Lambda oder S3.

Die einzigen Möglichkeiten, die ich mir vorstellen kann, um das zu tun, was Sie tun möchten, sind folgende:

  • Sie verwenden API Gateway und leiten einen bestimmten "Asset" -Pfad an eine Lambda-Funktion weiter, die eine Art Reverse-Proxy für S3 ausführt (also die statischen Assets durch Lambda leiten). Beachten Sie hier die Kosten für Lambda!
  • Sie können das Gleiche tun, aber anstatt das Asset über Lambda zu leiten, generieren Sie einfach eine signierte URL in Lambda und leiten Sie es direkt an S3 weiter, um es zu bedienen (möglicherweise kostengünstiger).
  • Verwenden anderer Subdomänen für Ihre Assets als der Rest Ihrer Anwendung - dies ist ein sehr häufiges Muster, da Sie auf DNS-Ebene problemlos aufteilen und verschiedene Dienste für die verschiedenen Anwendungsfälle verwenden können (CloudFront für Assets und API Gateway für nicht statische Anwendungen) Teile)

Mein Anruf wäre also die letzte Option - aber das bedeutet, dass Sie die Clients / Browser für alle statischen Assets (oder für alle POST-Anforderungen) auf eine separate Subdomain verweisen müssen.

Es hört sich so an, als ob Sie sich Technologien wie AngularJS oder React ansehen möchten, um eine wirklich API-gesteuerte Anwendung im Browser zu erstellen. Mit diesem Ansatz führen Sie eine echte API aus, die alle "dynamischen" Anforderungen mit einem API-Gateway verarbeitet und die Anwendung selbst aus S3 als statisches Asset bereitstellt. Vielleicht hilft Ihnen ein Blick auf diese, Ihren Weg zu finden - auch wenn Sie sie nicht verwenden, ist das architektonische Muster, wie man solche Dinge baut, das, wonach Sie imho fragen.

Osterjour
quelle
2

Ich habe das gleiche Setup. Statische Assets in S3, Lambda-Funktionen, die über das API-Gateway bereitgestellt werden, haben denselben Domänennamen.

Ich gehe mit API-Gateway, das bereits CloudFront verwendet und einige seiner Funktionen wie Caching verfügbar macht. Dann konfiguriere ich URIs, die statischen Assets zugeordnet sind. In API Gateway kann eine Ressource eine Lambda-Funktion, eine AWS-Funktion, ein Mock oder eine andere URL sein. Ich habe sie auf meine S3-URLs verweisen.

Die URIs können so eingestellt werden, dass auch Unterpfade erstellt werden, z /assets/*.

Prathan Thananart
quelle
Der Teil, der mir Probleme bereitet, ist die Bereitstellung der API. In Ihrem Fall wird es normalerweise ohne den führenden Pfad bereitgestellt /assets/*. Ich muss die Bereitstellung löschen und mit der rechten Maustaste auf den /assets/*Pfad klicken und von dort aus bereitstellen.
Costa
1
Ich sollte mich in die Befehlszeilen-Tools vertiefen und lernen, wie man von dort aus APIs und Lambdas erstellt und bearbeitet.
Costa