刷新页面出现Nginx 404 Not Found问题求助（已尝试try_files）

方案一：Nginx托管静态文件并处理前端路由 #

1. 调整Docker挂载配置 #

在Docker Compose的volumes中添加静态文件目录挂载，让Nginx容器能访问到index.html：

volumes:
  - ./nginx_data:/etc/nginx/conf.d       # Nginx configurations
  - /etc/letsencrypt/:/etc/letsencrypt/  # Certificates for https
  - /home/ubuntu/web_server/public:/usr/share/nginx/html  # 挂载前端静态文件到Nginx容器

2. 修改Nginx配置 #

更新server块中的location /，优先处理静态文件，找不到时返回index.html交给前端路由处理，API请求单独代理：

server {
    server_name    example.com;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://192.168.x.y:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

server {
    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    server_name    example.com;
    listen 80;
    return 404; # managed by Certbot
}

方案二：Node服务处理前端路由（静态文件由Node托管） #

如果你的Node服务本身负责托管前端静态文件，无需修改Nginx挂载，只需在Node服务中添加路由 fallback：
以Express为例，添加以下代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管前端静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 挂载API路由
app.use('/api', require('./routes/api'));

// 所有非API、非静态文件的请求，返回index.html让前端路由处理
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(5000, () => console.log('Server running on port 5000'));

此时Nginx的原有配置无需修改，所有请求代理到Node服务后，由Node处理路由 fallback。

原配置问题说明 #

你之前添加try_files未生效的原因是：Nginx容器内没有挂载/home/ubuntu/web_server/public目录，导致Nginx无法找到index.html，最终还是会将请求转发给Node服务，而Node服务没有对应前端路由的处理逻辑，因此返回404。

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