DigitalOcean Droplet无法访问3000端口，React项目部署异常

1. 修正React开发服务器的绑定地址 #

npm start默认仅绑定localhost(127.0.0.1)，外部设备无法访问。需要让服务器监听所有网卡地址：

• Linux/macOS环境下，直接执行：

  HOST=0.0.0.0 npm start
  

• Windows环境下，执行：

  set HOST=0.0.0.0 && npm start
  

• 也可以修改项目根目录的package.json，将scripts中的start字段改为：

  "start": "HOST=0.0.0.0 react-scripts start"
  

  之后再执行npm start即可。

2. 检查服务器本地防火墙规则 #

DigitalOcean的外层防火墙放行后，服务器自身的防火墙（如Ubuntu的ufw、CentOS的firewalld）可能仍拦截3000端口：

• 若使用ufw，执行以下命令放行端口：

  sudo ufw allow 3000/tcp
  sudo ufw reload
  

• 若使用iptables，添加规则并保存：

  sudo iptables -A INPUT -p tcp --dport 3000 -j ACCEPT
  sudo iptables-save > /etc/iptables/rules.v4
  

3. 验证端口监听状态 #

在服务器上执行命令，确认3000端口是否监听0.0.0.0而非仅127.0.0.1：

ss -tulpn | grep 3000

输出若包含0.0.0.0:3000则说明绑定正确；若仅显示127.0.0.1:3000，需回到第一步修正绑定地址。

4. 生产环境推荐：使用Nginx部署静态文件 #

React开发服务器仅适合开发场景，生产环境建议构建静态文件后用Nginx托管：

1. 执行构建命令生成生产文件：

   npm run build
   

2. 配置Nginx的server块（编辑/etc/nginx/sites-available/default或新增配置文件）：

   server {
       listen 80;
       server_name 你的公网IP或域名;
   
       root /path/to/my-app/build;
       index index.html;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

3. 重启Nginx生效：

   sudo systemctl restart nginx
   

   之后直接通过公网IP或域名（80端口）访问即可，无需开放3000端口。

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