如何在IIS上正确设置ReactJS应用程序？ [英] How to set up ReactJS app on IIS properly?

问题描述

在同一问题上观看了几个主题。没有人为我工作。
事情是：
我有从create-react-app设计的ReactJS + Redux应用程序。实际上它是有效的，但是当应用程序冲浪以不同于root的URL开始时抛出404.
已安装 iisnode 并尝试了在web中推荐的不同重写规则，但没有任何作用。
最后是这一个：

Watched through few topics on same question. None worked for me. The thing is: I have ReactJS + Redux app designed from create-react-app. Actually it works but when app surfing starts with URL different from root is throws out 404. Installed iisnode and tried out different rewrite rules recommended in web, but nothing works. Last was this one:

    <rule name="Redirect HTTP to HTTPS">
      <match url="(.*)" />
      <conditions>
        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
      </conditions>
      <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent"/>
    </rule> -->

    <rule name="Redirect non-existent paths to root">
      <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="^/initialLogin/*" ignoreCase="true" negate="true" />            
      </conditions>
      <action type="Redirect" url="/" appendQueryString="false" />
    </rule>
  </rules>
</rewrite>

我唯一需要的是通过root url发送所有传入请求并传递其余地址为了使SPA能够正常运作。
主机：AzureVM
IIS：v10

The only thing I need is to send all incoming requests through root url with passing the rest of the address to it so that SPA could work properly. Hosting: AzureVM IIS: v10

编辑：另一个奇怪的事情是 iisnode 可以使用js文件处理重定向，但我的应用程序在 index.html 中呈现，当我尝试指向 index.html 作为处理程序，它实际上向我显示了一个空白页。

Another curious thing is thet iisnode can handle redirections with js files, but my application renders in index.html and when I tried to point index.html as handler it actually showed me a blank page.

推荐答案

此 web.config 适合我。希望它会帮助其他人。

This web.config works for me. Hope it will help someone else.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <!-- This part is responsible for URL rewrites -->
        <rewrite>
          <rules>
            <rule name="ReactJS 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>
        <!-- This allows CORS for testing purposes -->
        <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
       </httpProtocol>
  </system.webServer>
</configuration>

这篇关于如何在IIS上正确设置ReactJS应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！