Ubuntu下Angular 4+.NET Core 2+Nginx部署：Bundle加载500错误求助

我之前部署Angular + .NET Core到Ubuntu Nginx的时候也碰到过一模一样的问题——主页能打开，但所有bundle文件全报500，Windows本地跑完全正常。大概率是权限、路径配置或者静态文件服务的问题，给你几个排查方向：

一、先搞定文件权限（最常见的坑） #

Ubuntu上Nginx是用www-data用户运行的，如果Angular打包后的dist目录或者里面的bundle文件权限不对，Nginx根本读不到，直接返回500。
你可以这么操作：

# 先查看dist目录的权限情况，看看所有者是不是www-data
ls -la /path/to/your/angular/dist
# 如果不是，修改所有者和权限，让Nginx能访问
sudo chown -R www-data:www-data /path/to/your/angular/dist
sudo chmod -R 755 /path/to/your/angular/dist

二、检查Nginx配置的静态文件路径 #

很多时候是Nginx的路径配置写错了，导致找不到bundle文件。给你一个靠谱的配置示例（假设你的.NET Core应用监听5000端口，Angular dist放在/var/www/angular-app/dist）：

server {
    listen 80;
    server_name your-domain.com;

    # 处理Angular的静态文件和路由
    location / {
        root /var/www/angular-app/dist;
        # 支持Angular单页路由，刷新页面不会404
        try_files $uri $uri/ /index.html;
        # 给静态文件加缓存，提升性能
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 把API请求转发给.NET Core应用
    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

这里要注意：

• root后面的路径必须是Angular dist文件夹的根目录，比如你的main.bundle.js在dist下，那root就指向dist，Nginx会自动拼接路径找文件
• 如果用alias的话，路径末尾的斜杠一定要注意，比如location /app/ { alias /var/www/dist/; }，少个斜杠就会出问题

三、检查.NET Core Startup.cs的静态文件配置 #

如果你的Angular文件是放在.NET Core项目的wwwroot目录里的，要确保Configure方法里正确启用了静态文件中间件：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    // 启用静态文件服务，默认会读取wwwroot目录
    app.UseStaticFiles();

    // 配置SPA支持，处理Angular路由
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp"; // 你的Angular项目所在目录

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });

    app.UseHttpsRedirection();
    app.UseMvc();
}

要是你把Angular dist部署在.NET Core项目外面的目录，那得手动指定静态文件路径：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "../angular-app/dist")),
    RequestPath = ""
});

这里要注意Ubuntu的路径是用/分隔的，别写成Windows的\，而且要确保.NET Core的进程有访问这个目录的权限。

四、看日志找具体原因 #

500错误只是个笼统的提示，看日志能直接定位问题：

• Nginx错误日志：

  sudo tail -f /var/log/nginx/error.log
  

  里面会显示比如“permission denied”或者“file not found”的具体错误信息
• .NET Core应用日志：
  如果是用systemd托管的，直接看服务日志：

  sudo journalctl -u your-dotnet-app.service -f
  

  或者看应用自己生成的日志文件，有没有静态文件访问的异常

五、其他小坑 #

• 浏览器缓存：有时候浏览器缓存了旧的bundle路径，试试Ctrl+F5强制刷新，或者打开无痕模式测试
• SELinux限制：如果你的Ubuntu启用了SELinux，可能会阻止Nginx访问文件，临时关闭测试一下：

  sudo setenforce 0
  

  如果解决了，再配置SELinux规则允许Nginx访问对应目录就行

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