前端项目放在云服务器后无法访问，可能是什么原因？

前端项目部署到云服务器后无法访问，是运维和开发交接或独立部署时最常见的问题之一。作为在云计算领域摸爬滚打多年的从业者，我见过太多因为“以为配置好了”而忽略基础细节的案例。

这个问题通常不是单一原因造成的，而是网络层、安全组、服务层、DNS/域名层四个维度的叠加结果。请按照以下逻辑顺序逐一排查，90% 的问题都能定位：

1. 第一道关卡：云厂商的安全组（Security Group）与防火墙

这是国内云厂商（阿里云、腾讯云、华为云等）最坑新人的地方。服务器内部的防火墙关闭了，不代表云平台的虚拟防火墙放行了流量。

• 检查点：
  • 登录云控制台，找到你的 ECS/CVM 实例。
  • 进入“安全组”配置页面。
  • 确认入方向规则是否放行了 80 (HTTP) 和 443 (HTTPS) 端口。
  • 常见错误：只开了 22 (SSH)，忘了开 Web 端口；或者协议类型选错了（应选 TCP）。
• 补充检查：
  • 如果服务器内部安装了 iptables、firewalld 或 ufw，确保这些系统级防火墙也放行了对应端口。
  • 命令示例（CentOS）：systemctl status firewalld 查看状态，firewall-cmd --list-ports 查看已开放端口。

2. 第二道关卡：Web 服务是否真正启动并监听

文件上传上去不等于服务跑起来了。你需要验证进程状态。

• 检查点：
  • Nginx/Apache 进程是否存在？

    ps -ef | grep nginx
    # 或者
    systemctl status nginx

  • 是否监听正确端口？

    netstat -tlnp | grep :80
    # 或
    ss -tlnp | grep :80

  • 关键细节：确认 Nginx 监听的 IP 是 0.0.0.0:80 还是 127.0.0.1:80。如果是后者，外部无法直接访问，需要通过反向X_X或修改配置为 listen 80;。

3. 第三道关卡：Nginx/Apache 配置文件与权限

即使服务启动了，如果配置错误或权限不足，也会返回 403 Forbidden 或 502 Bad Gateway。

• 常见错误场景：
  • 路径错误：root /var/www/html; 指向的目录是否正确？前端打包后的 index.html 和静态资源（js/css/img）是否真的在该目录下？
  • 权限问题：Nginx 运行用户（通常是 nginx 或 www-data）是否有读取该目录的权限？

    ls -la /path/to/your/frontend/dist
    chmod -R 755 /path/to/your/frontend/dist
    chown -R nginx:nginx /path/to/your/frontend/dist

  • Index 指令缺失：如果访问的是目录而非具体文件，确保配置中有 index index.html;。否则可能返回 403。
  • 日志排查：查看 Nginx 的错误日志，这是最直接的线索。

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

4. 第四道关卡：域名解析与 SSL 证书（如果使用 HTTPS）

• DNS 解析：
  • 使用 ping yourdomain.com 或 nslookup yourdomain.com 检查域名是否解析到了正确的服务器公网 IP。
  • 注意 CNAME 记录是否生效，TTL 缓存可能导致延迟。
• SSL 证书：
  • 如果使用 HTTPS，确保证书文件路径正确，且私钥密码无误。
  • 浏览器报错通常是 ERR_CERT_COMMON_NAME_INVALID（域名不匹配）或 ERR_SSL_PROTOCOL_ERROR（证书过期或配置错误）。
  • 强制跳转问题：检查 Nginx 配置中是否有 return 301 https://...，如果证书没配好，会导致循环重定向或连接失败。

5. 第五道关卡：应用本身的路由模式（History Mode）

如果你使用的是 Vue Router、React Router 的 history 模式，刷新页面会报 404。

• 原因：后端服务器没有配置 fallback，将所有请求都指向 index.html。
• 解决：在 Nginx 中添加如下配置：

  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html; # 关键行
  }

6. 其他隐蔽因素

• CDN 缓存：如果接入了 CDN，清除 CDN 缓存后再测试。有时 CDN 节点缓存了旧的 404 或空内容。
• 负载均衡（SLB/CLB）：如果前面挂了负载均衡，检查健康检查配置。如果后端服务器健康检查失败，流量会被切断。
• SELinux：在某些 CentOS/RHEL 系统中，SELinux 可能阻止 Nginx 读取非标准目录的文件。临时设为 permissive 测试：setenforce 0。
• 端口冲突：80 端口是否被其他程序占用？lsof -i :80

✅ 快速自查清单（建议按顺序执行）

1. Ping 测试：ping <公网IP> → 通吗？不通则网络路由或 IP 绑定问题。
2. Telnet 测试：telnet <公网IP> 80 → 连上吗？连不上则安全组/防火墙拦截。
3. curl 本地测试：在服务器上执行 curl http://localhost → 有内容吗？没内容则 Nginx 配置或服务未启动。
4. curl 网络测试：从另一台机器执行 curl http://<公网IP> → 有内容吗？无内容则可能是安全组或 DNS 问题。
5. 看日志：tail -f /var/log/nginx/access.log 和 error.log → 看具体报错信息。

最后提醒：不要只依赖“看起来正常”，要用 curl 和 telnet 这种底层工具验证连通性，它们比浏览器更诚实。