You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Create React App部署IIS:配置Rewrite规则实现路由转发咨询

IIS Rewrite Configuration for Create React App with API Forwarding

Hey there! I’ve helped plenty of folks set up CRA deployments on IIS with exactly these requirements—let’s fix those rewrite rules for you. The key here is rule order (IIS processes rules top-to-bottom) and making sure we don’t accidentally intercept static files or API calls.

Here’s the complete web.config you should place in your CRA’s build directory (the root of your IIS site):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- Rule 1: Forward all /api/* requests to your MVC server -->
        <rule name="Forward API Requests" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="http://your-mvc-server-address/api/{R:1}" />
          <!-- Replace "http://your-mvc-server-address" with your actual MVC server URL -->
        </rule>

        <!-- Rule 2: Serve static files directly for /content/* and /static/* -->
        <rule name="Serve Static Content Directly" stopProcessing="true">
          <match url="^(content|static)/(.*)" />
          <action type="None" />
          <!-- No rewrite needed—let IIS serve the files as-is -->
        </rule>

        <!-- Rule 3: Fallback all other requests to index.html (SPA routing) -->
        <rule name="SPA Fallback to Index" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- Only apply this rule if the requested file/directory doesn't exist -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- Double-check we're not matching API or static paths (redundant but safe) -->
            <add input="{REQUEST_URI}" pattern="^/(api|content|static)/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>

    <!-- Optional: Enable gzip compression for better performance -->
    <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
      <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="*/*" enabled="false" />
      </dynamicTypes>
      <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="*/*" enabled="false" />
      </staticTypes>
    </httpCompression>
  </system.webServer>
</configuration>

Let’s break down each rule:

  1. Forward API Requests:

    • Matches any URL starting with api/ (the ^ ensures it’s at the start of the path).
    • Rewrites the request to your MVC server, using {R:1} to preserve the rest of the API path (e.g., /api/users/1 becomes http://your-mvc-server/api/users/1).
    • stopProcessing="true" means once this rule matches, IIS won’t check the rest—critical so API calls don’t get caught by the SPA fallback.
  2. Serve Static Content Directly:

    • Matches paths starting with content/ or static/.
    • action type="None" tells IIS to serve the actual file from the filesystem instead of rewriting the URL.
    • Again, stopProcessing="true" ensures these static assets aren’t redirected to index.html.
  3. SPA Fallback to Index:

    • Matches any URL (.*), but only if:
      • The requested file doesn’t exist (so we don’t override actual static files like main.js or favicon.ico).
      • The requested directory doesn’t exist.
      • The URL doesn’t start with api/, content/, or static/ (a safety net even though earlier rules should catch these).
    • Rewrites the request to /index.html, letting React Router handle the frontend routing.

Key Notes to Avoid Issues:

  • Replace the MVC Server URL: Make sure http://your-mvc-server-address points to your actual MVC application (include the port if it’s not using 80/443).
  • Install IIS Rewrite Module: You’ll need the IIS URL Rewrite Module installed on your server—this is required for the rules to work.
  • Check File Permissions: Ensure the IIS app pool identity has read access to the build directory’s files.
  • Test Each Path: Verify:
    • /api/your-endpoint forwards correctly to the MVC server.
    • /content/your-file.css loads the static file directly.
    • /about or other frontend routes load index.html and let React Router handle the rest.

内容的提问来源于stack exchange,提问作者Michael

火山引擎 最新活动