AWS CloudFrontとAPI Gatewayを同じドメインで並べて使用するにはどうすればよいですか？

私は自分のウェブサイトの静的アセットをS3に配置し、それらを配布するようにCloudFrontを設定しています。これらは基本的に、ユーザーが既存のパスへの私のサイトでのGETリクエストに必要なコンテンツ、つまりエラーのキャッチオールを保持します。

処理する必要があるPOSTリクエストもいくつかあります。フォームの送信、メールの送信、通知、データベースとのやり取り。

CloudFrontがGETリクエストを処理し、API Gatewayが本文またはPOSTリクエストを含むリクエストを処理するように、同じドメインのCloudFrontとLambda（またはAPI Gateway）を並べてセットアップするにはどうすればよいですか。または、どうにかして個別のURLで実行できますか？

私は、提案されたデザインで正確に複数のWebアプリを実行し、教育的なGoおよびLambdaアプリであるgofaasを抽出して、テクニックを共有しました。

たとえばwww.gofaas.net、S3 + CloudFrontとapi.gofaas.netAPI Gateway + Lambdaの2つの個別のドメインが必要です。

次に、API GatewayのCORS構成といくつかのJavaScriptを使用して、静的サイトをAPIと相互作用させることができます。

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

これらをすべて設定するためのガイドを以下に示します。

S3、CloudFront、ACMを使用した静的ウェブサイト

Lambda、API Gateway、CORS、JWTによるAPIセキュリティ

ラムダ関数を作成し、APIゲートウェイをセットアップしてから、特定のパス（/ rest / *など）をAPIゲートウェイに転送し、S3バケットから他のすべてを提供するようにCloudFrontを構成できます。

これを行う方法を示す完全なウォークスルーを次に示します。https：//www.codeengine.com/articles/process-form-aws-api-gateway-lambda/

接続の観点からは、「何か」が要求（GET、POST、PUTなど）に応答する必要があります。まず最初に、TCP接続があり、「何か」は、それがレイヤー7を理解し、クライアントが送信するバイトから意味をなすことを確認する必要があります。この時点でのみ、GETリクエストをPOSTリクエストまたは別のURLとは異なる方法で処理できます。つまり、最終的には、HTTPを理解してルーティングできるサービスが必要になります。次のサービスでこれを実行できます：CloudFront ELB / ALB API Gateway（制限は後で提供されます）

API GatewayはCloudFrontを内部で使用します（実際にCloudFrontレベルで何かを構成する機会を与えることはありません）。つまり、最終的にCloudFrontでCloudFrontを実行することになるため、CloudFrontとAPI Gatewayを並べて実行する方法はありません。並んで。

CloudFrontを使用すると、パターンに基づいて異なるオリジンを選択できます。ただし、オリジンとして選択できるのはLambda関数（Lambda @ Edge機能以外）ではなく、S3またはELB / ALBのみです。

ALB / ELBはEC2インスタンスのみをバックエンドとして使用できます-ここではLambdaやS3は使用できません。

私があなたがしたいことをするかもしれないと考えることができる唯一の方法はこれらです：

• API Gatewayを使用して、特定の「アセット」パスをS3の一種のリバースプロキシを実行するLambda関数にルーティングします（ラムダを介して静的アセットをパイプする）-ここでLambdaのコストに注意してください！
• 同じことを行うことができますが、Lambdaを介してアセットをパイプ処理する代わりに、Lambda内で署名付きURLを生成し、S3に直接リダイレクトして配信します（コスト効率が向上する可能性があります）。
• アセットにアプリケーションの他の部分とは異なるサブドメインを使用する-これは非常に一般的なパターンです。これは、DNSレベルで簡単に分割して、さまざまなユースケース（CloudFrontをアセットに、API Gatewayを非静的に使用）に簡単に使用できるためです。部品）

したがって、私の呼び出しが最後のオプションになります-しかし、これは、すべての静的アセット（またはすべてのPOSTリクエスト）に対して、クライアント/ブラウザに個別のサブドメインを指定する必要があることを意味します。

AngularJSやReactなどのテクノロジーを見て、真にAPI駆動のアプリケーションをブラウザーで作成したいようです。このアプローチでは、APIゲートウェイですべての「動的」リクエストを処理し、アプリケーション自体をS3から静的アセットとして配信する実際のAPIを実行しています。多分それらを見ることはあなたがあなたの方法を見つけるのを助けるかもしれません-あなたがそれらを使わなくても、このようなものを構築する方法の建築パターンはあなたが私見を求めているものです。

同じ設定です。S3の静的アセット、APIゲートウェイ経由で提供されるLambda関数。これらは同じドメイン名を共有します。

私はすでにCloudFrontを使用しており、キャッシングなどの機能の一部を公開しているAPIゲートウェイを使用します。次に、静的アセットにマップするURIを構成します。API Gatewayでは、リソースはLambda関数、AWS関数、モック、または別のURLにすることができます。S3のURLをポイントしてもらいます。

URIは、サブパスもグロブアップするように設定できます/assets/*。