在IIS部署React前端项目

在IIS上部署React前端项目，在不是根路径的时候刷新页面会404，可以通过url rewrite设置解决这个问题。

首先在react项目中运行npm run build打包项目。

然后在IIS上创建一个站点，把build文件夹里的内容拷贝到站点文件夹内。

这个时候已经可以直接访问这个react项目了。点击路由链接也是正常工作的。

但是如果在不是根目录路径刷新页面的话就会报404错误，解决方法是这样的：

下载URL Rewrite，下载地址是：https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads

安装好以后重启IIS服务，可以在IIS里看到URL重写这个模块。

然后在站点根目录下添加一个web.config文件，文件内容是：

<configuration> 
  <system.webServer> 
    <rewrite> 
      <rules> 
        <rule name="React" 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="/" />
        </rule>
      </rules> 
    </rewrite> 
    <staticContent>
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent> 
  </system.webServer> 
</configuration>

然后再刷新页面，就不会404找不到页面了。这里的rewrite规则是把所有请求都转发到根目录，这样就解决了。类似的Angular部署到IIS也是这样配置就可以了。