Angular5+ASP.NET Core前后端分离部署：如何将API发布至home/api目录？

Absolutely! You can absolutely deploy your ASP.NET Core API to a subdirectory like home/api—the issues you're seeing are just misconfigurations in your web.config files and routing setup. Let's break down what's going wrong and how to fix it:

Why You're Seeing These Errors #

• 502 Bad Gateway when deploying API to home/api: Your root web.config is pointing to .\Api.dll in the root directory, but the actual API files are in home/api. The ASP.NET Core Module can't find the DLL to start the process, hence the "app not started" error.
• Frontend 404s when deploying API to home: The root web.config has <add name="aspNetCore" path="*" verb="*" ... />, which tells IIS to route all requests to the ASP.NET Core API—including requests for Angular's static files (like index.html, main.js, etc.). The API doesn't know how to serve these files, so you get a 404.

Step-by-Step Fixes #

1. Add a Dedicated web.config to the home/api Directory #

Your API subdirectory needs its own web.config that points to the DLL inside that folder. Create a web.config file in home/api with this content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
    </handlers>
    <aspNetCore 
      processPath="dotnet" 
      arguments=".\Api.dll" 
      stdoutLogEnabled="true" 
      stdoutLogFile=".\logs\stdout" />
  </system.webServer>
</configuration>

• I enabled stdoutLogEnabled="true" here—this will create log files in home/api/logs if the API fails to start, which is super helpful for debugging 502 errors (e.g., missing .NET Core runtime, incorrect DLL path).

2. Update the Root home web.config for Angular #

The root web.config needs to handle two things: serve Angular's static files, and route API requests to the api subdirectory while letting Angular handle its own client-side routing. Replace your root web.config with this:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!-- Ensure static files like JS/CSS/HTML are served correctly -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <!-- Add any other MIME types your Angular app uses -->
    </staticContent>

    <!-- URL Rewrite for Angular routing and API forwarding -->
    <rewrite>
      <rules>
        <!-- Let API requests pass through to the /api subdirectory -->
        <rule name="API Route" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="api/{R:1}" />
        </rule>

        <!-- Route all non-file/directory requests to index.html (for Angular SPA routing) -->
        <rule name="Angular 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This setup ensures:

• Any request starting with /api/ is sent directly to your ASP.NET Core API in the home/api folder.
• All other requests (like Angular routes) are routed to index.html, so your Angular app can handle client-side navigation correctly.
• Static files are served normally without being intercepted by the API.

3. Plesk Configuration Checks #

• Verify .NET Core Runtime: Make sure your Plesk host has the correct .NET Core runtime version installed (matching what your API was built with). You can check this in Plesk's "Tools & Settings" > "Server Components".
• Directory Permissions: Ensure the home/api directory has read/execute permissions for the IIS application pool identity (usually IIS_IUSRS or the pool's specific user). You can adjust this in Plesk's "File Manager" > right-click api > "Permissions".
• Application Pool Setup: In Plesk, go to your domain's "Hosting Settings" > "Application Pool" and make sure it's set to use a .NET Core-compatible pool (not a classic .NET pool).

Once you've applied these changes, restart your Plesk application pool and test both your frontend (e.g., https://yourdomain.com) and API (e.g., https://yourdomain.com/api/your-endpoint)—they should both work correctly.

内容的提问来源于stack exchange，提问作者Arsalan