cloudfront 指向 s3 上托管的旧版本 React

Question

我已经在 s3 上部署了我的 React 应用程序。我正在使用 Cloudfront 来使用证书并通过 HTTPS 访问我的 s3 bucket。千辛万苦设置好后，我终于设置好了，现在运行良好。

现在我更新了我的项目，创建了 bundle.js 的新版本，并将其上传到 s3。

我现在的问题是 mydomain.com 指向 bundle.js

的 V1

所以我试着多挖掘一点，这是我发现的：

mydomain.com指向V1
xxxxx.cloudfront.net指向V1
mydomain.com.s3-website-eu-west-1.amazonaws.com指向V2

所以我的猜测是，出于某种原因，cloudfront 指向 V1，但为什么呢？那里有缓存吗？

这是配置，以防有帮助：

Route53 Type A指向xxxxxx.cloudfront.net
cloudfront 域是 xxxxxx.cloudfront.net
cloudfront CNAMES 是 mydomain.com 和 www.mydomain.com
cloudfront origin domain name and path 是 mydomain.com.s3-website-eu-west-1.amazonaws.com
s3 bucket 是 mydomain.com

PS ：为了仔细检查问题不仅来自 bundle.js，我从存储桶中删除了背景图片，但不知何故，在访问 mydomain.com（所以显示V1）

Answer 1

正如@Joe Clay 证实的那样，Cloudfront 正在缓存所有内容。

要使用 AWS console 强制清除缓存（我在一些文档中发现可以使用它们的 API 来完成），以下是我遵循的步骤：

登录AWS console
转到 Cloudfront 并查看您的分发的详细信息
转到 invalidations 选项卡，然后单击 Create invalidation
放入对象路径*并保存
（花了大约 5 分钟才完成）
刷新网站mydomain.com（可能需要清理浏览器缓存）
瞧！

希望这个回答可以帮助遇到同样问题的任何人！

Answer 2

我知道这是个老问题。但我找到了一种使用我的部署脚本自动执行此过程的方法。这是我的 package.json 文件

中的条目

"deploy": "npm run build && aws s3 sync --delete build/ s3://bucket-name && npm run invalidateCache",
"invalidateCache": "aws cloudfront create-invalidation --distribution-id E23232323 --paths '/*'",

在这之后你所要做的就是运行 npm run deploy.

指令说明。

deploy：这为我的 React 应用程序创建了一个新构建。然后它从我的 s3 存储桶中删除所有旧文件并上传新文件。之后它运行是我的 invalidateCache 命令
invalidateCache：这会在我的云端分配中创建一个新的失效。您必须提供可以在下图中找到的分发 ID。最后一件事是路径。我输入 /* 以便它清除所有路径的缓存。

希望这对您有所帮助:)

Answer 3

我知道这是一个老问题。这也可以使用 lambda fn 来实现，这将使云端缓存对源 origin s3 存储桶中的任何更新无效。

创建一个 lambda 函数，它会在源 s3 存储桶文件中的任何更新时触发。
在lambda代码部分，写一段代码使cloudfront缓存失效。

此处提供相同的代码片段。

from __future__ import print_function

    import boto3
    import time

    def lambda_handler(event, context):
        path = []
        for items in event["Records"]:
            if items["s3"]["object"]["key"] == "index.html":
                path.append("/")
            else:
                path.append("/" + items["s3"]["object"]["key"])
        print(path)
        client = boto3.client('cloudfront')
        invalidation = client.create_invalidation(DistributionId='cloudfrontdistribution id',
            InvalidationBatch={
                'Paths': {
                    'Quantity': 1,
                    'Items': path
            },
            'CallerReference': str(time.time())
        })

cloudfront 指向 s3 上托管的旧版本 React

cloudfront points to old version of React hosted on s3

amazon-web-services

reactjs

amazon-s3

amazon-cloudfront

amazon-route53