blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon huangshuwei

react 路由 history 模式-站点服务器配置（iis）

Open huangshuwei opened this issue 5 years ago • 0 comments

前言

上一篇已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 IIS站点服务器配置为例，其他站点服务器类似

react 路由 history 模式发布在web 站点服务器上需要额外的配置，否则无法正常访问

安装 IIS UrlRewrite使用

下载安装成功，需要在站点根目录创建 web.config 文件

站点服务器只配置一个单页应用

配置如下

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        
        <rule name="single app rule" 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>
  </system.webServer>
</configuration>

如果单页应用的名称不是 index.html 需要修改 action 节点的 url 属性。假设单页应用名称为home.html，那么 action节点配置修改为：

如果后缀为 index.html 浏览器上可以不用体现，否则需要全称

<action type="Rewrite" url="/home.html" />

发布文件放在站点的子文件夹中

如果发布的文件放到站点的子文件夹中，需要修改以下配置

react 路由增加 basename 属性 属性值需要和站点下的子文件夹名称相同，假设站点下有一个 folder1 文件夹，那么react 路由配置改动为：

<Router basename='/folder1'>

修改 web.config 配置

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        
      <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>
        
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

站点服务器配置多个单页应用

一个站点服务器可以放多个单页应用，假设和 folder1 文件同级还有一个 folder2 文件夹，folder2 里面放着另外一个应用。那么需要修改以下配置

第二个应用的 react 路由增加 basename 属性 属性值需要和站点下的子文件夹名称相同，那么react 路由配置改动为：

<Router basename='/folder2'>

修改 web.config 配置

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>

        <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

      </rules>
    </rewrite>
  </system.webServer>
</configuration>

重写站点地址

如想通过以下url 地址 http://mysite.com/ 达到访问 http://mysite.com/folder1 的目的，需要重写站点地址配置。如站点里有两个应用，分别存放在 folder1 和 folder2 中，此时想把默认站点定位到 folder1 中的应用，可以改为：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--文件夹1-重写-->
        <rule name="folder1 rule" stopProcessing="true">
          <match url="folder1/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1/index.html" />
        </rule>

        <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

        <!--默认站点-跳转-规则（跳转到‘文件夹1’的地址）-->
        <rule name="root" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/folder1" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

应用目录迁移

假设在文件夹 folder1 中的应用已经发布上线，此时需要迁移到到文件夹 folder-new 中，那么如果需要让之前用户正常访问老的地址，需要做到兼容处理（页面是嵌在上线的app 中的或者用户量比较大）。我们希望用户访问 http://mysite.com/folder1 自动跳转到 http://mysite.com/folder1-new 。我们可以通过配置重定向规则来解决。

首先修改路由的basename属性

 <Router basename='folder1-new'>

修改 web.config 文件 新增文件夹 folder1-new 的重写规则

...
 <!--folder1-new-重写-规则-->
        <rule name="folder1-new rewrite rule" stopProcessing="true">
          <match url="folder1-new/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1-new/index.html" />
        </rule>
...

新增文件夹 folder1的跳转规则

  <!--folder1-跳转-规则（跳转到folder1的新地址）-->
        <rule name="folder1 rewrite rule" stopProcessing="true">
           <match url="folder1/" />
           <action type="Redirect" url="/folder1-new" />
        </rule>

web.config 完整的配置

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>

        <!--folder1-new-重写-规则-->
        <rule name="folder1-new rewrite rule" stopProcessing="true">
          <match url="folder1-new/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder1-new/index.html" />
        </rule>

         <!--文件夹2-重写-->
        <rule name="folder2 rule" stopProcessing="true">
          <match url="folder2/" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/folder2/index.html" />
        </rule>

        <!--folder1-跳转-规则（跳转到folder1的新地址）-->
        <rule name="folder1 rewrite rule" stopProcessing="true">
           <match url="folder1/" />
           <action type="Redirect" url="/folder1-new" />
        </rule>

        <!--默认站点-跳转-规则（跳转到‘文件夹1’的地址）-->
        <rule name="root" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/folder1" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

思考&QA

  • react 路由对象的 basename 属性值硬编码？ 建议 basename 属性值配置化

参考

  • https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-the-url-rewrite-module
  • https://shiyousan.com/post/636013489240140155

--完--

huangshuwei avatar Oct 08 '19 10:10 huangshuwei