Nginx同域名部署多个.Net Core应用静态资源加载异常问题求助

根因说明 #

原有配置的问题有三个：

1. 全局正则匹配的静态资源规则优先级高于普通前缀location，所有静态资源请求都会被转发到app1的目录，导致app2的静态资源无法匹配
2. 静态资源后缀没有包含字体文件格式，导致font awesome图标加载失败
3. 未配置.NET Core应用的虚拟路径前缀，应用生成的静态资源链接默认是根路径，无法匹配虚拟路径规则

配置修改步骤 #

第一步：调整.NET Core应用配置 #

需要为每个应用配置对应虚拟路径前缀，让应用生成的资源链接自动带上/app1、/app2前缀：

1. 对于app1，打开Program.cs（.NET 6及以上版本），在app.UseStaticFiles();之前添加如下代码：

app.UsePathBase("/app1");

2. 对于app2，同理添加：

app.UsePathBase("/app2");

修改完成后重新编译发布两个应用到对应目录。

第二步：调整Nginx配置 #

替换原有配置内容为以下版本，核心是用嵌套location匹配每个应用的静态资源，避免全局冲突：

upstream app1 {
  server 192.168.1.1:5003;
}
upstream app2 {
  server 192.168.1.1:5004;
}
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name apps.domain.com;
  root /var/www/apps;

  location / {
    try_files $uri $uri/ /index.html;
    proxy_read_timeout 300s;
    proxy_connect_timeout 75s;
  }

  location /app1/ {
    # 匹配app1的静态资源
    location ~* ^/app1/(.*\.(js|css|svg|jpg|png|woff|woff2|ttf|eot|ico))$ {
      alias /var/www/app1/wwwroot/$1;
      expires 24h;
      add_header Cache-Control "public, no-transform";
    }
    # 静态资源找不到再转发给后端服务
    proxy_pass http://app1/;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
  }

  location /app2/ {
    # 匹配app2的静态资源
    location ~* ^/app2/(.*\.(js|css|svg|jpg|png|woff|woff2|ttf|eot|ico))$ {
      alias /var/www/app2/wwwroot/$1;
      expires 24h;
      add_header Cache-Control "public, no-transform";
    }
    # 静态资源找不到再转发给后端服务
    proxy_pass http://app2/;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
    proxy_set_header   Connection keep-alive;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
  }
}

第三步：验证生效 #

1. 执行nginx -t测试配置语法是否正确
2. 测试通过后执行systemctl reload nginx重载配置
3. 清空浏览器缓存后重新访问两个应用验证静态资源和图标加载正常

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