在Hostinger部署React项目时.htaccess文件该如何配置？

问题原因及修复方案 #

1. 核心前置错误

你上传到服务器的是完整的React开发源码，Apache无法直接托管这类源码，必须先构建生产环境静态资源：

• 在本地项目根目录执行npm run build命令
• 执行完成后会生成名为build的文件夹，文件夹内的内容才是可直接部署的静态文件

2. 两种部署场景的正确配置

根据你想要的访问路径选择对应方案即可：

场景1：项目作为网站根目录访问（直接输入域名打开）

• 将build文件夹内的所有文件，直接上传到Hostinger主机的网站根目录（默认是public_html文件夹），不要嵌套react-portfolio、public这类额外文件夹
• 在public_html根目录下新建.htaccess文件，写入以下配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

场景2：项目在子路径访问（域名/react-portfolio打开）

• 在public_html下新建react-portfolio文件夹，将build文件夹内的所有文件上传到该文件夹中
• 在react-portfolio文件夹下新建.htaccess文件，写入以下配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /react-portfolio/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /react-portfolio/index.html [L]
</IfModule>

3. 之前配置报错的原因

• 第一次配置：重写规则嵌套了两层路径，触发了无限重定向死循环，Apache直接返回500错误
• 第二次配置：.htaccess放在子文件夹下，但RewriteBase设置为根目录，找不到对应路径的index.html，同时上传的是源码不是构建后的静态文件，路径正确也无法访问

4. 额外检查项

• 确认Hostinger主机已开启mod_rewrite模块，该服务默认开启，若异常可到主机管理面板的高级设置中手动开启
• 确认.htaccess文件权限为644，权限过高也会触发500错误
• 若确实需要直接部署完整源码，需要在主机上配置Node.js运行环境，普通静态虚拟主机不支持直接运行React源码，更推荐使用构建后的静态文件部署

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