如何解决.NET+Angular18 SSR部署到Nginx出现404错误问题

我通过Visual Studio的.NET Core与Angular18模板创建了SPA项目，近期为优化SEO切换至SSR架构并安装了@angular/ssr。项目在本地IIS上运行正常，但部署到Nginx服务器后出现404错误，怀疑是Nginx配置问题，附上当前配置寻求解决指导。

server {
    listen 80;
    listen [::]:80;
    server_name stage.testsite.com;

    return 301 https://stage.testsite.com$request_uri;
}


server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name stage.testsite.com;


    ssl_certificate /etc/letsencrypt/live/stage.testsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/stage.testsite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;  # Security best practices
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;    # Pre-generated DH parameters

    # Set the root directory for your stage app
    root /var/www/stage-site;
    index index.html;

    # Enable Gzip for better performance
    gzip on;
    gzip_min_length 1000;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Proxy requests to your .NET Core application on port 5187
    location / {
        proxy_pass http://127.0.0.1:5153;  # The port where your .NET Core app is running
        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;
    }

    # Error handling
    error_page 500 502 503 504 /custom_50x.html;
    location = /custom_50x.html {
        root /var/www/stage-site
    }
}

• 检查.NET Core应用运行状态

  • 用命令netstat -tulpn | grep 5153确认端口5153是否被.NET Core应用占用，直接访问http://127.0.0.1:5153验证应用是否能正常响应。
  • 查看.NET Core应用日志，排查是否存在启动失败或请求处理异常。

• 修复Nginx配置语法错误

  • 注意到location = /custom_50x.html块的最后一行root /var/www/stage-site缺少分号，这会导致Nginx配置加载失败。补上分号后，执行nginx -s reload重启Nginx。

• 调整SSR路由转发逻辑

  • Angular SSR由.NET Core托管，所有请求需转发至后端处理。若静态资源由.NET Core提供，当前location /配置无需修改；若静态资源存于Nginx的root目录，需添加静态资源拦截规则：

    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
        root /var/www/stage-site;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    

  • 确保proxy_set_header Host $host配置正确，.NET Core路由可能依赖该请求头。

• 查看Nginx日志定位问题

  • 检查Nginx错误日志（通常路径/var/log/nginx/error.log），排查是否存在连接超时、配置错误或转发失败信息。
  • 查看访问日志（/var/log/nginx/access.log），确认请求是否正确转发至后端端口，以及后端返回的状态码。

• 验证SSL配置有效性

  • 确认/etc/letsencrypt/options-ssl-nginx.conf和ssl_dhparam文件存在且权限正常，避免因SSL配置错误导致请求无法处理。

• 重启相关服务

  • 修改配置后执行nginx -s reload使Nginx配置生效，同时重启.NET Core应用确保其处于正常运行状态。

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