如何将 S3 网站的访问限制为 Cloudfront？

Question

我想将 Cloudfront CDN 放在静态网站的 S3 website bucket 前面，并将存储桶的读取访问权限限制为 Cloudfront 分发。很常见，documented by AWS 和其他来源。但由于某种原因，我无法让它工作。

我不是第一个偶然发现这一点的人。 （1、2、3）。我已经尝试了那里发布的解决方案，但同样没有运气。

我的设置，作为 Cloudformation 模板，如下所示：

AWSTemplateFormatVersion: "2010-09-09"

Parameters:
  s3BucketName:
    Type: String
  domainName:
    Type: String
  certificateArn:
    Type: String
  bucketAuthHeader:
    Type: String

Resources:
  cloudfrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
         Enabled: true
         PriceClass: PriceClass_100
         Origins:
           - Id: !Sub "ID-${s3BucketName}"
             DomainName: !Sub "${s3BucketName}.s3-website.eu-central-1.amazonaws.com"
             CustomOriginConfig:
               OriginProtocolPolicy : http-only
             OriginCustomHeaders:
               - HeaderName: User-Agent
                 HeaderValue: !Ref bucketAuthHeader
         DefaultCacheBehavior:
           AllowedMethods:
             - GET
             - HEAD
             - OPTIONS
           CachedMethods:
             - GET
             - HEAD
             - OPTIONS
           DefaultTTL: 600
           ForwardedValues:
               QueryString: false
           TargetOriginId: !Sub "ID-${s3BucketName}"
           ViewerProtocolPolicy: redirect-to-https

  s3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Ref s3BucketName
      AccessControl: Private
      PublicAccessBlockConfiguration:
        BlockPublicAcls: true
        BlockPublicPolicy: true
        IgnorePublicAcls: true
        RestrictPublicBuckets: true
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: _errors/404/index.html
    DeletionPolicy: Delete

  s3BucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref s3BucketName
      PolicyDocument:
        Version: 2012-10-17
        Id: "Cloudfront Bucket Access"
        Statement:
          - Sid: "Cloudfront Bucket Access via Referer"
            Effect: Allow
            Principal: "*"
            Action: "s3:GetObject"
            Resource:  !Sub "arn:aws:s3:::${s3BucketName}/*"
            Condition:
              StringEquals:
                aws:UserAgent:
                  - !Ref bucketAuthHeader

但是，在应用此功能时，我无法通过 Cloudfront 访问文件，总是得到 403。我还尝试调整 PublicAccessBlockConfiguration 和 AccessControl 中的值，并尝试使用 aws s3 sync … --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers 上传存储桶内容。

但我总是以 要么 公共 S3 内容结束，要么 内容也无法通过 Cloudfront 获得。

有人知道我还能尝试什么吗？

Answer 1

我是使用 AWS 云开发工具包 (CDK) 为这样的 SPA 完成的：

import * as path from "path";
import * as s3 from "@aws-cdk/aws-s3";
import * as cloudfront from "@aws-cdk/aws-cloudfront";
import * as cloudfrontOrigins from "@aws-cdk/aws-cloudfront-origins";
import * as lambda from "@aws-cdk/aws-lambda"

// Private website bucket
const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
  encryption: s3.BucketEncryption.S3_MANAGED,
  blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
  publicReadAccess: false,
});

// Access identity that we can attach to the bucket to give it access
const websiteOriginAccessIdentity = new cloudfront.OriginAccessIdentity(
  this,
  "OriginAccessIdentity"
);

// Grant the access identity access to this bucket
websiteBucket.grantRead(websiteOriginAccessIdentity)

// Use this bucket and origin access identity to Cloudfront
const websiteBucketOrigin = new cloudfrontOrigins.S3Origin(
  props.websiteBucket,
  {
    originPath: "/",
    originAccessIdentity: websiteOriginAccessIdentity,
  }
);

// Add a Lambda@Edge to redirect all non-asset requests to `/index.html`. 
// Just like a rewrite rule with Amplify.
const websiteRedirectFunction = new lambda.Function(
  this,
  "RedirectFunction",
  {
    code: lambda.Code.fromAsset(path.resolve(__dirname, "../redirect"), {
      bundling: {
        command: [
          "bash",
          "-c",
          "npm install && npm run build && cp -rT /asset-input/dist/ /asset-output/",
        ],
        image: lambda.Runtime.NODEJS_12_X.bundlingDockerImage,
        user: "root",
      },
    }),
    handler: "index.redirect",
    runtime: lambda.Runtime.NODEJS_12_X,
  }
);

// Create Cloudfront distribution with the origin
const websiteCdn = new cloudfront.Distribution(this, "WebsiteCdn", {
  defaultBehavior: {
    origin: websiteBucketOrigin,
    edgeLambdas: [
      {
        eventType: cloudfront.LambdaEdgeEventType.ORIGIN_REQUEST,
        functionVersion: websiteRedirectFunction.currentVersion,
      },
     ],
  },
});

// ../redirect/src/index.ts

import * as lambdaTypes from "aws-lambda";

export const redirect = (
  event: lambdaTypes.CloudFrontRequestEvent,
  _context: lambdaTypes.Context,
  callback: lambdaTypes.CloudFrontRequestCallback
): void => {
  const request = event.Records[0].cf.request;

  console.info({ request });

  // Redirects all files to index.html except for the specific file extensions for assets
  const isPageRequest = /^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/;

  console.log({ isPageRequest });

  if (isPageRequest) {
    request.uri = "/index.html";
  }

  console.log({ updatedRequest: request });

  callback(null, request);
};

此示例假设您将网站部署到我们在此处创建的 websiteBucket 存储桶。为简洁起见，有几种不同的方法可以将您的网站部署到 S3。例如，in a CodePipeline。

注意：此示例使用 TypeScript，并假设您已将其设置为构建到 ./dist/ 中。下面以简单的 TSConfig 为例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"]
}

// package.json

"scripts": {
  "build": "tsc -b"
}

Answer 2

使用 AWS CDK 时，它实际上比 @SeanWLawrence 的建议更简单。当您使用未配置为网站的 S3 存储桶创建 CloudFront 分配时，AWS 将自动为您创建一个对象访问身份并授予该身份对存储桶的读取权限。此功能反映了 AWS 控制台中发生的情况。

此处记录了此行为 - https://docs.aws.amazon.com/cdk/api/latest/docs/aws-cloudfront-readme.html#from-an-s3-bucket