React应用在Nginx与GitHub Actions部署下无法正常访问的问题排查

核心原因 #

你遇到的404问题，本质是文件访问权限限制导致的：Nginx默认以www-data用户运行，而/home/samuel这类用户主目录的默认权限通常是700（仅目录所有者能访问），www-data用户没有权限进入该目录，自然读取不到里面的build产物。

而/var/www是Nginx预设的网页根目录，系统已给www-data配置了足够的访问权限，所以将build文件夹移过去后就能正常运行。

让React应用在原路径运行的解决办法 #

方法1：调整目录权限（推荐） #

需要确保从/home/samuel到build目录的每一层父目录，都给www-data用户赋予执行权限（目录的执行权限等价于允许进入的权限），同时build目录及内部文件要有读权限。

执行以下命令：

1. 开放用户主目录的进入权限：

chmod o+x /home/samuel

2. 依次给中间层级的目录添加进入权限（替换为你的实际目录结构）：

chmod o+x /home/samuel/actions-runner
chmod o+x /home/samuel/actions-runner/client
chmod o+x /home/samuel/actions-runner/client/github-actions-example-client
chmod o+x /home/samuel/actions-runner/client/github-actions-example-client/github-actions-example-client

3. 给build目录及其内容添加读权限：

chmod -R o+r /home/samuel/actions-runner/client/github-actions-example-client/github-actions-example-client/build

方法2：修改Nginx运行用户（不推荐） #

编辑Nginx主配置文件/etc/nginx/nginx.conf，找到user www-data;一行，替换为user samuel;，然后重启Nginx：

sudo systemctl restart nginx

此方法虽简单，但会让Nginx以你的个人用户身份运行，存在安全风险，不建议生产环境使用。

方法3：创建符号链接（折中方案） #

若不想修改权限或Nginx运行用户，可将build目录链接到/var/www下，既保留原文件位置，又让Nginx能正常访问：

sudo ln -s /home/samuel/actions-runner/client/github-actions-example-client/github-actions-example-client/build /var/www/build-link

随后修改Nginx配置中的root为/var/www/build-link，重启Nginx即可。

验证步骤 #

修改完成后，可通过以下命令验证www-data是否能读取build目录下的文件：

sudo -u www-data cat /home/samuel/actions-runner/client/github-actions-example-client/github-actions-example-client/build/index.html

若能正常输出文件内容，说明权限配置无误，重启Nginx后即可访问应用。

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