React应用index.html未更新/重建，页面全局自动刷新异常求助

Let’s break down why your index.html isn’t updating and fix it step by step:

1. The Timestamp Script Is Looking for the Template in the Wrong Directory #

Your timestamp.sh script references ./build/index_template.html, but it’s almost certain your index_template.html lives in your project root directory (not inside build/). This means the script can’t find the template file, so it fails silently and leaves your old index.html intact.

Fix: #

Update the path in timestamp.sh to point to the correct location of your template. If it’s in the root, change the sed line to:

sed "s/%%timestamp%%/?ts=${timestamp}/g" ./index_template.html > ./build/index.html

2. The Timestamp Script Isn’t Executable #

If you haven’t set execute permissions on timestamp.sh, npm will fail to run it during the build process.

Fix: #

Run this command once in your project root to make the script executable:

chmod +x timestamp.sh

3. Your Build Command Is Failing Before Reaching the Timestamp Script #

If the compile or minify steps in your build process throw an error, npm will stop executing subsequent commands (including timestamp.sh). This means your old index.html never gets overwritten.

Fix: #

Run your build command manually and check for errors:

npm run build

Look for any error messages from browserify or uglifyjs. Fix those issues first (like syntax errors in your React code) so the build completes fully.

4. Verify the Generated Index.html #

After running npm run build, open ./build/index.html directly in a text editor. Check if the auto-refresh script is still present:

<!-- <script> setInterval(function() { window.location.reload(); }, 300000); </script> -->

If it’s still uncommented, that confirms the timestamp script didn’t run correctly. Go back to steps 1-3 to resolve that.

5. Caching Issues (Local or Remote) #

If you’ve confirmed the new index.html is generated correctly but still see the old behavior:

• Local development: Clear your browser cache, or use incognito mode to bypass caching. Your serve command uses -c-1 which disables caching, but sometimes browsers hold onto old files.
• S3 Deployment: Ensure your aws s3 sync command is overwriting the old index.html. You can add the --delete flag to remove outdated files (use cautiously):

  aws s3 sync build/ s3://spark.generaltraffic.co.uk --profile=genta-s3 --acl public-read --exclude 'node_modules/*|.env' --delete
  

Also, check the cache headers for index.html in S3—set it to Cache-Control: no-cache, no-store, must-revalidate to prevent browsers from caching it long-term.

Bonus: Add Error Handling to Your Script #

To catch issues early, update your timestamp.sh with basic error checking:

#!/bin/bash
timestamp="$(date +%s)"
echo Adding cache busting timestamp $timestamp

# Check if template exists
if [ ! -f ./index_template.html ]; then
  echo "ERROR: index_template.html not found in project root!"
  exit 1
fi

# Generate new index.html
sed "s/%%timestamp%%/?ts=${timestamp}/g" ./index_template.html > ./build/index.html

# Verify output
if [ -f ./build/index.html ]; then
  echo "Successfully updated index.html with timestamp ${timestamp}"
else
  echo "ERROR: Failed to generate index.html"
  exit 1
fi

This will make it obvious if the script hits a problem during the build.

内容的提问来源于stack exchange，提问作者Michael93