部署在Microsoft IIS服务器的Gatsby站点静态资源报404错误如何解决

1. 补全缺失的MIME类型 #

IIS默认未识别Gatsby常用的现代资源格式后缀，会直接返回404，按以下步骤配置：

• 打开IIS管理器，定位到对应站点，双击「MIME类型」功能
• 点击右侧操作栏的「添加」，依次补充以下映射：
  • 扩展名：.webmanifest，MIME类型：application/manifest+json
  • 扩展名：.webp，MIME类型：image/webp
  • 扩展名：.avif，MIME类型：image/avif
  • 若存在其他自定义后缀的静态资源报错，按对应标准MIME类型补充即可

2. 修正URL重写规则 #

如果配置了SPA路由的重写规则，错误的规则会拦截/static目录下的静态资源请求，可直接在站点根目录新建web.config文件写入以下配置，同时覆盖MIME和重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
      <mimeMap fileExtension=".avif" mimeType="image/avif" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Gatsby SPA Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/static/.*" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

如果是手动在IIS配置的重写规则，直接在规则的条件里新增排除项，匹配^/static/.*路径时不执行重写即可。

3. 检查目录访问权限 #

• 确认站点运行身份（默认是IUSR账户）对static目录有读取权限，右键目录选择「属性-安全」，核对对应账户的权限配置，缺少读取权限时补充即可。

4. 验证构建产物完整性 #

• 本地重新执行gatsby build，检查生成的public目录下是否存在报错404的对应资源，排除构建过程异常导致的资源缺失问题。

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