在许多企业环境或 Windows 服务器平台中，IIS（Internet Information Services）是常见的 Web 服务器，若你的前端使用 React 框架，那么要将其部署到 IIS 上，需要做一些额外的配置工作。下面是一个较为完整、面向生产环境的部署流程与注意事项。
准备阶段：构建生产版本
1. 确认环境可用性
在目标服务器上，确保 IIS 已启用（在 “Windows 功能”中启用 Internet Information Services 及相关子功能）。
若尚未启用，可进入「控制面板 → 程序和功能 → 启用或关闭 Windows 功能」，勾选 IIS 及其 “Web 管理工具”、“万维网服务” 等。
2. 在本地生成生产包
在 React 项目根目录下执行：
npm run build或者如果用的是 yarn：
yarn build这个命令会将你的应用打包为静态文件，生成 build 文件夹，里面包含 HTML、CSS、JS、以及资源静态文件。
3. （可选）配置 homepage 或 publicPath
如果你的应用不是部署在根路径（例如部署在 https://www.example.com/app），你可能需要在 package.json 中指定 homepage 字段，或在构建工具中调整 publicPath，以确保资源引用路径正确。
在 IIS 上创建站点 / 应用
1. 创建或选择应用池
在 IIS 管理器中，找到 Application Pools，右键新增一个应用池（如 ReactAppPool）。
在其“高级设置”中，可以调整 .NET CLR 版本（通常不需要 .NET）或进程标识（Identity），视需要而定。
2. 创建网站或应用
常见有两种做法：
方式 A：新建一个独立 网站
在 “Sites” 节点上右键 → “Add Website…”，输入站点名称、物理路径（即 build 目录所在路径）、绑定端口（如 80 或 443），然后选择刚刚创建的应用池。
方式 B：在已有站点下作为子应用
如果你的 IIS 上已有主站点（例如默认的网站），可以在其下添加 “Add Application”，设定一个别名（Alias）和物理路径，并将其指向 build 目录。
3. 设置默认文档
进入你的网站或应用节点，在 “Default Document” 中确保 index.html 在文档列表中且位置优先。如果没有，可手动 “Add” 一个。
4. 权限设置
让 IIS 的默认匿名访问身份（如 IUSR 或应用池标识）对 build 文件夹有读取权限。右键文件夹 → 属性 → 安全 → 添加或修改权限。
配置 URL 重写（解决前端路由刷新问题）
React 应用通常作为单页应用（SPA），前端路由管理在浏览器端。如果用户直接访问诸如 /about 路径，服务器端必须将其重写到 index.html，否则会出现 404。为此，需要在 IIS 中配置 URL Rewrite 规则。
1. 安装 URL Rewrite 模块
如果服务器尚未安装，请下载并安装 “IIS URL Rewrite” 扩展模块。
2. 在网站根目录下加入 web.config
在 build 输出目录中，或在部署后物理目录中，添加 web.config 文件，内容类似：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<!-- 先对静态资源直接放行 -->
<rule name="StaticAssets" stopProcessing="true">
<match url="([\S]+[.](html|htm|css|js|png|jpg|jpeg|gif|svg|ico|woff|woff2|map))" />
<action type="None" />
</rule>
<!-- React 前端路由规则 -->
<rule name="ReactSPA" 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>
</configuration>
这个配置会让所有非静态资源请求都重写到 index.html，从而在客户端路由中处理路径。
3. 部署时包含该 web.config
最好在 React 项目的 public 或根目录中就放一个模板 web.config，这样 npm run build 后输出中就包含它。之后部署时无需手动再添加。
子路径部署（非根路径场景）
如果你将应用部署在某个子路径（例如 https://domain.com/appname），还需要注意：
- 在 package.json 的 homepage 字段设置成 /appname/，这样构建后的 JS/CSS 等资源路径前缀就会带上 /appname/。
- 在 web.config 中的 Rewrite 规则中，也要确保重写到 /appname/index.html 或者调整 url 前缀。
- 在你的 React 路由配置（如 React Router）中，basename 要设置为子路径（如 <BrowserRouter basename="/appname">）。
测试与调试
1. 启动浏览器访问
打开 http://your-server-domain/ 或带路径的 URL，检查页面是否正常加载。
2. 刷新页面测试
尝试刷新不同路由下（如 /about、/user/123）是否仍能正常跳转而不报 404。
3. 查看浏览器控制台 / 网络面板
如果有静态资源加载失败（404），通常是路径问题。检查 URL 是否正确，资源引用路径是否带了错误前缀。
4. 查看 IIS 日志 / 事件查看器
若服务器端出现 500 错误或权限问题，可从 IIS 日志、Windows 事件或 HTTP 响应错误码定位问题。
常见问题及解决方案
页面显示空白或仅显示 <noscript> 内容
可能原因：JS 或 CSS 资源未被加载。
解决方法：检查资源 URL 路径，是否与子路径或根路径混淆；修改 homepage 或 basename；确认 web.config 的重写规则生效。
刷新页面时报 404
可能原因：重写规则未配置或生效失败。
解决方法：确认已经安装 URL Rewrite 模块；检查 web.config 是否在正确目录，语法是否正确。
权限被拒绝
可能原因：IIS 进程标识没有对文件夹的读取权限。
解决方法：给 IUSR、应用池对应身份授予读取权限。
在子路径下资源 404
可能原因：构建时资源引用仍为根路径。
解决方法：必须在构建时配置前缀（如 homepage 或 publicPath），并在路由时使用 basename。
IIS 默认首页优先级不对
可能原因：index.html 未被列在 Default Document 前列。
解决方法：在 “Default Document” 中手动把 index.html 放在前列。