如何将React应用部署上传至Hostinger并解决加载异常？

1. React项目执行npm run build后，不需要上传项目源码文件（src、node_modules、package.json这类本地开发用的文件都不需要传到服务器），仅需要上传构建生成的build目录内的所有产物即可。
2. Hostinger共享主机的默认站点根目录是名为public_html的文件夹，你提到的public.html是错误路径，优先确认目录是否进对。

标准部署步骤 #

• 本地构建校验
  本地执行npm run build完成后，先在项目根目录执行npx serve build启动本地静态服务，访问本地提示的测试地址，确认页面加载、平滑滚动效果、路由跳转都正常，排除代码本身的构建问题，确认产物可用后再上传。
• 目录结构要求
  打开Hostinger文件管理器进入public_html目录，将本地build文件夹内的所有文件、子文件夹直接上传到该目录根位置，不要把整个build文件夹嵌套上传。正确的部署后目录结构参考：

  public_html/
  ├─ index.html
  ├─ favicon.ico
  ├─ manifest.json
  ├─ robots.txt
  └─ static/
     ├─ css/
     ├─ js/
     └─ media/
  

  如果上传后结构为public_html/build/index.html，访问域名时会直接报403/404，把build内的所有文件剪切移动到public_html根目录即可修复。
• 路由重写配置
  如果项目使用了React Router做前端路由，必须在public_html目录下新建名为.htaccess的配置文件，写入以下重写规则，避免刷新子页面、直接访问子路径时出现404：

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

站点无法加载的排查顺序 #

• 路径校验：首先确认public_html根目录下直接存在index.html文件，没有嵌套在子文件夹内；如果项目package.json中配置了homepage字段，部署在域名根路径时请将该字段值设为"."或者直接删除该字段，重新构建后上传，避免静态资源引用路径错误导致404。
• 权限校验：选中public_html下所有部署的文件和文件夹，批量重置权限：文件夹权限设为755，文件权限设为644，权限异常会导致静态资源无法被正常读取。
• 错误定位：打开站点后按F12调出浏览器开发者工具，查看Console和Network面板的报错信息：如果是静态资源404优先排查路径配置，如果是JS执行报错优先本地复现构建产物的问题，确认平滑滚动相关的依赖、资源引用是否正确。
• 缓存清理：部署完成后先在Hostinger面板清除站点缓存，再使用浏览器无痕模式访问，避免本地缓存、主机缓存加载旧的错误资源。
• 解析校验：如果是刚绑定的域名，先确认域名已经正确解析到当前Hostinger主机的IP，解析未生效时无法正常访问站点。

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