【发布时间】：2021-03-18 06:07:42
【问题描述】：
我正在尝试将静态网站部署到 S3，并通过 Cloudfront 提供服务。我正在使用无服务器来生成 Cloudformation 资源。创建资源后，我的构建过程（在 CodeBuild 和 CodePipeline 中）运行 npm install、npm run build 并将构建目录传输到 s3 以提供内容。对于上下文，我使用的是 react，特别是 create-react-app。 部署后，所有资源都按预期创建，但 Cloudfront 端点返回以下“拒绝访问”异常，这是我在 S3 中熟悉的：
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId><requestId></RequestId>
<HostId><hostId>
</HostId>
</Error>
这让我相信它是 S3 存储桶策略，我已将其设置为具有附加到 CDN 的 Origin Access Identity 的 Principal 值。所以我有点不确定这里缺少什么来让它工作。任何帮助表示赞赏。以下是我的资料。
更新：index.html 可访问，但静态文件不可访问。我在下面添加了桶策略，下面是桶的文件结构：
asset-manifest.json
manifest.json
index.html
static/
从无服务器部署生成的 Cloudformation 模板：
{
"AWSTemplateFormatVersion": "2010-09-09",
"Description": "The AWS CloudFormation template for this Serverless application",
"Website": {
"Type": "AWS::S3::Bucket",
"Properties": {
"WebsiteConfiguration": {
"ErrorDocument": "index.html",
"IndexDocument": "index.html"
}
}
},
"CloudFrontOriginAccessIdentity": {
"Type": "AWS::CloudFront::CloudFrontOriginAccessIdentity",
"Properties": {
"CloudFrontOriginAccessIdentityConfig": {
"Comment": "Access Identity for cdn"
}
}
},
"ReadPolicy": {
"Type": "AWS::S3::BucketPolicy",
"Properties": {
"Bucket": {
"Ref": "Website"
},
"PolicyDocument": {
"Statement": [
{
"Action": "s3:GetObject",
"Effect": "Allow",
"Resource": {
"Fn::Join": [
"",
[
"arn:aws:s3:::",
{
"Ref": "Website"
},
"/*"
]
]
},
"Principal": {
"CanonicalUser": {
"Fn::GetAtt": [
"CloudFrontOriginAccessIdentity",
"S3CanonicalUserId"
]
}
}
}
]
}
}
},
"Distribution": {
"Type": "AWS::CloudFront::Distribution",
"Properties": {
"DistributionConfig": {
"Origins": [
{
"DomainName": {
"Fn::GetAtt": [
"Website",
"DomainName"
]
},
"Id": {
"Ref": "Website"
},
"S3OriginConfig": {
"OriginAccessIdentity": {
"Fn::Join": [
"",
[
"origin-access-identity/cloudfront/",
{
"Ref": "CloudFrontOriginAccessIdentity"
}
]
]
}
}
}
],
"Enabled": true,
"HttpVersion": "http2",
"DefaultRootObject": "index.html",
"CustomErrorResponses": [
{
"ErrorCode": 404,
"ResponseCode": 200,
"ResponsePagePath": "/index.html"
}
],
"DefaultCacheBehavior": {
"AllowedMethods": [
"DELETE",
"GET",
"HEAD",
"OPTIONS",
"PATCH",
"POST",
"PUT"
],
"DefaultTTL": 3600,
"ForwardedValues": {
"QueryString": true,
"Cookies": {
"Forward": "none"
}
},
"TargetOriginId": {
"Ref": "Website"
},
"ViewerProtocolPolicy": "redirect-to-https"
},
"ViewerCertificate": {
"CloudFrontDefaultCertificate": "true"
}
}
}
},
},
"Outputs": {
"ServerlessDeploymentBucketName": {
"Value": {
"Ref": "ServerlessDeploymentBucket"
}
},
"WebsiteUrl": {
"Value": {
"Fn::GetAtt": [
"Website",
"WebsiteURL"
]
}
},
"WebSiteBucket": {
"Value": {
"Ref": "Website"
}
}
}
}
已生成 S3 存储桶策略：
{
"Version": "2008-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {ID for the OAI}"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{BUCKETNAME}/*"
}
]
}
更新
S3 存储桶 YAML 文件：
Resources:
Website:
Type: AWS::S3::Bucket
Properties:
WebsiteConfiguration:
ErrorDocument: index.html
IndexDocument: index.html
Outputs:
WebsiteUrl:
Value: !GetAtt Website.WebsiteURL
WebSiteBucket:
Value: !Ref Website
云端 YAML 文件：
Resources:
CloudFrontOriginAccessIdentity:
Type: 'AWS::CloudFront::CloudFrontOriginAccessIdentity'
Properties:
CloudFrontOriginAccessIdentityConfig:
Comment: Access Identity for cdn
ReadPolicy:
Type: 'AWS::S3::BucketPolicy'
Properties:
Bucket: !Ref Website
PolicyDocument:
Statement:
- Action: 's3:GetObject'
Effect: Allow
Resource:
!Join [ '', [ 'arn:aws:s3:::', !Ref Website, '/*' ] ]
Principal:
CanonicalUser: !GetAtt CloudFrontOriginAccessIdentity.S3CanonicalUserId
Distribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
-
# Use the Website as the origin
DomainName: !GetAtt 'Website.DomainName'
Id: !Ref Website
S3OriginConfig:
OriginAccessIdentity: !Join [ '', [ 'origin-access-identity/cloudfront/', !Ref CloudFrontOriginAccessIdentity] ]
Enabled: true
HttpVersion: http2
DefaultRootObject: index.html
# Since React takes care of our routing, we need to make sure every path is served via index.html
# Configure the CDN cache
CustomErrorResponses:
- ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /index.html
DefaultCacheBehavior:
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
DefaultTTL: 3600
ForwardedValues:
QueryString: true
Cookies:
Forward: none
# The origin id defined above
TargetOriginId: !Ref Website
ViewerProtocolPolicy: "redirect-to-https" # we want to force https
# The certificate to use when using https
ViewerCertificate:
CloudFrontDefaultCertificate: 'true'
存储桶策略：
{
"Version": "2008-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {Id}"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{bucket-name}/*"
}
]
}
【问题讨论】：
标签： amazon-s3 amazon-cloudformation amazon-cloudfront