Skip to content

AWS Amplify showing old version of my app on some networks

1

We are using AWS Amplify for our React Frontend. Since yesterday, we have noticed that on some networks, our domain is showing an older version of our app. Although in the AWS Amplify Console, we see the deployment is complete, on some internet networks, we are seeing an older version of our app. Also, the new issue that happened a few hours ago is that sometimes (intermittently) CloudFront returns 404 for our main js file, and it can not load our app completely. This issue happens on some networks but is not reproducible on others.

3 Answers
4

Hi Leo,

Please go through the below steps i hope it will heplful to resolve your issue.

1. Invalidate CloudFront Cache

  • When you deploy a new version of your app, old versions might still be cached. Invalidating the cache forces CloudFront to fetch the latest version.

Steps:

  1. Open the CloudFront console.
  2. Select your distribution.
  3. Go to the "Invalidations" tab.
  4. Create a new invalidation.
  5. Enter /* to invalidate all files.
  6. Click "Invalidate".

2. Check DNS Propagation

    • Sometimes, DNS changes take a while to spread across the internet. This can cause some networks to see an old version.

Steps:

  • Use a DNS propagation checker like What's My DNS.
  • Enter your domain to see if DNS changes have fully propagated worldwide.

3. Set Cache-Control Headers

Proper cache-control headers ensure that browsers and CloudFront cache your files correctly.

For S3 Files:

  1. Go to your S3 bucket in the AWS S3 console.
  2. Select a file, go to "Actions", then "Properties".
  3. Under "Metadata", add a Cache-Control header.
  4. For HTML files, use something like max-age=60 (short cache).
  5. For static assets (JS, CSS, images), use max-age=31536000 (long cache).

For CloudFront:

  1. Open the CloudFront console.
  2. Select your distribution.
  3. Go to the "Behaviors" tab.
  4. Edit the default behavior.
  5. Ensure it respects the cache-control headers from S3 or set them as needed.

4. Investigate 404 Errors

Intermittent 404 errors can happen if CloudFront can't find your files.

Enable CloudFront Logs:

  1. Open the CloudFront console.
  2. Select your distribution.
  3. Go to "Settings" and enable logging.
  4. Specify an S3 bucket for logs.

Enable S3 Server Access Logs:

  1. Go to your S3 bucket in the AWS S3 console.
  2. Go to "Properties".
  3. Enable "Server access logging".
  4. Specify a target bucket for logs.
  • Check these logs to see why some requests might be resulting in 404 errors.

5. Test on Different Networks

Clear Browser Cache:

Use incognito mode or clear your browser cache to ensure you are not seeing cached content.

Use cURL or Postman:

  • Test HTTP responses from different networks to check if the correct files are being served
curl -I https://your-domain.com/main.js

This command will show response headers, including cache-control information and whether the file is being found or returning a 404 error.

EXPERT
answered 2 years ago
  • We are using AWS Amplify, which means we don't have access to the Cloudfront distribution.

1

This might be related to the non deployment that I encountered earlier. I found out that I cannot deploy any of zip files when doing drag and drop. It says that the zip file was invalid, as a workaround I tried doing upload thru s3 buckets to the zip file to do the deployment. It said successfully deployed but when I checked my site it still showing the old site.

answered 2 years ago
0

Hi, we are having the same problem. One of our applications was changed for another one in amplify, the old application was removed and the new one was configured with the dns, but in some cases the old one application is showed to clients. I'm trying myself and in normal chrome i can see the old one and in private chrome i can see the new one.

There is a way to invalidate cache in the cdns? I dont actually have a cloudfront to send the invalidation because we delete the app in amplify long time ago.

Please Help

answered 7 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.