部署的React应用中如何在浏览器访问public_html下的文件夹？

出现这个问题的核心原因是：部署React应用时，服务器配置会把所有未匹配到实际文件/文件夹的请求都重定向到React的index.html，所以你访问mysite.com/songs时，服务器直接返回了React首页，而没有去读取实际的songs文件夹。

下面是两种可行的解决方法：

方法一：修改服务器配置，让/songs路径绕过React路由 #

这种方法适合不想移动现有songs文件夹的场景，直接让服务器优先处理songs路径的请求。

如果你用的是Apache服务器 #

在服务器的public_html目录下找到.htaccess文件（如果没有就新建一个），修改内容如下：

RewriteEngine On
RewriteBase /

# 让/songs开头的请求直接访问实际文件夹，不经过React路由
RewriteRule ^songs/ - [L]

# 原有React路由重写规则
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

添加的RewriteRule ^songs/ - [L]会让所有以songs/开头的请求直接返回对应文件/文件夹，不会被重定向到index.html。

如果你用的是Nginx服务器 #

修改Nginx的站点配置文件，添加专门处理/songs的location块：

# 处理songs文件夹的请求
location /songs {
    alias /你的服务器路径/public_html/songs; # 替换成实际的songs文件夹路径
    autoindex on; # 可选，如果需要在浏览器显示文件列表就开启
}

# 原有React应用的路由配置
location / {
    try_files $uri $uri/ /index.html;
}

修改后重启Nginx服务即可生效。

方法二：将songs文件夹移入React项目的public目录 #

这种方法适合把音乐资源和React项目一起管理的场景，利用create-react-app的静态资源规则来访问。

• 在你的React项目根目录下的public文件夹里，新建一个songs目录，把所有音乐文件复制进去。
• 执行npm run build构建项目，此时build文件夹里会自动包含songs目录。
• 把build文件夹里的所有内容上传到服务器的public_html目录下。

之后访问mysite.com/songs就能直接看到文件夹里的音乐文件了，因为create-react-app会把public目录下的资源直接部署到根目录，不会被React路由拦截。

内容的提问来源于stack exchange，提问作者Klem Lloyd Mwenya