AWS EC2运行React应用，绑定Cloudflare自定义域名配置遇困

1. 确认EC2实例的公网访问基础信息 #

• 给EC2实例绑定弹性IP（临时公网IP重启会失效，弹性IP可固定地址）
• 确认React应用的服务端口（默认3000，生产环境建议用Nginx反向代理到80/443端口），同时在EC2安全组开放对应端口的入站规则（如80、443或3000）

2. 在Cloudflare配置DNS解析 #

你的域名是在Cloudflare购买的，DNS托管默认由Cloudflare负责，无需在Route 53配置NS记录，直接在Cloudflare后台操作：

• 登录Cloudflare控制台，进入目标域名的管理页面
• 切换到「DNS」标签页，添加解析记录：
  • 类型选A记录（IPv6环境选AAAA）
  • 名称填@（对应根域名，如yourdomain.com）或www（对应二级域名）
  • 内容填写EC2实例的弹性IP/公网IP
  • 代理状态先选「仅DNS」（测试解析生效后再开启Cloudflare代理）
  • TTL保持默认值即可

3. 配置EC2的反向代理（优化访问体验） #

若React应用运行在3000端口，直接访问域名加端口不够友好，推荐用Nginx做反向代理：

• 登录EC2实例，安装Nginx：

  # Ubuntu/Debian系统
  sudo apt update && sudo apt install nginx
  # CentOS/RHEL系统
  sudo yum install nginx
  

• 编辑Nginx配置文件（示例路径：/etc/nginx/sites-available/yourdomain.com）：

  server {
      listen 80;
      server_name yourdomain.com www.yourdomain.com;
  
      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;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  }
  

• 创建软链接启用配置：

  sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
  

• 重启Nginx服务：

  sudo systemctl restart nginx
  

4. 验证配置有效性 #

• 用nslookup yourdomain.com或dig yourdomain.com测试DNS解析是否指向EC2的IP地址
• 在浏览器直接访问你的域名，确认React应用能正常加载
• 若要开启Cloudflare的CDN和HTTPS，回到Cloudflare的「DNS」标签页将代理状态改为「代理」，再在「SSL/TLS」标签页选择「灵活」或「严格」模式（推荐严格模式，需在EC2上配置对应SSL证书）

常见问题排查 #

• 解析不生效：等待DNS缓存刷新（通常5-10分钟），检查Cloudflare的DNS记录是否正确，确认EC2的IP无误
• 访问超时：检查EC2安全组是否开放对应端口的入站规则，确认Nginx服务正常运行，验证EC2实例本身可正常访问

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