web-dev-qa-db-ja.com

S3静的コンテンツとawsバックエンドでのCORSの問題を回避するためのAWSサービス

前書き

次のアーキテクチャがAmazonAWSにデプロイされています。

High level architecture

目標は、 https://app.acmecorp.com でエントリポイントとして機能するWebアプリケーション（シングルページアプリケーション）を公開することです。これは、次のような単一ページアプリケーションです。

  • 静的リソースを提供します（html/js/css）
  • javaScript経由でRESTバックエンドにアクセスする必要があります

バックエンド

アイデアは、バックエンドを（dockerを介して）Elastic Container ServiceClusterにデプロイすることです。次に、これらはロードバランサーによって提供されているターゲットグループに生成/自動スケーリングされます。バックエンドは https://backend.acmecorp.com を介して公開されます。 （AWSロードバランサーを指すDNS CNAME）

フロントエンド

シングルページアプリケーションはAmazonS3バケットにデプロイされ、S3静的サイトホスティングを介して公開されます。 （ http://frontend.s3-website-us-west-2.amazonaws.com ）。これは、 http://frontend.acmecorp.com のDNSCNAMEを介して公開される可能性もあります。

リバースプロキシ

欲しいのは以下です。ユーザーは https://app.acmecorp.com を介してアプリケーションにアクセスします。これにより、静的コンテンツが提供されます。 CORSの設定を回避するために、シングルページアプリがそのドメインから/apiへのAPI呼び出しを行えるようにしたいので、 https：//app.acmecorpを呼び出します。 com/api / **はバックエンドにマップする必要があります。

明らかにこれはNginxのようなもので行うことができますが、Amazonがこれに提供するものがあるかどうか、そしてこの機能を実現するにはどのようなビルディングブロックが必要になるのか疑問に思いました。

amazon-web-servicesreverse-proxyamazon-s3cors
4
ddewaele

Cloudfrontとリバースプロキシアプローチを使用して、目標を達成できます。

  1. まず、app.acmecorp.comを割り当てられたCNAMEとしてディストリビューションを作成し、このサブドメインのカスタムSSL証明書をアップロードします。

  2. 2つのオリジンを作成します。1つはバケットを指し、もう1つはAPIロードバランサーを指します。これらの2つのオリジンは、後でCDNの動作を構成するときに使用されます。

  3. バランサーをOriginとして持つ/ apiの動作を作成し、すべてのヘッダーをOriginに渡します（これにより、エッジキャッシュが効果的に無効になります）

  4. S3バケットを指すようにデフォルトの動作を設定します。

  5. 最後に、app.acmecorp.comをDNSのCDNエンドポイントにポイントします。

Cloudfrontのオリジンとビヘイビアには、注意が必要なオプションが他にもたくさんありますが、ニーズを満たすための基本はそこにあります。

3
ma.tome