Question

我是Reactjs的新手，目前在React应用的IIS部署上遇到了一些问题。

我执行npm run build并生成一个生成文件夹，然后将该文件夹复制到我的IIS。当我浏览页面时，无法查看空白页面，但是当我导航到测试路线时，它显示404。

我尝试添加“主页”：“ /”或“主页”：“。在我的package.json中，但仍然相同。

index.html

这是我的构建结构

感谢您的帮助。

Answer 1

要在iis中部署react js应用，您可以按照以下步骤操作：

1）确保已启用以下iis功能：

asp.net最新版本静态内容目录浏览

2）以管理员身份打开命令提示符。进入react app文件夹，然后运行以下命令：

npm run build

在您的应用程序文件夹中创建一个构建文件夹。

3）打开iis，然后选择添加站点并添加文件夹路径，以构建文件夹和站点绑定详细信息：

现在，浏览您的网站。

注意：确保将iis_iusrs和iusr权限分配给站点文件夹。

Answer 2

每当您将反应页面部署到生产中时，您都会面临此问题。请参阅此页面：https://inthetechpit.com/2019/06/13/handle-client-side-routes-with-iis-on-page-refresh-react-app/

该问题发生在服务器中（不仅是IIS，而是所有IIS）。您将需要安装扩展，然后将配置文件添加到前端构建目录的路径。

要安装的扩展程序位于：https://www.iis.net/downloads/microsoft/url-rewrite

应放在前端构建目录中的web.config文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>

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

Answer 3

您可以在公共文件夹中创建 web.config 文件并将以下内容粘贴到其中然后再次执行 npm run build：

<?xml version="1.0"?>
<configuration>
<system.webServer>
  <rewrite>
     <rules>
        <rule name="React 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="/" />
        </rule>
     </rules>
  </rewrite>
</system.webServer>
</configuration>

部署到IIS后，React应用程序路由不起作用

3 个答案: