ASP.NET Core应用部署至Linux局域网环境后页面布局错乱问题求助

排查步骤 #

1. 优先检查浏览器资源加载错误
   按F12打开浏览器开发者工具，切换到「网络」面板，刷新页面后查看所有css、js、图片类静态资源的返回状态：

• 如果出现大量404报错，优先排查大小写匹配问题：Windows系统对路径大小写不敏感，而Debian区分大小写，常见问题为代码中引用的路径（如/css/Main.css）和实际服务器上的文件名（如main.css）大小写不一致，逐一修正即可。
• 如果出现403报错，检查发布目录的文件权限，给运行应用的用户开放wwwroot目录的读权限：

sudo chmod -R 755 /你的发布文件存放路径/wwwroot

2. 检查ASP.NET Core配置
   打开项目的Program.cs（.NET 6及以上版本）或Startup.cs（.NET 5及以下版本），确认路由注册前已经添加了静态文件中间件：

// 必须放在app.UseRouting()、app.MapControllerRoute()之前
app.UseStaticFiles();

如果静态资源没有放在默认的wwwroot目录下，按需额外配置静态文件路径即可。

3. 检查发布包完整性
   解压你发布的linux-arm单文件包，确认wwwroot目录完整存在，里面的css、js、图片等资源和你Windows开发环境下的文件完全一致。如果发布时没有打包进wwwroot，打开项目的.csproj文件，删除类似<Content Remove="wwwroot/**" />的排除规则，重新发布即可。

4. Nginx配置校验（如使用Nginx托管）
   确认Nginx的反代配置没有过滤静态资源请求，参考配置如下：

server {
    listen 80;
    server_name 你的静态IP;

    location / {
        proxy_pass http://localhost:5000; # 替换为你ASP.NET Core应用监听的端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

也可以直接配置Nginx处理静态资源，提升加载速度：

location ~* \.(css|js|png|jpg|gif|ico)$ {
    root /你的发布文件存放路径/wwwroot;
    expires 30d;
}

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