You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

使用Nginx在远程服务器部署React静态文件时遭遇连接超时问题求助

排查Nginx部署React应用连接超时问题

从你描述的情况来看,Nginx已经正常监听80端口,但外部访问出现超时,大概率是网络连通性或权限类问题,咱们一步步来排查:

1. 优先检查服务器防火墙/安全组规则

这是最常见的原因:

  • 如果是AWS EC2实例,一定要去控制台的安全组配置里,添加一条入站规则,允许0.0.0.0/0或指定IP访问80/tcp端口;
  • 如果是其他云服务商或自建服务器,检查系统防火墙:
    • ufw status查看Ubuntu/Debian的防火墙状态,若80端口未开放,执行sudo ufw allow 80/tcp
    • firewall-cmd --list-all查看CentOS/RHEL的防火墙状态,若80端口未开放,执行sudo firewall-cmd --add-port=80/tcp --permanent && sudo firewall-cmd --reload

2. 确认你访问的是服务器公网IP

bash终端里显示的user@123-45-6-789可能是内网IP或服务器主机名,不一定是公网IP。你可以在服务器上执行:

curl ifconfig.me

拿到的结果才是外部能访问的公网IP,用这个地址再尝试访问。

3. 测试服务器本地是否能正常访问Nginx

在服务器上执行:

curl http://localhost

如果能返回React应用的HTML内容,说明Nginx配置、文件路径都是正常的,问题肯定出在外部网络连通性上;如果返回错误,再看下一步。

4. 检查Nginx运行用户的文件权限

确保Nginx的运行用户(通常是www-datanginx)有权限访问你的React静态文件目录:

# 给目录及文件添加读权限
sudo chmod -R 755 /home/user/application/deployment/build
# 或者直接修改目录所属用户为Nginx运行用户
sudo chown -R www-data:www-data /home/user/application/deployment/build

修改后重启Nginx:

sudo systemctl restart nginx

5. 查看Nginx错误日志找线索

如果以上步骤都没解决,查看Nginx的错误日志,能直接定位问题:

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

尝试访问的时候看日志输出,比如有没有“permission denied”“file not found”这类报错。

关于Putty端口转发的额外排查

虽然你说隧道功能正常,但还是确认下Putty的隧道配置:

  • 源端口填6000,目标地址填localhost:80(注意是服务器的localhost,不是本地);
  • 本地访问时用http://localhost:6000,而不是服务器IP+6000。

内容的提问来源于stack exchange,提问作者Christina Stebbins

火山引擎 最新活动