基于Nginx部署React+Node(MERN)应用遇Cannot GET /问题求助

1. 检查Nginx配置的正确性 #

先确认你的Nginx配置文件（通常在/etc/nginx/sites-available/mydomain.online或/etc/nginx/nginx.conf）是否存在逻辑错误，以下是针对不同场景的正确配置示例：

场景1：代理到pm2运行的React开发服务（监听3000端口） #

如果你的React是通过pm2启动react-scripts start，配置需确保传递正确请求头，并处理单页应用的路由 fallback：

server {
    listen 80;
    server_name mydomain.online;

    location / {
        proxy_pass http://127.0.0.1:3000;
        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;
        # 处理React单页路由，404时返回index.html
        proxy_intercept_errors on;
        error_page 404 =200 /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:5000/;
        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;
    }
}

注意：/api/代理路径末尾的/必须保留，它会将/api/xxx转发为5000/xxx，避免后端收到带/api前缀的请求。

场景2：生产环境推荐——直接托管React静态文件 #

生产部署时，优先构建React静态文件，再用Nginx直接托管，无需继续运行React开发服务器：

1. 先构建React应用：

cd your-react-project
npm run build

2. 修改Nginx配置：

server {
    listen 80;
    server_name mydomain.online;

    root /path/to/your-react-project/build;
    index index.html;

    # 处理React单页路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:5000/;
        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;
    }
}

2. 验证配置并重启Nginx #

修改配置后，先测试配置合法性：

sudo nginx -t

如果输出test is successful，再重启Nginx：

sudo systemctl restart nginx

3. 检查React服务状态 #

确认pm2管理的React服务是否正常运行：

pm2 status

若服务异常，重启对应应用：

pm2 restart <react-app-name>

同时检查3000端口是否被正常监听：

netstat -tulpn | grep :3000

4. 检查EC2安全组与防火墙 #

确保EC2安全组开放了80端口（HTTP），同时服务器防火墙（如ufw）允许80端口入站：

sudo ufw allow 80/tcp
sudo ufw reload

5. 查看Nginx日志定位问题 #

若以上步骤无效，查看Nginx错误日志获取具体报错信息：

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

访问mydomain.online后，日志会显示无法连接3000端口、路径匹配错误等具体原因。

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