ReactJS部署Nginx环境下直接访问特定URL路径出现404 Not Found问题求助

我之前部署React应用时也碰到过完全一样的问题，这其实是单页应用（SPA）的典型路由问题，咱们一步步来解决：

问题原因 #

你的React应用是单页应用，所有路由逻辑都在客户端浏览器里处理。从主页点击跳转时，是React的客户端路由在工作，不会向Nginx发起新的页面请求；但直接在地址栏输入example.com/admin/login或刷新页面时，浏览器会向Nginx发起请求，Nginx会去服务器的/home/ubuntu/app-deploy/build目录下找admin/login这个文件/文件夹——显然它不存在，所以返回404。而npm start用的React开发服务器会自动把所有路由请求转发到index.html，因此不会出现这个问题。

解决方案：修改Nginx配置 #

你只需要修改Nginx配置里的location /块，让Nginx在找不到对应文件时，自动把请求转发到index.html，交给React客户端路由处理。

修改后的完整配置如下：

server {
    server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 为示例IP
    root /home/ubuntu/app-deploy/build;
    index index.html; # React默认将构建文件生成在build目录

    location / {
        # 关键修改：找不到文件时转发到index.html
        try_files $uri $uri/ /index.html;
    }

    listen 443 ssl; # 由Certbot管理
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # 由Certbot管理
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # 由Certbot管理
    include /etc/letsencrypt/options-ssl-nginx.conf; # 由Certbot管理
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # 由Certbot管理
}

server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # 由Certbot管理

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # 由Certbot管理

    listen 80;
    server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 为示例IP
    return 404; # 由Certbot管理
}

验证和重启 #

1. 先测试修改后的配置是否合法：

sudo nginx -t

如果输出syntax is ok和test is successful就没问题。

2. 重启Nginx让配置生效：

sudo systemctl restart nginx

现在再直接访问example.com/admin/login或任意子路径，就能正常加载页面，由React客户端路由处理了。

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