为.NET Core+Angular应用配置Nginx静态文件路径的问题

核心问题分析 #

你的Angular生产构建后静态文件引用路径为根路径（如/xxx.css），但当前Nginx配置未正确匹配这类请求并映射到/wwwroot/dist目录；若通过.NET Core托管Angular静态文件，后端的静态文件中间件也可能未配置到位。

方案一：Nginx直接托管Angular静态文件（推荐） #

如果Angular仅作为前端，API请求单独代理到.NET Core后端，直接让Nginx负责静态文件分发，无需通过.NET Core中转：

1. 修正Angular构建的base href
   确保构建时根路径指向正确，执行以下命令构建：

   ng build --prod --base-href /
   

   这样Angular的index.html里的资源引用会是根相对路径（如<link href="styles.css" rel="stylesheet">）。

2. 修改Nginx配置
   替换原有server块配置，优先匹配静态文件请求，同时处理Angular单页应用的路由 fallback：

   server {
       listen       8187;
       server_name  localhost;
       
       # 匹配所有静态资源后缀，直接从dist目录读取
       location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
           root /wwwroot/dist;
           expires 7d; # 开启静态资源缓存
       }
   
       # 处理Angular单页应用路由，找不到文件时返回index.html
       location / {
           try_files $uri $uri/ /index.html;
           root /wwwroot/dist;
       }
       
       # 若有API请求，单独代理到.NET Core后端（根据实际API前缀调整）
       location /api/ {
           proxy_pass https://localhost:8201;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
       }
       
       # 登录页面代理到app2
       location /login {
           proxy_pass https://localhost:8202;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
       }
   
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }
   

方案二：通过.NET Core托管Angular静态文件 #

如果必须通过.NET Core后端托管Angular静态文件，需要调整后端的静态文件中间件配置：

1. 修正Angular构建的base href
   同样执行构建命令确保根路径正确：

   ng build --prod --base-href /
   

2. 修改.NET Core的静态文件配置
   在Program.cs中修改静态文件中间件，将根路径请求映射到wwwroot/dist目录：

   using Microsoft.Extensions.FileProviders;
   using System.IO;
   
   var builder = WebApplication.CreateBuilder(args);
   // ... 其他配置代码
   
   var app = builder.Build();
   
   // 修改静态文件中间件配置
   app.UseStaticFiles(new StaticFileOptions
   {
       FileProvider = new PhysicalFileProvider(
           Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "dist")),
       RequestPath = "" // 根路径映射到dist目录
   });
   
   // ... 其他中间件配置（如路由、认证等）
   
   app.Run();
   

3. 保留原有Nginx代理配置
   此时Nginx的location /代理到https://localhost:8201即可，.NET Core会自动处理根路径的静态文件请求。

验证步骤 #

1. 重启Nginx服务：执行nginx -s reload（Windows或Linux对应命令）
2. 清除浏览器缓存（或使用无痕模式）访问页面
3. 打开浏览器开发者工具，查看静态文件请求的状态码是否为200，确认文件路径是否正确

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