Angular项目搭配WEB Api后端一键部署至IIS的最佳实践咨询

Great question! You absolutely can deploy your Angular frontend and Web API backend together on IIS as a single unit—no separate deployments needed. I’ve done this several times, so here’s a proven approach with best practices to make it work smoothly:

Step 1: Align Your Project Structure #

First, organize your code so the Angular app lives inside your Web API project. This makes it easy to build and deploy everything as one package. A typical structure looks like this:

YourSolution/
├── YourWebApiProject/
│   ├── Controllers/
│   ├── Models/
│   ├── ClientApp/          # Your Angular application
│   │   ├── src/
│   │   ├── angular.json
│   │   └── ... (other Angular files)
│   ├── wwwroot/            # Angular build output will go here
│   └── ... (Web API files)

Step 2: Configure Angular to Build to Web API’s wwwroot #

Modify your Angular project’s angular.json to output build files directly into the Web API’s wwwroot folder (this is IIS’s default directory for static content). Find the outputPath setting under projects > [your-app-name] > architect > build > options and update it to a relative path pointing to wwwroot:

"outputPath": "../wwwroot"

Then run your production build:

ng build --configuration production

This will compile your Angular app and drop all static files (HTML, JS, CSS, assets) into the Web API’s wwwroot folder.

Step 3: Configure Web API to Host Static Files & Handle SPA Routing #

Your Web API needs to serve the Angular static files and handle SPA fallback routing (so refreshing an Angular route doesn’t throw a 404). Here’s how to set this up:

For .NET 6+ (Program.cs) #

Add these middleware calls in order (the order matters!):

// Serve static files from wwwroot (Angular's build output)
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

// Map Web API controllers
app.MapControllers();

// Fallback to Angular's index.html for all non-API routes (SPA support)
app.MapFallbackToFile("index.html");

For .NET Core 3.1/5 (Startup.cs) #

In Configure() method:

app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html");
});

This ensures:

• Requests to /api/... go to your Web API controllers
• All other requests (Angular routes, static assets) are served from wwwroot

Step 4: Deploy to IIS as a Single Package #

Now you can deploy the entire Web API project (including the wwwroot with Angular files) to IIS:

1. Publish the Web API: Use Visual Studio’s "Publish" wizard (targeting IIS) or run the command:

   dotnet publish --configuration Release --output ./publish
   

2. Set up IIS:
   • Create a new website in IIS Manager, pointing the physical path to your published folder.
   • Ensure the ASP.NET Core Module is installed on your IIS server (it’s required to run .NET Core APIs).
   • Enable the Static Content feature in IIS (if not already enabled) to serve Angular’s static files.

Key Best Practices #

• Avoid CORS issues: Since frontend and backend are hosted on the same domain, you won’t need CORS configuration—this is a big win! Just make sure Angular’s API calls use relative paths (e.g., this.http.get('/api/products') instead of a full URL).
• Environment-specific config: Use Angular’s environment files to set API paths for dev/prod. For production, set apiUrl: '' in environment.prod.ts to use the same domain as the frontend.
• Optimize static files: Configure IIS to compress static assets (Gzip/Brotli) and set appropriate cache headers for JS/CSS files to improve performance.
• HTTPS enforcement: Always deploy with HTTPS. Configure an SSL certificate in IIS, and update your Angular and Web API settings to use HTTPS exclusively.
• Separate dev vs prod workflows: Keep your local dev setup as is (Angular on localhost:4200, API on localhost:5000) with a proxy config, then switch to the combined deployment for production.

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