如何让AWS EC2上运行在3001端口的REACT应用通过HTTP 80端口访问

方案1：Nginx反向代理（生产环境优先选择） #

这个方案稳定性、性能最优，后续也方便扩展HTTPS、静态资源缓存等能力，操作步骤如下：

• 安装Nginx

sudo apt update && sudo apt install nginx -y

• 新建React应用的Nginx配置文件

sudo nano /etc/nginx/sites-available/react-app

将以下配置粘贴到文件中，把your_ec2_public_ip替换为你的EC2实例公网IP或者绑定的域名：

server {
    listen 80;
    server_name your_ec2_public_ip;

    location / {
        proxy_pass http://localhost:3001;
        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;
    }
}

• 激活配置文件并删除默认Nginx站点（避免80端口冲突）

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default

• 测试配置是否合法，合法后重载Nginx生效

sudo nginx -t
# 提示test is successful后执行重载
sudo systemctl reload nginx

• 若系统开启了ufw防火墙，放行Nginx HTTP流量

sudo ufw allow 'Nginx HTTP'

方案2：iptables端口转发（临时测试使用） #

不需要安装额外服务，适合临时调试场景，重启后规则会失效（如需持久化可安装iptables-persistent）：

• 执行端口转发规则，将80端口的TCP流量转发到本地3001端口

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 3001

• 如需持久化规则，执行以下操作：

sudo apt install iptables-persistent -y
sudo netfilter-persistent save

方案3：直接修改应用监听端口（不推荐生产使用） #

1024以下端口需要root权限才能绑定，直接用root运行Node服务存在安全风险，仅适合快速验证：

• 修改项目package.json中的启动脚本，在启动命令前加PORT=80，示例：

"start": "PORT=80 react-scripts start"

• 用sudo权限启动应用

sudo npm start

验证配置 #

确保你的React应用正在3001端口正常运行，直接在浏览器输入EC2实例的公网IP，无需加端口号即可访问应用。

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