ReactJS部署至IIS后如何自动生效更新无需手动刷新

你之前操作的三项IIS配置（应用池AlwaysRunning、站点Preload Enabled、iisreset），全部是服务端层面优化站点冷启动速度的配置，和浏览器端加载最新前端资源、感知版本更新没有关联，完全达不到你要的自动更新效果。按以下步骤配置即可达成目标：

1. 配置IIS静态资源缓存规则 #

核心逻辑是区分入口文件和带hash的静态资源的缓存策略，这一步解决用户新打开页面时拿到旧资源的问题：

• 站点根目录的index.html配置为完全不缓存，每次请求都从服务端拉取最新版本，避免浏览器缓存旧入口导致引用旧版本js/css包
• build/static目录下的所有带内容hash的js、css、图片等资源，配置7-30天的强缓存，这类资源文件名随内容变化，不会出现新旧版本冲突
• 直接在站点根目录创建/修改web.config文件即可生效，不需要重启IIS，参考配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- 默认所有资源不缓存，后续给static目录取代规则 -->
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
    <!-- React History路由重写规则，避免刷新404 -->
    <rewrite>
      <rules>
        <rule name="ReactRouteRewrite" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  <!-- 单独给static目录下带hash的资源配置长缓存 -->
  <location path="static">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

2. 前端增加版本检测逻辑 #

仅配置缓存只能解决用户新开页面拿到新资源的问题，如果用户长时间打开页面不刷新，仍然会停留在旧版本，需要加前端主动检测逻辑：

• 在React项目的public目录新增version.json文件，修改打包脚本，每次执行npm run build时，自动将当前构建时间戳/自定义版本号写入该文件，和其他构建产物一起输出到build目录
• 在项目根组件（如App.jsx）中加入定时检测逻辑，每隔3-5分钟发起一次带随机参数的请求拉取版本文件，避免请求被缓存，参考逻辑：

  const checkVersion = async () => {
    const res = await fetch(`/version.json?t=${Date.now()}`)
    const { version: latestVersion } = await res.json()
    const localVersion = localStorage.getItem('site_version')
    if (!localVersion) {
      localStorage.setItem('site_version', latestVersion)
      return
    }
    if (localVersion !== latestVersion) {
      // 两种更新策略二选一
      // 1. 无感知直接刷新：location.reload()
      // 2. 不打断用户操作：弹出*"站点已更新，点击刷新加载最新内容"*的轻量提示条，用户点击后再触发刷新
      localStorage.setItem('site_version', latestVersion)
    }
  }
  // 组件挂载后启动定时检测
  useEffect(() => {
    checkVersion()
    const timer = setInterval(checkVersion, 5 * 60 * 1000)
    return () => clearInterval(timer)
  }, [])
  

3. 部署环节规范 #

• 每次上传新版本构建产物前，先清空IIS站点对应的根目录文件，再上传新的build产物，避免旧版本的hash文件残留在目录中被误访问
• 部署完成后不需要执行iisreset，该命令会重启整个IIS服务造成短暂服务中断，静态文件替换完成后IIS会自动响应新的资源
• 如果站点上层挂了CDN或者开启了IIS输出缓存，需要额外配置index.html和version.json不走缓存，静态资源缓存规则和IIS侧保持一致即可。

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