.NET Framework 4.8 WebApi与Angular部署至IIS的方案及日志问题咨询

Hey Ricardo, let's walk through how to get your .NET Framework 4.8 Web API + Angular stack deployed smoothly on IIS, fix that referrer headache, and get up to speed with MS Deploy—since you’re coming from Apache reverse proxy, we’ll map those concepts directly to IIS tools.

IIS plays nicely with both your .NET backend and Angular frontend, and we can replicate that Apache reverse proxy behavior using built-in IIS extensions. Here's the breakdown:

1. Angular Frontend Deployment #

First, get your Angular app production-ready:

• Build the production bundle with ng build --configuration production (or ng build --prod for older Angular versions)
• In IIS, create a new website pointing to your Angular dist folder
• Add a web.config to handle SPA routing (critical for Angular's client-side routes):

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

2. Web API Deployment #

For your .NET Framework 4.8 backend:

• Create a new IIS Application Pool set to .NET Framework v4.0 (4.8 is backward-compatible) with Integrated managed pipeline mode
• Create a new website (or application under the Angular site, if you prefer) pointing to your Web API's published files (you can publish locally from Visual Studio first, or use MS Deploy directly)

3. IIS Reverse Proxy (Replace Apache) #

To route API calls from Angular to your backend, use IIS's Application Request Routing (ARR) and URL Rewrite modules:

1. Install both modules via the IIS Web Platform Installer
2. In your Angular site's web.config, add a rewrite rule to forward /api/* requests to your Web API:

<rule name="Forward API Requests" stopProcessing="true">
  <match url="^api/(.*)" />
  <action type="Rewrite" url="http://localhost:YOUR_API_PORT/api/{R:1}" />
</rule>

(Replace YOUR_API_PORT with the port your Web API is running on in IIS)

If referrer headers are missing or being blocked, here are the most common fixes:

• Check Request Filtering: In IIS Manager, go to your site → Request Filtering → Rules. Ensure there are no rules blocking referrer headers. You can also explicitly allow referrers in web.config:

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits>
        <headerLimits>
          <add header="Referer" sizeLimit="1024" />
        </headerLimits>
      </requestLimits>
    </requestFiltering>
  </security>
</system.webServer>

• Adjust CORS Settings: If your Angular and API are on different domains/ports, ensure your Web API allows the Angular origin in CORS. Add these headers to your Web API's web.config:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="https://your-angular-domain.com" />
    <add name="Access-Control-Allow-Headers" value="Referer, Content-Type, Authorization" />
  </customHeaders>
</httpProtocol>

• Set Referrer-Policy: Control how browsers send referrer headers by adding this to either your Angular or API web.config:

<customHeaders>
  <add name="Referrer-Policy" value="strict-origin-when-cross-origin" />
</customHeaders>

(Adjust the value to no-referrer-when-downgrade or origin if needed, based on your security requirements)

MS Deploy is a huge time-saver for deploying both your API and Angular app directly from Visual Studio. Here's how to set it up:

1. Prep IIS for MS Deploy #

• Install the Web Deploy module via the IIS Web Platform Installer
• In IIS Manager, go to your site → Deploy → Configure Web Deploy Publishing. Create a publishing profile (save the .publishsettings file for later)
• Ensure the application pool identity has read/write permissions to your site's folder

2. Deploy from Visual Studio #

For .NET Framework 4.8 Web API #

1. Right-click your API project → Publish
2. Select Web Deploy as the target
3. Paste the server URL (e.g., https://your-server-ip:8172/msdeploy.axd), site name, and credentials from your .publishsettings file
4. Click Verify Connection to confirm, then hit Publish—VS will handle packaging and pushing updates directly to IIS

For Angular (Works with VS Code too) #

1. If using Visual Studio, right-click your Angular project → Publish → select Web Deploy
2. Use the same server/credentials as your API, point to your Angular site's folder in IIS
3. For VS Code, use the Azure App Service extension (or manually run msdeploy commands, but the VS GUI is easier for beginners)

3. Quick Troubleshooting Tips #

• Make sure port 8172 (Web Deploy's default port) is open in your server's firewall
• Verify the Web Deployment Agent Service is running on your server
• Ensure your publishing user has IIS Manager permissions and folder access rights

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