react production build 404 not found

前端 未结 2 1430
暗喜
暗喜 2021-02-10 19:53

Hello i need to deploy react app.

To achieve that i run : \"npm run build\"

after that in my vhost.conf i\'ve added vhost



        
相关标签:
2条回答
  • 2021-02-10 20:40

    Using web.config for IIS Window 10

        <?xml version="1.0" encoding="utf-8"?>
    <!--
      For more information on how to configure your ASP.NET application, please visit
      https://go.microsoft.com/fwlink/?LinkId=169433
      -->
    <configuration>
      <system.webServer>
        <rewrite>
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^" ignoreCase="false" />
          <conditions logicalGrouping="MatchAny">
            <add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
            <add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
          </conditions>
          <action type="None" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="^" ignoreCase="false" />
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
      </system.webServer>
      <system.web>
        <customErrors mode="Off" />
        <httpRuntime targetFramework="4.6.1" executionTimeout="240" maxRequestLength="2048000" />
        <trace enabled="true" requestLimit="40" localOnly="false" />
      </system.web>
      <system.webServer>
        <defaultDocument>
          <files>
            <clear />
            <add value="Index.aspx" />
            <add value="Default.htm" />
            <add value="Default.asp" />
            <add value="index.htm" />
            <add value="index.html" />
            <add value="iisstart.htm" />
            <add value="default.aspx" />
          </files>
        </defaultDocument>
        <directoryBrowse enabled="false" />
      </system.webServer>
    </configuration>
    
    0 讨论(0)
  • 2021-02-10 20:42

    This is a common issue that comes up for SPA. In SPA, mostly the routing happens on client side. In your case, mostly react-router should be doing the job. Since the whole js is bundled as a single file and is served in index.html, you need to serve index.html for all paths that is non-existing in your server.

    You have to add a config like this

    RewriteEngine On  
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    
    RewriteRule ^ /index.html [L]
    

    So, if there is no matching path in your server, the index.html would get served. Then the javascript would execute and react-router(client side routing) will take over and display the correct component for the route.

    This is true for most SPA, where the routing happens on client side.

    0 讨论(0)
提交回复
热议问题