如何在IIS上正確設置ReactJS應用？

Question

看了幾個關於同一問題的話題。 沒有人為我工作。 關鍵是：我有從create-react-app設計的ReactJS + Redux應用程序。 確實可以，但是當應用程序瀏覽以不同於root的URL開頭時，拋出404。安裝了iisnode並嘗試了Web中推薦的不同重寫規則，但是沒有任何效果。 最后一個是：

    <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>

我唯一需要做的是通過根url發送所有傳入請求，並將其余的地址傳遞給它，以便SPA可以正常工作。 托管：AzureVM IIS：v10

編輯：另一個奇怪的是iisnode可以處理js文件的重定向，但是我的應用程序在index.html呈現，當我嘗試將index.html指向處理程序時，它實際上向我顯示了一個空白頁。

Answer 1

這個web.config對我web.config 。 希望它會幫助別人。

<?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>