Nginx无法部署React：权限拒绝问题求助（AWS EC2 Ubuntu环境）

在AWS EC2的Ubuntu 22.04环境中配置Nginx，同时提供React和Django服务，使用的Nginx配置如下：

server {
    listen 80;
    server_name 182.20.4.110 mydomain.io;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/ubuntu/myproj_app/static/;
    }


    location / {
        alias /home/ubuntu/myproj_app/frontend/build/;
    }

    location /apidoc {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

访问时持续返回403 Forbidden，查看Nginx错误日志，发现React build目录存在权限拒绝问题：

sudo tail -f /var/log/nginx/error.log

2024/04/01 12:23:57 [error] 3616#3616: *68 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.4.193, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"182.20.4.110\"
2024/04/01 12:23:58 [error] 3616#3616: *69 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.1.172, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"182.20.4.110\"
2024/04/01 12:24:21 [error] 3616#3616: *67 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.1.172, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"mydomain.io\"
2024/04/01 12:24:27 [error] 3616#3616: *70 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.4.193, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"182.20.4.110\"
2024/04/01 12:24:28 [error] 3616#3616: *71 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.1.172, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"182.20.4.110\"
2024/04/01 12:24:30 [error] 3616#3616: *67 "\"/home/ubuntu/myproj_app/frontend/build/index.html\" is forbidden (13: Permission denied), client: 172.20.1.172, server: 182.20.4.110, request: \"GET / HTTP/1.1\", host: \"mydomain.io\"

已尝试将build目录的所有者改为Nginx用户www-data，但仍无法访问：

ubuntu@ip-182-20-4-110:~$ ls -ld /home/ubuntu/myproj_app/frontend/build/
drwxr-xr-x 3 www-data www-data 4096 Apr  1 09:47 /home/ubuntu/myproj_app/frontend/build/
ubuntu@ip-182-20-4-110:~$ sudo -u www-data ls /home/ubuntu/myproj_app/frontend/build/
ls: cannot access '/home/ubuntu/myproj_app/frontend/build/': Permission denied

询问如何解决此问题，是否AWS策略设置会限制访问？

1. 修复上级目录的执行权限 #

问题核心是上级目录未给www-data用户提供执行权限：Linux中进入目录需要x（执行）权限，即使build目录权限正确，/home/ubuntu、/home/ubuntu/myproj_app、/home/ubuntu/myproj_app/frontend这些上级目录如果未开放权限，www-data仍无法进入build目录。

执行以下命令给各级目录添加其他用户的执行权限：

# 开放/home/ubuntu目录权限
chmod o+x /home/ubuntu
# 开放myproj_app目录权限
chmod o+x /home/ubuntu/myproj_app
# 开放frontend目录权限
chmod o+x /home/ubuntu/myproj_app/frontend

或用递归方式统一处理所有上级目录（仅针对目录，不修改文件）：

find /home/ubuntu/myproj_app -type d -exec chmod o+x {} \;

执行后测试：

sudo -u www-data ls /home/ubuntu/myproj_app/frontend/build/

若能正常列出文件，说明权限问题已解决。

2. 修正Nginx配置的两处问题 #

• React路由适配：使用alias配置location /时，需添加try_files指令处理单页应用路由，避免刷新页面出现404：

  location / {
      alias /home/ubuntu/myproj_app/frontend/build/;
      try_files $uri $uri/ /index.html;
  }
  

• 静态资源路径修正：原location /static/使用root会导致Nginx寻找/home/ubuntu/myproj_app/static/static/路径，改为alias即可：

  location /static/ {
      alias /home/ubuntu/myproj_app/static/;
  }
  

3. 排除AWS策略影响 #

你已能收到Nginx返回的403响应，说明EC2安全组已开放80端口，网络访问正常。AWS IAM策略不影响实例内部文件权限，因此权限问题与AWS策略无关。

4. 重启Nginx生效 #

修改配置和权限后，重启Nginx服务：

sudo systemctl restart nginx

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