web-dev-qa-db-ja.com

S3静的ホスティング-index.htmlのないパス

複数のAngularプロジェクトがあり、QAとテストのためにs3にすばやくアップロードします。すべてのプロジェクトを同じバケットに、異なるサブフォルダーにアップロードします。したがって、s3バケット構造は次のようになります。

 -- tests-bucket
    -- project1
       -- index.html
    -- project2
       -- index.html

次に、クラウドフロントディストリビューションとroute53を設定します。 tests.domain.com。

フルパスでプロジェクトにアクセスすると、すべてが機能します。

tests.domain.com/project1/index.html
tests.domain.com/project2/index.html

ただし、index.html（tests.domain.com/project1またはtests.domain.com/project1/）なしでプロジェクトにアクセスしようとすると、次のエラーが発生します。

<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>index.html</Key>
<RequestId></RequestId>
<HostId></HostId>
</Error>

最初のページが読み込まれた後、index.htmlは自動的に削除され、追加の再読み込みによって404エラーが発生するため、テストが困難になります。

バケットはウェブサイトの静的ホスティングを提供するように設定されており、インデックスとエラードキュメントの両方がindex.htmlを指します。

CloudFrontディストリビューションは、404エラーパスがindex.htmlにリダイレクトされるようにも設定されています。

この設定はバケットtests.domain.com/index.htmlのルートパスに対してのみ機能するようですが、サブディレクトリをサポートしていません。

このAWSの記事 で可能に思われますが、私たちの場合、SPA/Angularアプリケーションでは機能しません。

これについての簡単な調査から、Lamda Edgeリダイレクトを使用してこの問題を解決する このチュートリアル が見つかりましたが、設定は少しやりすぎであり、米国東部のディストリビューションのみをサポートしているようです。

ラムダ関数を含まないs3/cloudfront/route53のみを使用してこれを解決できる単純な構成はありますか？

angularamazon-web-servicesamazon-s3amazon-cloudfront
7
dev7

はい、バケットでウェブサイトのホスティングを有効にしている場合は、「index-document」プロパティを使用してこれを設定できます。こちらのCLIドキュメントをチェックしてください： https://docs.aws.Amazon.com/cli/latest/reference/s3/website.html

この機能を有効にすると、ファイルで終了していないすべてのパスで有効になります。したがって、index-documentプロパティを「index.html」に設定した場合、「/ project1 /」をリクエストすると「/project1/index.html」が返されます

その他のドキュメント：

https://docs.aws.Amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html

https://docs.aws.Amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html

編集：

Cloudfrontを使用する場合、cloudfrontのデフォルトのルートオブジェクトの動作により、S3からのインデックスドキュメントの使用が上書きされます。この動作を回避するには、S3オリジンを使用せずに、カスタムオリジンを使用して、S3バケットURLをオリジンドメイン名として渡します。

ドキュメンテーション：

https://docs.aws.Amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html （特に、「デフォルトのルートオブジェクトを定義した場合、サブディレクトリに対するエンドユーザーのリクエストディストリビューションのデフォルトルートオブジェクトを返さない。たとえば、index.htmlがデフォルトルートオブジェクトであり、CloudFrontがCloudFrontディストリビューションの下のインストールディレクトリに対するエンドユーザーリクエストを受け取ったとします。

1
Patrick