Open huangshuwei opened 4 years ago
上一篇已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 IIS站点服务器配置为例,其他站点服务器类似
react 路由 history 模式发布在web 站点服务器上需要额外的配置,否则无法正常访问
下载安装成功,需要在站点根目录创建 web.config 文件
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节点配置修改为:
action
url
home.html
如果后缀为 index.html 浏览器上可以不用体现,否则需要全称 <action type="Rewrite" url="/home.html" />
如果后缀为 index.html 浏览器上可以不用体现,否则需要全称
<action type="Rewrite" url="/home.html" />
如果发布的文件放到站点的子文件夹中,需要修改以下配置
react 路由增加 basename 属性 属性值需要和站点下的子文件夹名称相同,假设站点下有一个 folder1 文件夹,那么react 路由配置改动为:
basename
<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'>
<?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>
--完--
前言
上一篇已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 IIS站点服务器配置为例,其他站点服务器类似
安装 IIS UrlRewrite使用
下载安装成功,需要在站点根目录创建
web.config
文件站点服务器只配置一个单页应用
配置如下
如果单页应用的名称不是 index.html 需要修改
action
节点的url
属性。假设单页应用名称为home.html
,那么action
节点配置修改为:发布文件放在站点的子文件夹中
如果发布的文件放到站点的子文件夹中,需要修改以下配置
react 路由增加
basename
属性 属性值需要和站点下的子文件夹名称相同,假设站点下有一个 folder1 文件夹,那么react 路由配置改动为:修改 web.config 配置
站点服务器配置多个单页应用
一个站点服务器可以放多个单页应用,假设和 folder1 文件同级还有一个 folder2 文件夹,folder2 里面放着另外一个应用。那么需要修改以下配置
第二个应用的 react 路由增加
basename
属性 属性值需要和站点下的子文件夹名称相同,那么react 路由配置改动为:修改 web.config 配置
重写站点地址
如想通过以下url 地址 http://mysite.com/ 达到访问 http://mysite.com/folder1 的目的,需要重写站点地址配置。如站点里有两个应用,分别存放在 folder1 和 folder2 中,此时想把默认站点定位到 folder1 中的应用,可以改为:
应用目录迁移
假设在文件夹 folder1 中的应用已经发布上线,此时需要迁移到到文件夹 folder-new 中,那么如果需要让之前用户正常访问老的地址,需要做到兼容处理(页面是嵌在上线的app 中的或者用户量比较大)。我们希望用户访问 http://mysite.com/folder1 自动跳转到 http://mysite.com/folder1-new 。我们可以通过配置重定向规则来解决。
首先修改路由的
basename
属性修改 web.config 文件 新增文件夹 folder1-new 的重写规则
新增文件夹 folder1的跳转规则
web.config 完整的配置
思考&QA
basename
属性值硬编码? 建议basename
属性值配置化参考
--完--