CODEWITHSUNDEEP
amazon-web-servicesreactjsamazon-s3amazon-cloudfrontamazon-route53
195436
195436

Reputation: 293

cloudfront points to old version of React hosted on s3

I have deployed my React app on s3. I am using Cloudfront to use a certificate and reach my s3 bucket through HTTPS. After struggling setting it all up, I managed to set it all up, it is now working well.

Now I updated my project, created a new version of bundle.js, uploaded it to s3.

My issue now is that mydomain.com points to the V1 of bundle.js

So what I tried to dig up a little bit more, and here is what I found:

So my guess is that for some reason, cloudfront points to the V1, but why ? Is there some cache somewhere in there ?

Here is the config, in case it helps:

PS : Just to double check that the issue was not only coming from bundle.js, I deleted the background image from the bucket, but somehow, it is still found and used when accessing mydomain.com (so showing the V1)

Upvotes: 6

Views: 3436

Answers (3)

Arshad
Arshad

Reputation: 139

I know this is an old question. This can also be achieved using lambda fn which will invalidate the cloudfront cache for any update in the source origin s3 bucket.

  1. Create a lambda function which gets triggered for any update in sourcce s3 bucket files.
  2. In the lambda code part, write a code to invalidate cloudfront cache.

Code snippet is here for the same.

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())
        })

Upvotes: 1

hunain60
hunain60

Reputation: 337

I know this is old question. But i found a way to automate this process using my deployment script. Heres an entry from my package.json file

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

After this all you have to do is to run npm run deploy.

Explanation of commands.

  1. deploy: This creates a new build for my react app. Then it deletes all old files from my s3 bucket and uploads new files. After that it runs my invalidateCache command
  2. invalidateCache: This creates a new invalidation in my cloudfront distribution. You have to provide the distribution id which you can find in the below image. The last thing is the path. I entered /* so that it clears cache for all paths. enter image description here

Hope this helps :)

Upvotes: 5

195436
195436

Reputation: 293

As @Joe Clay confirmed, Cloudfront was caching everything.

To force clear the cache using the AWS console (I found in some docs that it can be done using their API), here are the steps I followed:

  • log in to AWS console
  • go to Cloudfront and see details of your distribution
  • go to invalidations tab, and click on Create invalidation
  • put in object path * and save
  • (took about 5 good minutes to complete)
  • Refresh the website mydomain.com (might need to clean the browser cache)
  • and voila !

Hope this answer can help anyone stuck with the same problem!

Upvotes: 13

Related Questions