AWS Elastic Beanstalk中HTTP转HTTPS后React应用无法显示求助

问题根源 #

你的Nginx配置存在两个核心问题：

1. 初始配置中root指向了index.html文件（root必须指向目录，而非单个文件），直接触发500内部错误。
2. 修改root后页面空白，是因为仅配置了80端口的重定向逻辑，未正确处理HTTPS（443端口）的请求路由，或是React构建产物的路径匹配错误。

正确Nginx配置方案 #

在项目根目录创建.ebextensions/nginx/conf.d/react.conf配置文件（Elastic Beanstalk会自动加载该路径下的自定义配置），内容如下：

# 处理HTTP请求，重定向至HTTPS
server {
    listen 80;
    server_name example.com;
    # 适配负载均衡场景的协议判断，非负载均衡场景可直接用return 301 https://$host$request_uri;
    if ($http_x_forwarded_proto = 'http') {
        return 301 https://$host$request_uri;
    }
}

# 处理HTTPS请求，适配React单页应用路由
server {
    listen 443 ssl;
    server_name example.com;

    # 注意：React默认npm run build生成的静态文件在build目录，若你的产物存放在public则修改为/var/app/current/public
    root /var/app/current/build;
    index index.html index.htm;

    # 核心规则：所有未匹配到静态资源的请求，都返回index.html以支持React前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：静态资源缓存优化，提升页面加载速度
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

关键注意事项 #

• 构建产物路径验证：确认React执行npm run build后，生成的静态文件目录是build还是public，对应调整配置中的root路径。
• 日志排查：若问题仍存在，登录EC2实例查看Nginx错误日志（/var/log/nginx/error.log），日志会明确显示错误原因（如文件不存在、权限不足）。
• 配置优先级：Elastic Beanstalk的默认Nginx配置可能覆盖自定义规则，确保配置文件放在.ebextensions/nginx/conf.d/目录下，不要直接修改默认配置文件。

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