如何在IIS服务器上部署分设frontend和backend文件夹的React项目？

阿华AIGC实验室

2026-4-21

嘿，别担心，这种前后端分离的项目部署其实很常见，我给你一步步拆解清楚：

第一步：先搞定前端的静态构建

进入你的frontend文件夹，运行这条命令：

npm run build

执行完成后会生成一个build文件夹，里面就是前端编译好的静态HTML、CSS和JS文件——这部分就是要部署到IIS上供用户直接访问的内容。

第二步：部署后端服务

把你的backend文件夹整个放到IIS的网站根目录（比如C:\inetpub\wwwroot\backend），或者单独创建一个新的IIS站点直接指向这个文件夹。
根据后端技术栈配置应用程序池：如果是Node.js后端，要确保IIS安装了IISNode模块，并且把应用程序池的.NET CLR版本设为No Managed Code；如果是.NET、Python这类后端，对应配置好各自的运行环境就行。
先单独测试后端API：打开浏览器访问http://你的服务器IP/backend/api/xxx，确认接口能正常返回数据，这一步很重要，避免后续排查问题时混淆前后端的问题。

第三步：配置前端与后端的请求转发（核心步骤）

因为前端是静态文件，直接访问的话调用后端API会有跨域问题，而且用户访问时应该用统一的域名，所以我们需要在IIS里设置反向代理和URL重写：

先安装IIS的两个官方扩展：URL Rewrite和Application Request Routing (ARR)，直接在服务器管理器的“添加角色和功能”里就能找到。
把前端的build文件夹内容放到IIS主站点的根目录（比如C:\inetpub\wwwroot），或者让后端作为主站点的子应用，前端静态文件放在主站点根目录。

在主站点的web.config里添加两条URL重写规则：

第一条：把所有以/api开头的请求转发到后端服务地址，示例配置如下：
```
<rule name="Forward API to Backend" stopProcessing="true">
  <match url="api/(.*)" />
  <action type="Rewrite" url="http://localhost:3001/api/{R:1}" />
</rule>
```
这里的http://localhost:3001是你后端服务的本地访问地址，根据实际的后端端口或域名修改就行。

第二条：处理React的单页路由问题，避免用户刷新页面时出现404：

<rule name="React Single Page 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="^/api/" negate="true" />
  </conditions>
  <action type="Rewrite" url="/index.html" />
</rule>