如何开放GCP VM实例80端口？React项目访问故障排查

按以下步骤逐一排查：

1. 修复Nginx配置语法错误 #

你的Nginx配置存在语法问题：location /{中/和{之间缺少空格，会导致Nginx无法加载配置。同时建议显式添加listen指令确保监听80端口，修正后的配置如下：

server {
    listen 80;
    server_name 12.13.14.15;
    location / {
        proxy_pass http://localhost: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;
    }
}

执行配置校验命令确保无错误：

sudo nginx -t

校验通过后重启Nginx生效：

sudo systemctl restart nginx

2. 确认Nginx正常运行并监听80端口 #

检查Nginx服务状态：

sudo systemctl status nginx

如果服务未运行，启动并设置开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

再检查端口监听情况，确认Nginx在监听80端口：

ss -tulpn | grep :80

输出需包含nginx进程和0.0.0.0:80或:::80的监听记录。

3. 检查VM内部防火墙规则 #

GCP外部防火墙规则生效后，VM内部的防火墙（如ufw、iptables）可能仍会拦截80端口：

• 若使用ufw，查看状态并允许80端口：

  sudo ufw status
  sudo ufw allow 80/tcp
  

• 若使用iptables，添加允许80端口入站的规则：

  sudo iptables -A INPUT -p tcp --dport 80 -j ACCEPT
  

4. 验证React服务的可用性 #

在VM内部访问React服务，确认其正常运行：

curl http://localhost:3000

如果无法返回页面内容，检查React服务是否启动，建议使用pm2等工具托管React生产构建后的服务，避免终端关闭后服务停止。

5. 核对GCP防火墙规则细节 #

• 确认规则的目标标签与VM实例的标签完全匹配（若规则使用标签过滤）；
• 确认规则的来源范围包含你的访问IP（或设置为0.0.0.0/0允许所有IP）；
• 确认规则应用到了VM实例所在的VPC网络。

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