Angular SSR部署Nginx后直接访问路由报502 Bad Gateway问题

你的问题出在Nginx配置错误地将前端路由请求转发到了不存在的Node服务。构建后的Angular应用是纯静态文件，不需要依赖Node.js运行，直接由Nginx托管即可。当你直接输入/all这类路由时，Nginx找不到对应的物理文件，就会转发到127.0.0.1:4200，但Docker容器内并没有在这个端口运行Node服务，因此返回502错误。

修改后的Nginx配置 #

server {
    listen       80;
    server_name  localhost;
    root /dist/app;

    # 启用gzip压缩优化加载速度
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript application/json;

    location / {
        # 优先匹配静态文件，找不到则返回index.html，由Angular处理前端路由
        try_files $uri $uri/ /index.html;
    }

    # 为静态资源设置缓存，提升性能
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

关键修改说明 #

• 移除了upstream ssr_nodejs块及对应的转发配置，因为构建后的Angular不需要Node服务。
• 修改try_files规则，当请求的文件/目录不存在时，直接返回index.html，让Angular的前端路由接管处理。
• 新增了gzip压缩和静态资源缓存配置，优化应用加载性能。

验证步骤 #

1. 确保Angular应用已正确构建：执行ng build --prod（或ng build，根据Angular版本调整），生成的静态文件在dist/app目录下。
2. Docker镜像中正确将dist/app目录复制到容器内的/dist/app路径。
3. 重启Nginx服务，再次测试直接输入路由（如http://localhost/all），此时应该能正常加载对应页面。

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