基于Troposphere的S3静态网站CloudFront自动化部署技术问询

看起来你已经开了个好头——用Troposphere来定义CloudFront分发是个很棒的自动化方式，特别适合你的Angular静态站点部署流程。我来帮你补全并优化这段代码，同时分享一些关键的配置要点，确保你的静态站能正常运行：

1. 完善Origin配置（推荐使用Origin Access Control，OAC） #

AWS现在推荐使用Origin Access Control (OAC) 替代旧的Origin Access Identity (OAI)来控制CloudFront对S3桶的访问，安全性和易用性都更好。下面是针对你的S3静态站点的完整Origin配置：

# 先添加OAC资源（如果还没加的话）
origin_access_control = self.template.add_resource(
    OriginAccessControl(
        "MyOriginAccessControl",
        OriginAccessControlConfig=OriginAccessControlConfig(
            Name="MyS3OAC",
            Description="OAC for CloudFront to access S3 bucket",
            OriginAccessControlOriginType="s3",
            SigningBehavior="always",
            SigningProtocol="sigv4"
        )
    )
)

# 补全你的Origin配置
myDistribution = self.template.add_resource(Distribution(
    "myDistribution",
    DistributionConfig=DistributionConfig(
        Origins=[
            Origin(
                Id="Origin1",  # 唯一ID，命名保持一致即可
                DomainName=s3dnsname.ref(),
                OriginAccessControlId=origin_access_control.ref(),
                # 若S3是静态网站托管模式，无需设置OriginPath；普通桶按需添加
                # OriginPath="/static"
            )
        ],
        # 其他配置继续往下...
    )
))

2. 配置默认缓存行为（适配Angular静态站点） #

Angular站点需要特定的缓存规则：静态资源（js/css/img）设置长缓存，index.html设置短缓存或不缓存。这里推荐使用AWS托管的缓存策略，无需自定义复杂规则：

DefaultCacheBehavior=DefaultCacheBehavior(
    TargetOriginId="Origin1",
    ViewerProtocolPolicy="redirect-to-https",  # 强制HTTPS，提升安全性
    AllowedMethods=["GET", "HEAD", "OPTIONS"],  # 静态站点仅需这些请求方法
    CachedMethods=["GET", "HEAD"],
    # 托管缓存策略ID：CachingOptimized（专门针对静态资源优化）
    CachePolicyId="658327ea-f89d-4fab-a63d-7e88639e58f6",
)

3. 核心配置：默认根对象与错误页面 #

这两个配置是Angular单页应用(SPA)正常运行的关键：

• DefaultRootObject: 设置为index.html，确保访问根路径时返回首页
• CustomErrorResponses: 将404/403错误重定向到index.html，解决客户端路由刷新后404的问题

把这些配置添加到DistributionConfig中：

DefaultRootObject="index.html",
CustomErrorResponses=[
    CustomErrorResponse(
        ErrorCode=404,
        ResponseCode=200,
        ResponsePagePath="/index.html"
    ),
    CustomErrorResponse(
        ErrorCode=403,
        ResponseCode=200,
        ResponsePagePath="/index.html"
    )
],

4. 完整代码片段整合 #

将上面的内容整合到你的现有代码中，完整版本如下：

from troposphere import Template, Parameter, Output
from troposphere.cloudfront import (
    Distribution, DistributionConfig, Origin,
    DefaultCacheBehavior, OriginAccessControl, OriginAccessControlConfig,
    CustomErrorResponse
)

class YourCloudFormationTemplate:
    def __init__(self):
        self.template = Template()
        
        # 添加S3 DNS名称参数
        s3dnsname = self.template.add_parameter(Parameter(
            "S3DNSName",
            Description="The DNS name of an existing S3 bucket to use as the Cloudfront distribution origin",
            Type="String",
        ))
        
        # 创建Origin Access Control (OAC)
        origin_access_control = self.template.add_resource(
            OriginAccessControl(
                "MyOriginAccessControl",
                OriginAccessControlConfig=OriginAccessControlConfig(
                    Name="MyS3OAC",
                    Description="OAC for CloudFront to access S3 bucket",
                    OriginAccessControlOriginType="s3",
                    SigningBehavior="always",
                    SigningProtocol="sigv4"
                )
            )
        )
        
        # 创建CloudFront Distribution
        myDistribution = self.template.add_resource(Distribution(
            "myDistribution",
            DistributionConfig=DistributionConfig(
                Origins=[
                    Origin(
                        Id="Origin1",
                        DomainName=s3dnsname.ref(),
                        OriginAccessControlId=origin_access_control.ref()
                    )
                ],
                DefaultCacheBehavior=DefaultCacheBehavior(
                    TargetOriginId="Origin1",
                    ViewerProtocolPolicy="redirect-to-https",
                    AllowedMethods=["GET", "HEAD", "OPTIONS"],
                    CachedMethods=["GET", "HEAD"],
                    CachePolicyId="658327ea-f89d-4fab-a63d-7e88639e58f6"
                ),
                DefaultRootObject="index.html",
                CustomErrorResponses=[
                    CustomErrorResponse(ErrorCode=404, ResponseCode=200, ResponsePagePath="/index.html"),
                    CustomErrorResponse(ErrorCode=403, ResponseCode=200, ResponsePagePath="/index.html")
                ],
                Enabled=True,
                # 若需自定义域名和SSL证书，取消下面注释并替换占位符
                # Aliases=["your-custom-domain.com"],
                # ViewerCertificate=ViewerCertificate(
                #     AcmCertificateArn="arn:aws:acm:us-east-1:123456789012:certificate/abc-123-def",
                #     SslSupportMethod="sni-only",
                #     MinimumProtocolVersion="TLSv1.2_2021"
                # )
            )
        ))
        
        # 可选：输出CloudFront域名，方便部署后快速访问
        self.template.add_output(Output(
            "CloudFrontDomainName",
            Description="CloudFront distribution domain name",
            Value=myDistribution.attr("DomainName")
        ))

5. 重要注意事项 #

• S3桶权限: 配置OAC后，需给S3桶添加桶策略允许CloudFront访问，示例策略（替换占位符）：

  {
      "Version": "2008-10-17",
      "Id": "PolicyForCloudFrontPrivateContent",
      "Statement": [
          {
              "Sid": "AllowCloudFrontServicePrincipal",
              "Effect": "Allow",
              "Principal": {"Service": "cloudfront.amazonaws.com"},
              "Action": "s3:GetObject",
              "Resource": "arn:aws:s3:::your-bucket-name/*",
              "Condition": {
                  "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/your-cloudfront-id"
                  }
              }
          }
      ]
  }
  

• Angular构建: 构建时使用ng build --configuration production，确保输出优化后的静态文件；若部署到子路径，需添加--base-href /subpath/参数。
• CloudFront部署: 分发创建后需等待5-10分钟完成部署，状态变为Deployed后再测试访问。

内容的提问来源于stack exchange，提问作者Raj