To deploy a React app in a subdirectory of an IIS website, you can use an IIS virtual directory (web.config)

  1. Build your React app using the npm run build command. This will create a build folder with the compiled assets and files.
  2. Open IIS Manager and create a new virtual directory under the website you want to use.
  3. In the virtual directory properties, set the physical path to the build folder created in step 1.
  4. In the virtual directory properties, set the application pool to the same one used by the parent website.
  5. In the virtual directory properties, set the virtual path to the desired subdirectory name (e.g. /myapp).
  6. Open the web.config file located in the build folder and add the following code inside the <system.webServer> element:
<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" />
      </conditions>
      <action type="Rewrite" url="/myapp/index.html" />
    </rule>
  </rules>
</rewrite>

This code will rewrite any incoming request to the subdirectory to the index.html file inside the build folder.

  1. Save the web.config file and restart IIS.

Your React app should now be accessible in the subdirectory you specified, and all the routes should work as expected.


날짜:

카테고리:

태그: