如何将React应用部署到树莓派Apache静态作品集子页面

按以下步骤操作即可实现portfolio.com/project-name格式的子页面访问：

• 配置React项目构建路径
  Create React App项目直接在根目录package.json中添加配置：

  "homepage": "/project-name"
  

  Vite项目修改根目录vite.config.js，添加base配置：

  export default defineConfig({
    base: '/project-name/',
    // 其余原有配置不变
  })
  

  若使用react-router-dom做前端路由，给路由根组件设置匹配的basename：

  <BrowserRouter basename="/project-name">
    {/* 路由页面配置 */}
  </BrowserRouter>
  

• 打包React静态产物
  在React项目根目录执行打包命令：

  npm run build
  

  打包完成后，CRA生成build目录、Vite生成dist目录，目录内的文件就是可直接部署的静态资源。
• 上传文件到Apache对应目录
  树莓派Apache默认站点根目录为/var/www/html/，在该目录下新建和访问路径同名的文件夹（比如要实现portfolio.com/quotes_app访问就建quotes_app文件夹），把打包生成的所有静态资源全部复制到该文件夹内。
• 配置Apache规则解决单页应用路由问题
  先开启Apache重写模块：

  sudo a2enmod rewrite
  

  编辑Apache默认站点配置文件/etc/apache2/sites-available/000-default.conf，找到<Directory /var/www/html/>配置段，将AllowOverride None修改为AllowOverride All，保存退出。
  在你新建的项目子文件夹（比如/var/www/html/quotes_app/）内新建.htaccess文件，写入以下规则：

  RewriteEngine On
  RewriteBase /quotes_app/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /quotes_app/index.html [L]
  

  重启Apache让配置生效：

  sudo systemctl restart apache2
  

常见踩坑点 #

• 禁止直接上传React源码到服务器，必须上传打包后的静态产物，Apache无法直接解析JSX等源码文件
• 若出现静态资源404，优先检查第一步配置的base/homepage路径是否和实际的文件夹名、访问路径完全一致
• 多个React子项目可按同样逻辑分别部署在不同命名的文件夹下，各自配置.htaccess规则即可，互不干扰

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