Felsökning av React-app-hosting med react-router-dom på IIS-server

När du hostar en React-app med React Router på en IIS-server (Internet Information Services) kan du stöta på problem med routning. Detta beror på att IIS hanterar rutter annorlunda än en typisk server för single-page applications (SPA). Den här guiden hjälper dig att konfigurera IIS korrekt så att klientsidans routning fungerar som förväntat.

Så här gör du

1. Steg 1: Konfigurera IIS Rewrite Rules

   IIS måste konfigureras för att korrekt hantera routning på klientsidan. Lägg till omskrivningsregler i din web.config-fil i rotkatalogen för din React-app:

   <configuration>
     <system.webServer>
       <rewrite>
         <rules>
           <rule name="React Router Routes" 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>

   Denna regel omdirigerar alla förfrågningar som inte matchar en fysisk fil eller katalog till index.html.

2. Steg 2: Ange basename-prop i React Router

   I din React Router-konfiguration, använd basename-propen för att specificera bas-URL:en för alla platser. Detta bör matcha underkatalogen eller den virtuella katalogen där din app är värd på IIS-servern:

   <BrowserRouter basename="/your-subdirectory">
     {/* Rutter */}
   </BrowserRouter>

   Ersätt /your-subdirectory med den faktiska sökvägen till underkatalogen där din app är värd på servern.

3. Steg 3: Säkerställ korrekt byggkonfiguration

   När du bygger din React-app, konfigurera rätt hem-URL i din package.json-fil. Detta bör också matcha underkatalogen eller den virtuella katalogen där din app kommer att vara värd på IIS-servern:

   "homepage": "/your-subdirectory"

   Ersätt /your-subdirectory med den faktiska sökvägen till underkatalogen.

4. Steg 4: Testa lokalt

   Innan du distribuerar till IIS-servern, testa din React-app lokalt för att säkerställa att routningen fungerar som förväntat. Du kan använda verktyg som serve eller http-server för att servera din byggda React-app lokalt och testa routning.

5. Steg 5: Distribuera och felsöka

   Distribuera din React-app till IIS-servern och testa routning. Om du stöter på problem, använd webbläsarens utvecklarverktyg för att inspektera nätverksförfrågningar och konsolfel för eventuella ledtrådar om vad som kan gå fel.