React Remix部署IIS遇CSS加载404错误求解决方案

问题现象 #

使用npm run build构建生产版本、npm start启动Node服务后，通过IIS反向代理访问应用，页面可正常返回但CSS样式无法加载，浏览器控制台报“Failed to load resource: the server responded with a status of 404”错误。

核心原因 #

1. IIS默认的StaticFileModule会优先处理静态资源请求，尝试在本地站点目录查找/build/路径下的CSS文件，但这些文件实际存储在Node服务的public/build目录，导致IIS直接返回404，未转发请求到Node服务。
2. web.config中的重写规则未正确覆盖静态资源请求，或默认文档配置错误。

解决方案 #

1. 修正web.config配置 #

修改web.config，关闭IIS静态文件处理模块，并调整重写规则确保所有请求转发到Node服务：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- 关闭静态文件处理模块，避免IIS本地查找静态资源 -->
    <modules>
      <remove name="StaticFileModule" />
    </modules>
    <rewrite>
      <rules>
        <rule name="ReverseProxyAllRequests" stopProcessing="true">
          <match url="(.*)" />
          <!-- 仅当本地无对应文件/目录时转发，兼容未来本地静态资源需求 -->
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="http://localhost:54058/{R:1}" />
        </rule>
      </rules>
    </rewrite>
    <defaultDocument>
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
  </system.webServer>
</configuration>

2. 配置Remix静态资源路径 #

确保项目根目录存在remix.config.js（无则创建），设置正确的publicPath：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildPath: "build/index.js",
  serverModuleFormat: "esm",
  devServerPort: 54058, // 与Node服务启动端口保持一致
};

3. 验证依赖模块 #

确认IIS已安装URL Rewrite和**Application Request Routing (ARR)**模块，这是反向代理功能的必要组件。

4. 重启服务 #

• 重新构建应用：npm run build
• 重启Node服务：npm start
• 重启IIS站点，再次访问应用验证CSS是否加载正常。

备选方案（单独处理静态资源） #

若不想关闭静态文件模块，可添加专门规则转发/build/路径请求：

<rewrite>
  <rules>
    <rule name="ForwardStaticAssets" stopProcessing="false">
      <match url="^build/(.*)" />
      <action type="Rewrite" url="http://localhost:54058/build/{R:1}" />
    </rule>
    <rule name="ReverseProxyInboundRule1" stopProcessing="true">
      <match url="(.*)" />
      <conditions>
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="http://localhost:54058/{R:1}" />
    </rule>
  </rules>
</rewrite>

内容的提问来源于stack exchange，提问作者luis.torres