通过AWS CloudFront Functions解决S3静态站点/路径打开的问题

通过AWS CloudFront映射到S3来搭建静态站点时，连接S3一般有两种途径，一种在S3直接启动静态站点（Static website hosting），这样CloudFront只能把S3无差别的作为一个静态站点来连接，在安全保护上只能通过HTTP Headers来进行验证；另外一种则是直接让CloudFront连接S3获取数据，这种方式的Origin Type就是S3，而连接时则可以通过（Origin access control settings）来设置一个比较精细的Policy来控制访问（在S3中可以选择Block all public access），就是可以在S3的Permissions中配置一个类似下面这种的Policy:

{
        "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>/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::1234567890:distribution/ABCDEFGHIJK12345"
                    }
                }
            }
        ]
      }

当然上面这个Policy是CloudFront可以帮助生成的，只需要粘贴到S3的Bucket的Permissions中Bucket Policy中就可以。

这种方式虽然安全，但是也存在一个问题，就是CloudFront只是默认通过s3:GetObject来拿S3中的item，在静态站点直接访问/PATH/这样的路径时，并不能去取对应S3目录下的index.html，只能直接404。

所以这里就需要通过CloudFront的Functions功能，对请求进行改写，也就是要把对/PATH/的请求改写为/PATH/index.html，这样才能让站点正常的响应路径请求。

我们首先在CloudFront的Functions建立一个函数PathToIndexHtml, 这个函数的runtime选cloudfront-js-2.0就行，函数体非常简单

function handler(event) {
    var request = event.request;
    if(request.uri.endsWith('/')) {
        request.uri = request.uri + 'index.html';
    }
    return request;
}

然后在CloudFront对应的Distribution中的Behavior的属性中，编辑Function associations，在viewer request中Function Type选择CloudFront Functions，然后Function ARN/Name就直接选择刚才创建的函数就然后保存生效可以了。

这样就可以在CloudFront Functions辅助下，让CloudFront可以正常在Origin Type为S3的情况下访问了路径请求了。

另外说明一一下CloudFront Functions的并发支持非常高，对性能几乎没有影响。