シンプルなWebアプリをS3
経由でamplify publish
にデプロイします。ホスティングではCloudfront
が有効になっていて(ホスティングのセットアップ中にamplifyでPROD環境を選択しました)、eu-central-1
リージョンで作業しています。しかし、Cloudfront
URLにアクセスしようとすると、AccessDenied
エラーが表示されます。
https://medium.com/quasar-framework/creating-a-quasar-framework-application-with-aws-amplify-services-part-1-4-9a795f38e16d an私が違ったことをした唯一のことは地域でした(チュートリアルではus-east-1
を使用していますが、eu-central-1
を使用しています)。
S3とCloudfrontの構成はamplifyによって行われたため、理論的には機能するはずです。
Cloudfront:
quasar-demo-hosting-bucket-dev.s3-eu-central-1.amazonaws.com
(元々はeu-central-1
なしでしたが、機能しなかったため手動で追加しました)。hostingS3Bucket
S3 Origin
S3バケットポリシー:
{
"Version": "2012-10-17",
"Id": "MyPolicy",
"Statement": [
{
"Sid": "APIReadForGetBucketObjects",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ********"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::quasar-demo-hosting-bucket-dev/*"
}
]
}
調査の結果、Cloudfront
が他の地域のS3
バケットにアクセスするときに一時的な問題が発生する可能性があることがわかりました。しかし、Cloudfront
でOriginに手動で領域を追加し、24時間待機しました。それでも「アクセス拒否」が表示されます。
これは、S3
バケットがデフォルトのus-east-1
リージョンにないことと関係があると考えられ、その場合はCloudfront
を正しく設定しないことを増幅します。
S3
バケットとCloudfront
を正しく設定して、Cloudfront
URLを介してウェブサイトにアクセスできるようにするには、どのようにして増幅を取得できますか?
追加情報をありがとう。
S3
バケットポリシーは問題ありません。
Origin Domain name or Path
については、常にS3
バケットがドロップダウンに表示されるため、region
で更新する必要はありません。
ただし、Cloudfront Origin
には1つの設定がありません。Restrict Bucket access
からYes
を選択する必要があります
AWS documentation
による
ユーザーが常にAmazon S3 URLではなくCloudFront URLを使用してAmazon S3コンテンツにアクセスする必要がある場合は、[はい]をクリックします。これは、署名付きURLまたは署名付きCookieを使用してコンテンツへのアクセスを制限する場合に役立ちます。ヘルプで、「CloudFrontを介したプライベートコンテンツの提供」を参照してください
new Identity
またはselect Existing Identity
を作成します
最初の解決策が機能しない人のために、javascript.config.DistributionDir
あなたのproject-config.json
ファイルが正しく構成されています。また、AccessDeniedエラーが発生する可能性もあります(私は今、難しい方法を学んだばかりです)。
Amplifyは、アプリのエントリポイント(index.html)が、設定したディレクトリ内の最初のレベルにあると想定しています。したがって、amplifyのデフォルト構成(dist
)を受け入れ、ビルドされたファイルを階層のより深いレベルに配置するプロジェクト(dist/<project name>
angular 8)の場合、発行後に403 AccessDeniedエラーとして表示されます。これは、増幅オプションとs3ホスティングオプションの両方に当てはまります。
docs: https://docs.aws.Amazon.com/amplify/latest/userguide/manual-deploys.html (最後を参照)